Choisissez une couleur et cet outil vous montre sa complémentaire ainsi qu'une gamme de teintes et de nuances. Ce sont d'utiles points de départ. Ils sont aussi produits par de l'arithmétique sur HSL, et HSL ment sur la luminosité d'une manière qui façonne toute palette bâtie dessus — cela vaut la peine d'être compris avant de faire confiance à la sortie.
La lightness de HSL n'est pas la luminosité
Voici la mesure qui explique beaucoup de frustration. Prenez six couleurs pleinement saturées, toutes à une lightness HSL de 50 % : jaune, vert, cyan, bleu, rouge, magenta. HSL prétend qu'elles sont également claires. Elles ne le sont pas, et de loin.
Mesuré en lumière réellement émise, le jaune en hsl(60, 100%, 50%) atteint 92,8 % du blanc. Le bleu en hsl(240, 100%, 50%) atteint 7,2 %. Le jaune émet treize fois la lumière du bleu alors que les deux portent la même étiquette de luminosité. Le vert se situe à 71,5 %, le rouge à 21,3 %.
La raison : HSL a été conçu dans les années 1970 pour être facile à calculer, pas pour modéliser la vision. Son axe de lightness est le milieu entre le plus grand et le plus petit canal RVB — un morceau d'arithmétique sans rapport avec la réponse de l'œil. Le vert contribue pour environ 71 % de la luminosité perçue et le bleu pour environ 7 %, et HSL n'en sait rien.
Conséquence pratique : une palette bâtie en maintenant la lightness constante et en faisant tourner la teinte paraîtra follement inégale. Votre jaune éblouira et votre bleu disparaîtra. Tout designer ayant construit un jeu de couleurs d'état en HSL en se demandant pourquoi le jaune réclame un traitement particulier a rencontré ceci.
Ce qu'est réellement la complémentaire
La couleur complémentaire ici est la teinte tournée de 180 degrés — le bleu donne le jaune, le rouge donne le cyan. C'est la définition standard et un point de départ réellement utile, car des teintes opposées créent bel et bien le contraste de teinte le plus fort possible.
Deux mises en garde. La première : c'est un point de départ, pas une réponse. Deux teintes opposées pleinement saturées mises face à face sont rarement un design, c'est un signal d'alarme. Le geste habituel consiste à prendre la complémentaire puis à la désaturer et l'éclaircir fortement, pour qu'elle serve d'accent plutôt que de concurrente.
La seconde : « complémentaire » au sens du cercle chromatique ne dit rien du contraste au sens de l'accessibilité. Le bleu et le jaune sont complémentaires et atteignent par hasard 8:1, ce qui convient au texte. Le rouge et le cyan sont complémentaires aussi, et atterrissent bien plus bas. Si vous choisissez une paire pour du texte sur un fond, le cercle n'est pas l'outil — un rapport de contraste l'est.
Teintes et nuances, et pourquoi les pas semblent faux
Une teinte est la couleur mêlée vers le blanc, une nuance vers le noir. Générer une gamme en faisant varier la lightness par incréments égaux est l'approche évidente, et elle produit une gamme dont les pas ne paraissent pas égaux : l'extrémité claire se tasse et l'extrémité sombre s'écarte, ou l'inverse, selon la teinte.
C'est le même problème que plus haut : des pas égaux en HSL ne sont pas des pas égaux en perception. Cela compte si vous bâtissez un système de design, où une gamme de couleurs doit fonctionner comme une échelle — où « le 500 est deux crans plus sombre que le 300 » doit signifier la même chose pour votre bleu que pour votre jaune.
La réponse moderne est Oklch, un espace colorimétrique conçu précisément pour que son axe de luminosité soit perceptuellement uniforme. Ajouter dix points de luminosité en Oklch paraît être le même pas quelle que soit la teinte. CSS le prend désormais en charge directement, et si vous générez une gamme par le code plutôt qu'à l'œil, cela vaut l'après-midi nécessaire à l'apprendre.
Questions fréquentes
Quelque chose est-il envoyé à un serveur ?
Non. Cet outil porte la mention « client » : les calculs de couleur s'exécutent dans votre onglet et rien n'est transmis.
Pourquoi mon jaune paraît-il bien plus lumineux que mon bleu à lightness égale ?
Parce qu'il l'est réellement — treize fois plus lumineux, mesuré. La lightness de HSL est une formule sur les canaux RVB, pas une mesure de lumière. L'œil est bien plus sensible au vert et au jaune qu'au bleu, et HSL ne modélise pas cela du tout. S'il vous faut des couleurs qui paraissent également claires, il vous faut un espace perceptuel comme Oklch, ou bien ajuster à l'œil en acceptant que les nombres ne seront pas nets.
Puis-je utiliser la complémentaire comme couleur de texte sur la base ?
Vérifiez le rapport de contraste avant. Complémentaire signifie opposée sur le cercle, ce qui concerne la teinte et ne dit rien sur la lisibilité de l'une sur l'autre. Certaines paires complémentaires franchissent les WCAG confortablement, d'autres échouent nettement. C'est une vérification de deux secondes et la seule chose qui réponde à la question.
Comment prélever une couleur sur mon écran ?
Pas avec cet outil — une page web ne peut pas lire les pixels en dehors d'elle-même, ce qui est une frontière de sécurité et non une fonctionnalité manquante. Chrome et Edge exposent une API EyeDropper que certains sites utilisent, mais la réponse fiable est votre système : macOS a le Colorimètre numérique, Windows a le sélecteur de PowerToys, et tout outil de design en intègre un.
Pourquoi le même code hex rend-il différemment sur mon téléphone ?
Un code hex ne dit rien de l'espace colorimétrique qu'il désigne ; le web suppose sRGB. Les écrans de téléphone modernes affichent une gamme plus large, et leur façon de traiter une couleur sRGB non étiquetée varie : certains la restituent fidèlement, d'autres l'étirent vers leur gamut élargi et la rendent plus saturée que prévu. Ajoutez la luminosité, la lumière ambiante et un éventuel filtre nocturne, et que des nombres identiques atteignent des yeux différents devient le cas normal, pas l'exception.