Les couleurs en CSS

Généralités.

Les couleurs CSS sont les mêmes que celles de HTML mais la syntaxe pour désigner une couleur est plus diversifiée : CSS reconnaît en effet les codes hexadécimaux, la décomposition RGB, la décomposition HSL et surtout les couleurs nommées.

Espace de couleurs (ou espace colorimétrique).

CSS utilise par défaut l'espace sRGB qui est le plus facile à restituer, même sur du matériel ancien. Il est cependant possible de choisir un autre espace de couleurs avec la directive @color-profile.
Reportez vous aux pages suivantes pour en savoir plus sur les espaces colorimétriques :

Un tutoriel sur les espaces de couleurs.
La directive @color-profile.
La fonction color().

Codification des couleurs.

Notation hexadécimale.

Dans le système RGB les couleurs sont définies par trois paramètres qui sont la quantité de rouge, de vert, et de bleu. Un quatrième paramètre peut être ajouté si on souhaite spécifier une opacité partielle de la couleur. Chacune de ces valeurs peut être traduite par un nombre en hexadécimal compris entre 00 et ff, autrement dit entre 0 et 255 en décimal classique.

#rrggbb

Le code hexadécimal de la couleur est ici écrit sur 6 digits, précédé d'un dièse ( # ). Les deux premiers digits (rr) représentent la valeur de rouge,* les deux suivants le vert (gg) et les deux derniers le bleu (bb).
Ces trois valeurs peuvent évoluer de 00 à ff. Cette notation hexadécimale est parfaitement reconnue par tous les navigateurs. Malheureusement, les codes ne sont pas très faciles à lire. Pour vous faciliter la tâche, vous pouvez vous reporter au nuancier ci-dessous, ou à notre outil synthétiseur de couleurs.
#rgb

Le code hexadécimal de la couleur peut être écrit sur 3 digits seulement, toujours précédé d'un dièse ( # ). Cette notation est une version simplifiée de la précédente, qui offre cependant moins de nuances de couleurs puisqu'on attribue un seul digit à chacune des couleurs.
#f00 est équivalent à #ff0000.
#0a0 est équivalent à #00aa00.
#rrggbbαα

Le code hexadécimal de la couleur est écrit sur 8 digits. Les deux derniers digits (αα) traduisent l'opacité de la couleur, 00 correspondant à une couleur totalement transparente (donc invisible) et ff à une couleur totalement opaque.
#ff0000ff est du rouge totalement opaque (non transparent).
#0000ff80 est du bleu semi-transparent.
#rgbα

Variante de la notation précédente mais en n'affectant qu'un seul digit à chacune des composantes.
0f0f est un vert totalement opaque.
00f8 est un bleu semi-transparent.

Couleurs nommées.

De très nombreuses couleurs (environ 140) ont reçu un nom, qui est maintenant reconnu par tous les navigateurs. Utiliser ces noms améliore la lisibilité des codes. En effet lavender est plus parlant que #e6e6fa.

currentcolor

currentcolor désigne la couleur courante, celle du texte et es accessoires de décoration comme les bordures, les traits de soulignement, etc.
Cette valeur peut être utile pour définir la couleur d'autre chose que le texte (par exemple une bordure) lorsque cette dernière a été modifiée au préalable et que l'on souhaite revenir à la même couleur que le texte.
transparent

La couleur totalement transparente, donc invisible. transparent est equivalent à #0000, autrement dit à du noir totalement transparent.
lightblue

Le nom d'une couleur. Il y a 132 noms de couleurs normalisés par le W3C (voir le nuancier ci-dessous). Le nom ne doit pas être entre guillemets, ni entre apostrophes ; il n'est pas sensible à la casse. Ces noms sont maintenant reconnus par tous les navigateurs.

Fonctions de couleur.

CSS reconnaît de très nombreuses fonctions permettant de spécifier une couleur dans un système colorimétrique donnée.

rgb(r,g,b) rgba(r,g,b,a) hsl(h,s,l) hsla(h,s,l,a) hwb(h,w,b) hwba(h,w,b,a) lab(l,a,b) lch(l,c,h) oklab(l,a,b) oklch(l,c,h) color() ⚠

Toutes ces fonctions définissent une couleur à partir de 3 composantes, et éventuellement, d'un quatrième qui est l'opacité, mais chacune dans un référentiel différent. N'hésitez pas à cliquer sur les liens pour avoir plus de précisions sur la syntaxe de ces fonctions.
- rgb() et rgba() utilisent le référentiel bien connu en informatique : rouge, vert, bleu. Les trois paramètres correspondent aux dosages des couleurs de base rouge, vert et bleu.
- hsl() et hsla() permettent de spécifier une couleur dans le référentiel HSL : teinte (Hue), Luminosité, Saturation.
- hwb() et hwba(), encore peu connues, construisent une couleur à partir d'une teinte, et en ajoutant une dose de blanc (w) et de noir (b).
- lab(), lch(), oklab() et oklch() travaillent dans les systèmes L*a*b* et L*C*H* .
- color() permet de définir une couleur dans un espace de couleurs différent du sRGB. Pour davantage de précisions, reportez-vous au tutoriel sur les espaces de couleurs.
...from... ⚠

La plupart des fonctions citées ci-dessus acceptent de calculer une couleur par rapport à une couleur de référence. Tout au moins, cette possibilité est prévue dans la spécification, il n'en est pas toujours de même sur les navigateurs actuels.

Par exemple, la syntaxe ci-dessous demande une couleur identique à mediumBlue mais avec 10% de luminosité en plus.

hsl(from mediumBlue h s calc(l * 1.1))

Nuancier : toutes les couleurs nommées.

Ces noms de couleur sont maintenant standardisés : tous les navigateurs devraient les reconnaître.

Trier les couleurs par :

Remarques et anecdotes.

La couleur rebeccaPurple a été nommée ainsi en hommage à la fille de Eric Meyer, décédée à 6 ans d'une tumeur au cerveau. Eric Meyer, peu connu du grand public, est un consultant américain qui a beaucoup fait pour la mise en place de normes sur Internet, et particulièrement pour le CSS.
Remarque : plusieurs appellations existent parfois pour une même couleur :

Fuchsia / Magenta

Gray / Grey
Et tous les dérivés

Aqua / Cyan
Le nom de couleur transparent correspond au code hexadécimal 00000000, autrement dit il s'agit d'un noir transparent. Pourquoi du noir ? Cela n'a que peu d'importance car, dans le cas d'une couleur totalement transparente, les 6 premiers digits du code n'ont pas d'effet.

Noms obsolètes ou mal reconnus. ✗

#D19275

Feldspar

#8470FF

LightSlateBlue

Couleurs système. ✗

Ces noms de couleurs étaient initialement disponibles pour faciliter l'intégration d'une page dans la charte du système d'exploitation. Cette fonctionnalité est maintenant déclarée obsolète : évitez de l'utiliser.

ActiveBorder

ActiveCaption

AppWorkspace

Background

ButtonFace

ButtonHighlight

ButtonShadow

ButtonText

CaptionText

GrayText

Highlight

HighlightText

InactiveBorder

InactiveCaption

InactiveCaptionText

InfoBackground

InfoText

MenuText

Scrollbar

ThreeDDarkShadow

ThreeDFace

ThreeDHighlight

ThreeDLightShadow

ThreedShadow

Window

WindowFrame

WindowText

Prise en charge par les navigateurs (compatibilité).

Colonne 1

Support de la notation RGB des couleurs, et des fonctions rgb() et rgba().

Colonne 2

Support de la notation HSL des couleurs, et des fonction hsl() et hsla().

Colonne 3

Support de la notation HWB et de la fonction hwb().

Colonne 4

Support des couleurs CIE et des fonctions lab() et lch().

Colonne 5

Support des fonctions oklab() et oklch().

Colonne 6

Support des couleurs relatives : possibilité de définir une couleur par rapport à une autre.

Couleurs
RGB

Couleurs
HSL

Couleurs
HWB

Couleurs
Lab ou Lch

OkLab
OkLch

Couleurs
relatives

Estimation de la prise en charge globale.

97%

95%

93%

89%

16%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Version testée : 129

Baidu Browser

Version testée : 13.52

Chrome

Version testée : 130

Chrome pour Androïd

Version testée : 129

Edge

Version testée : 130

Firefox

Version testée : 131

Firefox pour Androïd

Version testée : 130

Internet Explorer

Version testée : 11

KaiOS Browser

Version testée : 3

Opéra

Version testée : 114

Opéra Mobile

Version testée : 80

QQ Browser

Version testée : 14.9

Safari

Version testée : 18.0

Safari sur IOS

Version testée : 18.0

Samsung Internet

Version testée : 25

UC Browser pour Androïd

Version testée : 15.5

Opéra mini

Version testée : Toutes

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la gestion des couleurs en CSS.

CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

Dans cette première version du langage, les couleurs peuvent être définies :
- Par la fonction rgb() : valeurs de rouge, vert et bleu,
- Par un code hexadécimal (exemple : #804575),
- Ou par leur nom pour les 16 couleurs nommées : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, et yellow.

17 Novembre 1995
Document de travail.
12 Novembre 1996
Proposé à la recommandation.
17 Décembre 1996
Recommandation.
13 Septembre 2018
Ancienne spécification, déclarée obsolète.
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

La couleur nommée orange est ajoutée, portant à 17 le nombre de couleurs nommées.
Le mot-clé transparent est également introduit.
Les couleurs système sont ajoutées (exemple: ActiveBorder).

04 Novembre 1997
Document de travail.
24 Mars 1998
Proposé à la recommandation.
11 Mai 1998
Recommandation.
Module CSS - Couleurs - Niveau 3

Possibilité d'ajouter de la transparence aux couleurs, définition de la fonction rgba().
Prise en charge de la notation HSL, définition des fonctions hsl() et hsla().
Définition du mot-clé currentcolor.
Les couleurs système sont abandonnées.
Mais introduction des couleurs nommées de la nomenclature X11.

23 Juin 1999
Document de travail.
14 Mai 2003
Candidat à la recommandation.
28 Octobre 2010
Proposé à la recommandation.
07 Juin 2011
Recommandation.
Module CSS - Couleurs - Niveau 4

Possibilité de choisir un espace colorimétrique différent du sRGB et définition de la fonction color().
Prise en charge de la notation HWB (Hue, White, Black), et définition des fonctions hwb() et hwba().
Prise en charge des couleurs LCIE et définition des fonctions lab(), lch(), oklab() et oklch().

05 Juillet 2016
Document de travail.
05 Juillet 2022
Candidat à la recommandation.
Module CSS - Couleurs - Niveau 5

Possibilité de définir une couleur relativement à une autre.

03 Mars 2020
Document de travail.

Voir aussi, dans le même module de standardisation que `ref-colors`.

Les spécifications CSS éditées par le W3C sont organisées en modules. ref-colors fait partie du module CSS - Couleurs (CSS Color Module). Les définitions suivantes sont également décrites dans ce même module.