Sélecteur de couleur et convertisseur de code couleur

Ce que veulent dire HEX, RGB et HSL

Toute couleur affichée à l’écran est un mélange de lumière rouge, verte et bleue. Le RGB (RVB en français) décrit directement ce mélange : rgb(29, 78, 216) signifie peu de rouge, un peu de vert et beaucoup de bleu, chaque canal allant de 0 à 255. Le code HEX reprend ces trois nombres en base 16 : 29, 78 et 216 deviennent 1d, 4e et d8, d’où #1d4ed8. Un code court comme #777 équivaut à #777777, et un code à huit chiffres ajoute une quatrième paire pour l’opacité.

Le HSL (TSL : teinte, saturation, luminosité) décrit la même couleur d’une manière plus facile à régler à la main : la teinte est un angle sur le cercle chromatique (0 pour le rouge, 120 pour le vert, 240 pour le bleu), la saturation indique la vivacité et la luminosité va du noir au blanc. hsl(224, 76%, 48%) est le même bleu que ci-dessus. Le HSV, que Photoshop et beaucoup de logiciels appellent HSB ou TSV, remplace la luminosité par la valeur : une couleur pure s’y trouve à 100 % et non à 50 %.

L’OKLCH est le format le plus récent en CSS. Sa clarté suit la perception de l’œil : deux couleurs de même clarté OKLCH paraissent vraiment aussi claires l’une que l’autre, ce qui n’est pas le cas en HSL. C’est pratique pour un design system, quand toute une palette doit passer du clair au foncé par paliers réguliers.

Quel format choisir

• HEX pour le CSS, les logiciels de création et les chartes graphiques : court, il est accepté presque partout.
• RGB ou rgba() pour gérer la transparence dans du code ancien, ou quand un logiciel demande trois nombres.
• HSL pour retoucher une couleur à la main : augmenter la luminosité pour un survol, baisser la saturation pour une variante plus sourde.
• HSV/HSB pour retrouver les valeurs du sélecteur de Photoshop, de Figma ou d’éditeurs semblables.
• OKLCH pour les palettes et thèmes en CSS moderne.
• CMJN seulement comme repère approximatif pour l’impression, comme expliqué ci-dessous.

Pourquoi l’écran et l’impression ne donnent pas les mêmes couleurs

L’écran additionne de la lumière : rouge, vert et bleu au maximum donnent du blanc. L’imprimante en soustrait avec des encres cyan, magenta, jaune et noire sur un papier déjà blanc. Beaucoup de couleurs vives à l’écran, surtout les bleus et les verts très saturés, ne peuvent tout simplement pas être imprimées. Les valeurs CMJN de cet outil viennent d’une formule de base qui ne connaît ni votre papier ni la presse ; un imprimeur qui travaille avec un vrai profil colorimétrique peut donc retenir d’autres chiffres. Pour un travail important, demandez une épreuve couleur (BAT) avant le tirage.

Les bases du contraste et de l’accessibilité

Un texte dont la luminosité est trop proche de celle du fond se lit mal, surtout sur un téléphone en plein soleil ou pour les personnes malvoyantes. Les règles WCAG mesurent cet écart par un rapport de contraste compris entre 1:1 (aucune différence) et 21:1 (noir sur blanc). Le gris #777777 sur blanc donne 4,47:1, juste sous le seuil de 4,5:1 exigé au niveau AA pour le texte courant, mais suffisant pour un grand titre. Le vérificateur n’arrondit jamais vers le haut : un 4,49 n’est donc pas conforme. Enfin, la couleur ne doit jamais être le seul indice : doublez les indicateurs d’état rouges ou verts d’un mot ou d’une icône.

Teintes, nuances et couleurs assorties

Les teintes mélangent la couleur avec du blanc, les nuances avec du noir, par paliers égaux : de quoi obtenir tout de suite des variantes pour le survol, les bordures et les fonds. La couleur complémentaire se trouve à l’opposé sur le cercle chromatique et crée un contraste marqué ; les couleurs analogues se situent à 30° de part et d’autre et s’accordent en douceur. Pour voir une couleur occuper tout votre écran, essayez l’écran blanc avec une couleur personnalisée. Et si vous préparez des visuels pour un site qui reprend cette palette, pensez à compresser vos images pour alléger les pages.