Choisissez une couleur, choisissez une harmonie, et cet outil fait tourner la teinte de quantités fixes pour produire un ensemble qui se tient. Les règles viennent de la théorie des couleurs enseignée aux beaux-arts, et ce sont de véritables points de départ. Ce sont aussi de l'arithmétique sur un espace colorimétrique qui ne modélise pas votre vision — d'où le fait que la sortie réclame généralement un humain ensuite.
Ce que sont réellement les harmonies
Chaque option est une instruction unique : faire tourner la teinte d'un nombre fixe de degrés. Complémentaire, c'est 180 — le côté opposé du cercle. Triadique, ce sont deux rotations de 120, donnant trois couleurs également espacées. Split-complémentaire prend la complémentaire et recule de 30 degrés de part et d'autre, ce qui adoucit l'affrontement. Monochromatique ne tourne pas du tout ; elle garde la teinte et fait bouger la luminosité et la saturation.
Ce ne sont pas des lois de la perception. Ce sont des conventions issues de peintres mélangeant des pigments, et elles survivent parce qu'elles produisent de façon fiable des ensembles qui ne jurent pas — pas parce que 120 degrés aurait quoi que ce soit de physiquement particulier. Savoir qu'elles sont arbitraires est ce qui permet de les quitter quand le résultat paraît faux.
Le cercle des teintes n'est pas uniformément lumineux
Voici ce que l'arithmétique ne peut pas savoir. Faites tourner la teinte en maintenant la lightness HSL à 50 % et vous n'avez rien maintenu. Le jaune à cette luminosité atteint 92,8 % de la luminance du blanc. Le bleu au même réglage atteint 7,2 %. Le jaune émet treize fois la lumière.
Une palette triadique ancrée sur le bleu produit donc deux partenaires qui vont l'aplatir visuellement, et une ancrée sur le jaune en produit deux qui disparaissent à côté. Les nombres disent que les trois couleurs sont également claires. Vos yeux ne sont pas consultés.
C'est le même défaut qui rend le milieu des dégradés boueux et #808080 pas moitié moins lumineux que le blanc : HSL a été bâti dans les années 1970 pour être peu coûteux à calculer, et son axe de lightness est un morceau d'arithmétique sur les canaux RVB plutôt qu'une mesure de lumière. Si vous voulez une palette dont les membres pèsent vraiment pareil, générez-la ici pour les relations de teintes puis corrigez la luminosité à l'œil — ou travaillez en Oklch, où maintenir la luminosité constante la maintient réellement constante.
Une palette n'est pas un ensemble d'égaux
La façon la plus courante de mésuser d'une telle sortie est de prendre cinq couleurs et de les employer toutes les cinq à volume égal. Ce n'est pas une palette, c'est une bagarre. Tout ensemble de couleurs qui fonctionne en pratique a une hiérarchie : une dominante, une de soutien, et le reste en accents employés avec parcimonie.
La vieille heuristique des designers est 60-30-10 — soixante pour cent de la surface dans la dominante, trente dans la secondaire, dix dans l'accent. Moins une règle qu'une observation sur ce à quoi ressemble un travail équilibré quand on le mesure. Si un design paraît bruyant sans qu'on sache dire pourquoi, mesurer les proportions est généralement où se trouve la réponse.
Cela signifie aussi que l'harmonie compte moins qu'on ne le croit. Presque deux teintes quelconques peuvent fonctionner si l'une est désaturée et l'autre non. La plupart des palettes professionnelles sont une couleur avec une gamme de teintes, plus un unique accent occupant environ un dixième de la surface — plus proche du monochromatique que de tout ce que le cercle produirait.
Rien de tout cela ne vérifie le contraste
Une harmonie dit que deux couleurs entretiennent une relation de teinte agréable. Elle ne dit rien de la lisibilité d'un texte de l'une sur l'autre : des questions sans rapport que l'on confond couramment.
Les paires complémentaires l'illustrent bien. Le bleu et le jaune sont complémentaires et atteignent environ 8:1, ce qui convient au texte courant. Le rouge et le cyan sont complémentaires aussi, et atterrissent bien plus bas. Le cercle ne le sait pas et s'en moque — il mesure une distance angulaire entre teintes, et la lisibilité est affaire d'écart de luminance.
Générez donc la palette ici, puis passez chaque paire destinée à porter du texte dans un vérificateur de contraste. Les WCAG demandent 4,5:1 pour le texte normal et 3:1 pour le grand. Cette vérification prend deux secondes et c'est la seule chose qui réponde à la question que l'harmonie ne peut pas trancher.
Questions fréquentes
Quelque chose est-il envoyé à un serveur ?
Non. Cet outil porte la mention « client » : les harmonies sont de l'arithmétique de teintes faite dans votre onglet. Rien n'est transmis.
Pourquoi les couleurs de ma palette ne paraissent-elles pas également lumineuses ?
Parce qu'elles ne le sont pas, et HSL ne peut pas vous le dire. Des valeurs de lightness égales sur des teintes différentes produisent des quantités de lumière follement différentes — treize fois entre le jaune et le bleu au même réglage. La palette a raison sur les relations de teintes et se tait sur tout le reste. Ajustez la luminosité à l'œil, ou reconstruisez-la en Oklch, où l'axe veut dire ce qu'il dit.
Quelle harmonie choisir ?
Monochromatique si vous hésitez, et ce n'est pas une échappatoire. C'est la plus difficile à rater, elle a l'air délibérée, et la plupart des interfaces professionnelles en sont plus proches que de tout le reste — une teinte, une gamme de nuances, un accent. Prenez la complémentaire quand une chose doit ressortir nettement, et la triadique quand vous avez trois catégories réellement distinctes à séparer et que l'énergie est le but.
De combien de couleurs ai-je besoin ?
Moins que vous ne le pensez. Un neutre, une couleur de marque et un accent portent une interface entière, avec des nuances de chacun pour les états. Là où il en faut vraiment plus, c'est la sémantique — succès, avertissement, erreur — et celles-là se décident par convention, pas par harmonie. Personne ne vous remerciera pour un rouge dans la palette qui ne se lit pas comme une erreur.
Puis-je utiliser ces couleurs pour du texte ?
Vérifiez d'abord. Une harmonie concerne la teinte et le contraste concerne la luminance ; une palette peut être parfaitement harmonieuse et totalement illisible. Passez chaque paire dans un vérificateur de contraste et visez 4,5:1 pour le texte courant. Si votre accent échoue, assombrissez-le pour le texte et gardez la version vive pour les formes et les aplats — c'est la sortie habituelle, et c'est pourquoi les systèmes de design ont souvent deux versions de chaque accent.