Générateur de palette de couleurs
Des palettes qui s’accordent

Ce que fait un générateur de palette de couleurs

Une couleur est un point de départ plutôt qu’un plan. Une page a besoin d’un fond, d’une couleur de texte, d’une bordure et d’un accent qui vont ensemble. Un générateur de palette de couleurs prend donc la couleur que vous avez déjà et travaille le reste.

Quatre choses reviennent d’un seul choix. D’abord, les séries d’harmonies : complémentaire, analogue, triade, complémentaire divisée, tétrade et monochrome. Ensuite, une échelle de nuances du presque noir au presque blanc. Après cela, un tableau de contraste qui dit quelle paire peut porter du texte. Enfin, les formats d’export, prêts à coller.

Ce tableau de contraste compte plus qu’il n’y paraît. Une jolie palette qui échoue à la règle de contraste devient un ticket de support. Chaque paire reçoit donc une lecture, et chaque ligne en échec le dit en toutes lettres.

Le sens marche aussi à l’envers. Parce que vous pouvez coller une palette que vous possédez déjà et demander quelle harmonie lui va le mieux, la page aide quand vous héritez d’un design et devez l’étendre sans rupture visible.

Comment un générateur de palette de couleurs construit une palette

Les mathématiques sont plus vieilles que le web. Une roue chromatique range les teintes en cercle, et chaque harmonie est une figure tracée sur ce cercle. Deux points opposés donnent une paire complémentaire. Trois points également espacés donnent une triade.

La première passe convertit donc votre couleur en HSL. La teinte est l’angle, la saturation dit à quelle distance la couleur se tient du gris, et la luminosité dit combien de blanc ou de noir elle porte. Les angles s’additionnent proprement en HSL, et c’est pourquoi chaque harmonie y travaille plutôt qu’en hex.

La deuxième passe fait tourner la teinte. La complémentaire ajoute 180 degrés. L’analogue ajoute 30 et retire 30. La triade ajoute 120 et 240. La complémentaire divisée ajoute 150 et 210. La tétrade ajoute 90, 180 et 270. Chaque résultat revient autour du cercle, donc une teinte de 350 plus 30 tombe sur 20 plutôt que sur 380.

La troisième passe ajuste le reste. Parce qu’une rotation pure peut laisser deux couleurs à la même luminosité, le générateur propose aussi une version avec la luminosité décalée. Sinon, une bannière et son accent se confondent sur un projecteur.

Rien ici n’a besoin d’un appel réseau. La page fonctionne donc hors ligne, et elle fonctionne sur une couleur de marque que vous préférez ne pas taper dans un outil hébergé.

Pourquoi la roue décide, et non l'œil

L'œil s’adapte. Deux couleurs qui semblent différentes sur une page blanche peuvent sembler identiques sur une page sombre. L’arithmétique des teintes ne s’adapte pas, et c’est justement son intérêt.

Parce que la rotation tourne sur des nombres, la même entrée donne la même sortie à chaque fois. Une palette qui vous a plu le mois dernier revient donc exactement telle que vous l’avez laissée.

Le contraste est l’autre raison. Un ratio de contraste dépend de la luminance relative plutôt que de la teinte. Deux couleurs des côtés opposés de la roue peuvent donc encore échouer à la règle quand les deux sont à une luminosité proche.

D’où le pas de luminosité. C’est le levier qui répare une harmonie correcte sur la roue et inutilisable sur la page.

Les six harmonies, une par une

La complémentaire place deux teintes à l’opposé. La paire crie, ce qui convient à un appel à l’action ou à un prix. Cependant, la même paire fait mal en texte courant sur un fond, parce que les bords vibrent là où les deux se rencontrent.

L’analogue garde trois voisines dans environ 60 degrés. Parce que les teintes sont proches, la série paraît calme, et elle convient à un graphique à plusieurs séries. Pourtant, elle ne vous donne aucun accent naturel.

La triade prend trois teintes à espacement égal. Le résultat est vif et équilibré à la fois. Pourtant, l’une des trois doit souvent se réduire à un accent, sinon la page devient un drapeau.

La complémentaire divisée prend une teinte et les deux voisines de son opposée. Vous gardez donc le punch d’une paire complémentaire avec moins de tension. C’est la plus facile des six à utiliser sur une page d’atterrissage.

La tétrade, parfois appelée carrée, prend quatre teintes à espacement égal. En effet, elle demande le plus de discipline, car deux des quatre doivent porter l’essentiel de la page et le reste doit rester petit.

La monochrome reste sur une teinte et ne bouge que la luminosité et la saturation. En effet, c’est la série la plus sûre pour une interface produit, parce que rien en elle ne se dispute l’attention.

Lire une couleur dans une photo

Une couleur de marque arrive souvent sous forme de logo, de capture d’écran ou de photographie plutôt que de code. La page en lit donc une aussi. Déposez le fichier, et l’échantillonneur renvoie les teintes qui couvrent le plus de pixels.

La lecture tourne sur un canevas dans votre propre onglet. Parce que le fichier ne quitte jamais le navigateur, une photo de produit non publiée reste non publiée.

L’échantillonnage regroupe les pixels similaires avant de les compter. Sinon, la photographie d’une feuille renvoie quatre cents nuances de vert et rien d’utile. Le regroupement garde la liste assez courte pour que vous puissiez choisir.

À partir de là, les mêmes six harmonies s’appliquent. La photographie d’une devanture peut donc produire tout un schéma en une étape, avec la couleur de l’enseigne comme base.

Ce qui sort : les formats d’export

Chaque série part dans le format dont votre étape suivante a besoin. La liste brute de codes hex convient à un message à un designer. Les propriétés personnalisées CSS conviennent à une feuille de styles, puisque les variables sont la façon habituelle de tenir un thème.

Un bloc de propriété personnalisée CSS vient en premier, parce qu’un thème vit souvent dans des variables. Ensuite un bloc Tailwind, puisqu’un fichier de thème porte les mêmes valeurs sous ses propres noms. Après cela, les variables SCSS et un objet JSON couvrent les cas restants.

Chaque échantillon porte aussi ses propres lectures. C’est-à-dire l’angle de teinte, la saturation, la luminosité, le code hex, et le contraste contre le blanc et contre le noir.

Enfin, tout le schéma se télécharge en fichier JSON. Une palette survit donc à un presse-papiers vidé, et elle peut se ranger dans un dépôt de design à côté des écrans dont elle vient.