Couleurs HTML et CSS

Utiliser un nom de couleur en CSS

Toute propriété CSS qui accepte une couleur accepte aussi l'un de ces 148 noms, en majuscules ou en minuscules. Les trois lignes ci-dessous donnent le même rouge.

Le nom se lit facilement, mais on ne le devine pas toujours : gainsboro, peru et moccasin sont de vraies couleurs. Pour la couleur de votre marque, utilisez HEX ou rgb().

color: tomato;
color: #ff6347;
color: rgb(255 99 71);

HEX, RGB, HSL et OKLCH

Le tableau montre chaque couleur dans quatre notations CSS. HEX est la plus courte et la plus répandue. RGB donne la quantité de rouge, de vert et de bleu, de 0 à 255. HSL décrit la teinte, la saturation et la luminosité, ce qui aide à obtenir une version plus claire ou plus sombre de la même couleur.

OKLCH utilise aussi une teinte, mais sa luminosité (le premier nombre) suit ce que l'œil perçoit : deux couleurs avec la même valeur paraissent aussi claires l'une que l'autre. Ce n'est pas le cas en HSL, où yellow paraît bien plus clair que blue malgré la même luminosité nominale. Le blanc, le noir et les gris n'ont pas de chroma, leur teinte s'affiche donc comme 0.

Pour convertir une couleur absente de la liste, utilisez l'un des convertisseurs ci-dessous.

• Convertir HEX en RGB
• Convertir RGB en HEX
• Choisir une couleur avec le Color Picker

Des noms différents, la même couleur

Neuf paires de noms désignent la même couleur : aqua et cyan, fuchsia et magenta, et les graphies gray et grey de gray, darkgray, darkslategray, dimgray, lightgray, lightslategray et slategray. C'est pourquoi la liste compte 148 noms et 139 couleurs différentes. Dans le tableau, l'autre nom apparaît sous le nom de la ligne.

Les listes plus anciennes parlent de 140 noms. Elles ne comptent qu'une graphie par gris et n'incluent pas rebeccapurple (#663399), arrivée avec CSS Color Level 4.

transparent, currentColor et couleurs système

Deux mots-clés valent comme couleur mais restent hors du tableau, faute de valeur fixe. transparent est du noir avec un alpha nul. currentColor reprend la valeur de color de l'élément, utile pour une bordure ou une icône SVG qui doit suivre la couleur du texte.

CSS définit aussi 19 couleurs système, comme Canvas, CanvasText, LinkText, Highlight et AccentColor. Leur valeur dépend du navigateur, du système d'exploitation et du thème clair ou sombre, il n'existe donc pas de HEX pour elles. Elles permettent à un composant de suivre le thème de la personne qui lit.

Contraste du texte

La dernière colonne indique si le texte blanc ou le noir se lit mieux sur chaque couleur, avec le rapport de contraste de la formule WCAG 2. Le WCAG demande au moins 4,5 pour 1 pour un texte normal et 3 pour 1 pour un grand texte. Le texte blanc sur yellow ne donne que 1,07 pour 1, alors que le noir atteint 19,56 pour 1.

Vérifier le contraste de n’importe quelle paire de couleurs

Sources

Vérifiées le 5 novembre 2026 :

• W3C, CSS Color Module Level 4: named colors
• MDN : le type de donnée named-color
• W3C, WCAG 2.1 : définition du rapport de contraste