Les écritures d'une couleur en CSS
Une même couleur d'écran s'écrit de plusieurs façons dans une feuille de style. Toutes décrivent le même point de l'espace sRGB, celui des écrans courants ; elles ne diffèrent que par la manière de le repérer.
| Écriture | Exemple | Ce qu'elle dit |
|---|---|---|
| HEX | #ff6a13 | Rouge, vert, bleu en base 16 |
| RGB | rgb(255, 106, 19) | Les mêmes, de 0 à 255 |
| HSL | hsl(22.1, 100%, 53.7%) | Teinte, saturation, luminosité |
| HWB | hwb(22.1 7.5% 0%) | Teinte, part de blanc, part de noir |
| OKLCH | oklch(70.13% 0.1996 43.67) | Clarté perçue, chroma, teinte |
S'y ajoutent les 148 noms de couleurs de la norme CSS Color 4 du W3C (tomato, rebeccapurple…). Le convertisseur lit toutes ces écritures, avec ou sans virgules, avec ou sans #, et même trois nombres nus comme 255, 106, 19.
Comment passer de HEX à RGB, puis à HSL
Un code HEX est fait de trois paires de chiffres hexadécimaux, une par canal. Chaque paire se lit en base 16 : le premier chiffre vaut seize fois sa valeur, le second s'y ajoute, avec a = 10, b = 11 et ainsi de suite jusqu'à f = 15.
valeur = 1er chiffre × 16 + 2e chiffreL = (max + min) ÷ 2S = (max − min) ÷ (1 − |2L − 1|)Pour HSL, on ramène d'abord chaque canal entre 0 et 1 (en divisant par 255), puis on prend le plus fort (max) et le plus faible (min). La teinte, elle, est un angle sur le cercle des couleurs : 0° pour le rouge, 120° pour le vert, 240° pour le bleu, et les valeurs intermédiaires entre deux.
Trois exemples de conversion
ff = 15 × 16 + 15 = 255, 6a = 6 × 16 + 10 = 106, 13 = 1 × 16 + 3 = 19 : rgb(255, 106, 19). Le canal le plus fort vaut 1, le plus faible 19 ÷ 255 ≈ 0,075 : luminosité ≈ 53,7 %, saturation 100 %, teinte ≈ 22,1°, soit hsl(22.1, 100%, 53.7%).
La table CSS lui donne #663399, soit rgb(102, 51, 153), ou hsl(270, 50%, 40%).
Le calcul donne 63,75 pour le rouge et 191,25 pour le vert et le bleu, arrondis à rgb(64, 191, 191), soit #40bfbf. C'est la raison des petits écarts d'une unité quand on fait l'aller-retour entre HSL et HEX.
OKLCH, l'écriture récente
OKLCH repère une couleur par sa clarté telle que l'œil la perçoit (de 0 à 100 %), son chroma (l'intensité, 0 pour un gris) et sa teinte en degrés. Elle est conçue pour que deux couleurs de même clarté OKLCH paraissent aussi claires l'une que l'autre, ce que HSL ne cherche pas à faire. Le rouge pur s'écrit oklch(62.8% 0.2577 29.23).
OKLCH décrit aussi des couleurs plus vives que ce que permettent HEX et RGB. Quand une saisie OKLCH sort de l'espace sRGB, l'outil ramène chaque canal dans ses limites et vous le signale : la couleur affichée est alors la plus proche que l'écran sait rendre en sRGB, pas exactement celle saisie.
Le piège : la luminosité HSL n'est pas la clarté perçue
Le jaune et le bleu purs ont la même luminosité HSL, 50 %, et pourtant le jaune paraît bien plus clair. En OKLCH, leur clarté est de 96,8 % et 45,2 %. Pour bâtir une palette dont les couleurs ont un poids visuel égal, ou pour juger d'un contraste, ne vous fiez pas au L de HSL : comparez la clarté OKLCH, ou mesurez le contraste avec l'outil dédié.
Les teintes et nuances proposées sous l'outil sont un mélange de la couleur avec du blanc ou du noir, canal par canal, de 10 % en 10 % : un choix de l'outil, pratique pour décliner une couleur de marque, pas une règle de la norme.
Questions fréquentes
Comment convertir un code HEX en RGB ?
Coupez le code en trois paires et lisez chacune en base 16 : #ff6a13 donne ff = 255, 6a = 106 et 13 = 19, soit rgb(255, 106, 19). Chaque paire vaut le premier chiffre multiplié par 16, plus le second (a = 10, b = 11… f = 15).
Quelle différence entre RGB et HSL ?
Les deux décrivent les mêmes couleurs. RGB dose le rouge, le vert et le bleu de 0 à 255 ; HSL donne la teinte sur le cercle des couleurs (0 à 360°), la saturation et la luminosité en pour cent. HSL est plus simple à retoucher à la main : pour éclaircir, on augmente la luminosité.
Que veut dire un code HEX à 3 ou à 8 chiffres ?
Un code à 3 chiffres est l'écriture courte d'un code à 6 dont chaque paire est doublée : #f63 vaut #ff6633. Un code à 8 chiffres ajoute une quatrième paire pour la transparence : #ff6a1380 est le même orange à environ 50 % d'opacité.
Combien de couleurs ont un nom en CSS ?
La table de la norme CSS Color 4 du W3C compte 148 noms, de aliceblue à yellowgreen, plus le mot transparent. Quelques-uns désignent la même couleur : aqua et cyan, fuchsia et magenta, et chaque gris existe en gray et en grey. L'outil reconnaît tous ces noms et affiche celui d'une couleur quand elle en a un.
Pourquoi la couleur convertie est-elle légèrement différente ?
HEX et RGB n'ont que 256 valeurs par canal : une couleur saisie en HSL ou en OKLCH tombe souvent entre deux, et l'outil arrondit à l'entier le plus proche. L'écart est d'une unité au plus sur un canal, invisible à l'œil. Une couleur OKLCH hors de l'espace sRGB est en plus ramenée dans ses limites, et l'outil le signale.
Une erreur ? Signalez-la, nous la corrigeons.