Codes couleur hex, RVB, TSL et OKLCH expliqués

Les codes couleur hex comme #7c3aed sont la façon la plus courante d’écrire une couleur à l’écran : un # suivi de six caractères qui donnent la quantité de rouge, de vert et de bleu. Le RVB écrit les mêmes nombres en décimal, le TSL les réorganise en teinte, saturation et luminosité, et OKLCH décrit la couleur telle que l’œil la perçoit. Ce sont des notations différentes des mêmes couleurs, et chacune excelle dans un usage différent.

Comment fonctionnent les codes couleur hex

Un code hex est fait de trois paires de chiffres en base 16 : #RRGGBB. La base 16 compte de 0 à 9 puis de a à f, si bien que chaque paire va de 00 (aucun) à ff (255, plein). Dans #7c3aed, le rouge est 7c (124), le vert 3a (58) et le bleu ed (237) : beaucoup de bleu, pas mal de rouge, peu de vert, donc du violet. Trois canaux de 256 valeurs donnent 16 777 216 couleurs possibles.

• Forme abrégée : #f0c équivaut à #ff00cc. Chaque chiffre est doublé, ce qui ne marche que pour les couleurs dont les paires se répètent.
• Transparence : un code à huit chiffres ajoute l’alpha à la fin. #7c3aed80 est le violet à environ 50 % d’opacité, car 80 vaut 128 sur 255.
• La casse n’a pas d’importance : #7C3AED et #7c3aed sont identiques.
• Les gris ont trois paires égales : #767676, #1a1a1a et #f4f4f4 sont tous neutres.

RVB : les mêmes nombres en décimal

Le RVB écrit les trois canaux comme des nombres ordinaires de 0 à 255. Le CSS moderne les sépare par des espaces et ajoute la transparence après une barre oblique ; l’ancienne syntaxe à virgules et rgba() fonctionnent toujours partout. Le RVB est pratique quand un outil ou une API réclame des nombres, ou quand vous voulez lire la composition d’une couleur d’un coup d’œil.

/* All four lines are the same violet */
color: #7c3aed;
color: rgb(124 58 237);
color: rgb(124, 58, 237);
color: hsl(262 83% 58%);

/* The same violet at 50% opacity */
color: #7c3aed80;
color: rgb(124 58 237 / 0.5);

TSL : teinte, saturation et luminosité

Le TSL décrit une couleur par sa teinte, un angle sur le cercle chromatique (0 est rouge, 120 vert, 240 bleu), sa saturation, du gris (0 %) à la couleur pleine (100 %), et sa luminosité, du noir (0 %) à la couleur pure (50 %) puis au blanc (100 %). Il est facile à retoucher à la main : pour un violet plus sombre, baissez le dernier nombre.

Le hic, c’est que la luminosité du TSL est une formule, pas une mesure de l’éclat d’une couleur. Un jaune à 50 % de luminosité paraît bien plus clair qu’un bleu à 50 %. Construisez une palette en gardant une luminosité TSL égale et les couleurs ne paraîtront pas également claires, c’est exactement pourquoi les arcs-en-ciel par défaut semblent rayés. Voyez les dégradés arc-en-ciel pour le résultat visible.

OKLCH : la couleur telle que vous la voyez

OKLCH vient d’Oklab, un espace colorimétrique publié par Björn Ottosson en 2020 et désormais intégré au CSS. Il utilise trois valeurs : L est la luminosité perçue de 0 % à 100 %, C est la chroma, c’est-à-dire l’intensité de la couleur, de 0 pour un gris jusqu’à environ 0,37 pour les couleurs les plus vives, et H est l’angle de teinte. Des valeurs de L égales paraissent réellement également claires : vous pouvez donc changer une qualité sans perturber les autres.

OKLCH brille dans les dégradés. Un mélange en sRGB simple, celui par défaut pour les couleurs hex, trace une droite à travers le cube RVB, et des couleurs opposées sur le cercle se rejoignent dans un gris. Un mélange en OKLCH garde la chroma et fait le tour du cercle des teintes.

.band {
  /* Tell the browser which space to blend in */
  background: linear-gradient(in oklch 90deg, #2563eb, #facc15);
}

:root {
  /* One hue, a scale of equal steps in perceived lightness */
  --violet-90: oklch(90% 0.05 293);
  --violet-70: oklch(70% 0.16 293);
  --violet-54: oklch(54.1% 0.247 293);
  --violet-35: oklch(35% 0.16 293);
  --violet-20: oklch(20% 0.08 293);
}

Quel code couleur utiliser, et où

Pour tester ces valeurs, oklch.com montre une couleur dans toutes les notations et prévient quand elle sort de la gamme d’un écran, et la référence MDN sur les couleurs couvre toutes les syntaxes. Si vous choisissez des couleurs plutôt que de les écrire, comment choisir les couleurs de marque est l’étape suivante, et le contraste des couleurs montre comment vérifier que le texte reste lisible.