<color> - CSS : Feuilles de style en cascade

Le type de données CSS <color> permet de représenter des couleurs dans l'espace de couleurs sRGB. Une couleur pourra être décrite de trois façons :

grâce à un mot-clé (comme blue ou transparent par exemple)
en utilisant le système de coordonnées cubiques RGB (grâce à la notation #-hexadecimal ou aux notations fonctionnelles rgb() et rgba())
en utilisant le système de coordonnées cylindriques HSL (grâce aux notations fonctionnelles hsl() et hsla())

En plus de la couleur exprimée dans l'espace RGB, une valeur <color> contient également un canal alpha qui décrit la transparence de l'image et donc la façon dont cette image se compose avec son arrière-plan.

Note : Cet article décrit le type de donnée CSS <color> en détails. Si vous souhaitez en savoir plus sur l'utilisation des couleurs en HTML, n'hésitez pas à lire Appliquer des couleurs à des éléments HTML grâce à CSS.

Syntaxe

Bien que les valeurs des couleurs CSS soient définies précisément, elles pourront s'afficher différemment sur différents appareils. La plupart des appareils ne sont pas calibrés et certains navigateurs ne prennent pas en charge le profil de couleurs de l'appareil. Sans ces éléments, le rendu des couleurs peut varier.

Il existe plusieurs méthodes pour décrire une valeur <color>.

Les mots-clés

Les mots-clés sont des identifiants insensibles à la casse qui représentent une couleur donnée. Par exemple, le mot-clé red représentera la couleur rouge, blue le bleu, brown le marron, etc. La liste des valeurs autorisées a fortement évolué au cours des différentes versions de la spécification :

La spécification CSS de niveau 1 n'acceptait que 16 couleurs basiques, construites à partir des couleurs VGA disponibles sur les cartes graphiques.
La spécification CSS de niveau 2 a ajouté le mot-clé orange.
Depuis le début des couleurs CSS, les navigateurs ont pris en charge d'autres couleurs, notamment les couleurs X11 car certains des premiers navigateurs étaient des applications X11. SVG 1.0 a été le premier standard qui a défini formellement ces mots-clés et la spécification CSS de niveau 3 sur les couleurs a aussi défini ces couleurs formellement. Ces différentes couleurs sont parfois intitulées couleurs étendues (extended colors), couleurs X11 ou couleurs SVG.
La spécification CSS de niveau a ajouté la couleur rebeccapurple en l'honneur d'Eric Meyer.

Voici quelques inconvénients liés aux mots-clés :

En dehors des 16 couleurs de base présentes également en HTML, les autres valeurs ne peuvent pas être utilisées en HTML. HTML convertira ces valeurs inconnues avec un algorithme spécifique qui donnera d'autres couleurs à l'arrivée. Ces mots-clés ne doivent être utilisés qu'avec SVG ou CSS.
Si un mot-clé inconnu est utilisé, la propriété sera considérée comme invalide et sera donc ignorée. Le comportement est donc différent de HTML (qui calculera une couleur).
Aucun mot-clé ne définit de couleurs transparentes, toutes les couleurs indiquées par des mots-clés sont unies et opaques.
Certains mots-clés désignent la même couleur :
- aqua / cyan
- fuchsia / magenta
- darkgray / darkgrey
- darkslategray / darkslategrey
- dimgray / dimgrey
- lightgray / lightgrey
- lightslategray / lightslategrey
- gray / grey
- slategray / slategrey
Bien que les noms des mots-clés soient calqués sur les couleurs X11, les couleurs correspondantes peuvent être différentes en CSS et avec X11 car pour ce dernier les couleurs étaient conçues pour le matériel du constructeur.

Spécification	Couleur	Mot-clé	Valeurs exprimées en hexadécimal RGB
CSS Level 1		`black`	`#000000`
		`silver`	`#c0c0c0`
		`gray`	`#808080`
		`white`	`#ffffff`
		`maroon`	`#800000`
		`red`	`#ff0000`
		`purple`	`#800080`
		`fuchsia`	`#ff00ff`
		`green`	`#008000`
		`lime`	`#00ff00`
		`olive`	`#808000`
		`yellow`	`#ffff00`
		`navy`	`#000080`
		`blue`	`#0000ff`
		`teal`	`#008080`
		`aqua`	`#00ffff`
CSS Level 2 (Revision 1)		`orange`	`#ffa500`
CSS Color Module Level 3		`aliceblue`	`#f0f8ff`
		`antiquewhite`	`#faebd7`
		`aquamarine`	`#7fffd4`
		`azure`	`#f0ffff`
		`beige`	`#f5f5dc`
		`bisque`	`#ffe4c4`
		`blanchedalmond`	`#ffebcd`
		`blueviolet`	`#8a2be2`
		`brown`	`#a52a2a`
		`burlywood`	`#deb887`
		`cadetblue`	`#5f9ea0`
		`chartreuse`	`#7fff00`
		`chocolate`	`#d2691e`
		`coral`	`#ff7f50`
		`cornflowerblue`	`#6495ed`
		`cornsilk`	`#fff8dc`
		`crimson`	`#dc143c`
		`cyan` (synonyme de `aqua`)	`#00ffff`
		`darkblue`	`#00008b`
		`darkcyan`	`#008b8b`
		`darkgoldenrod`	`#b8860b`
		`darkgray`	`#a9a9a9`
		`darkgreen`	`#006400`
		`darkgrey`	`#a9a9a9`
		`darkkhaki`	`#bdb76b`
		`darkmagenta`	`#8b008b`
		`darkolivegreen`	`#556b2f`
		`darkorange`	`#ff8c00`
		`darkorchid`	`#9932cc`
		`darkred`	`#8b0000`
		`darksalmon`	`#e9967a`
		`darkseagreen`	`#8fbc8f`
		`darkslateblue`	`#483d8b`
		`darkslategray`	`#2f4f4f`
		`darkslategrey`	`#2f4f4f`
		`darkturquoise`	`#00ced1`
		`darkviolet`	`#9400d3`
		`deeppink`	`#ff1493`
		`deepskyblue`	`#00bfff`
		`dimgray`	`#696969`
		`dimgrey`	`#696969`
		`dodgerblue`	`#1e90ff`
		`firebrick`	`#b22222`
		`floralwhite`	`#fffaf0`
		`forestgreen`	`#228b22`
		`gainsboro`	`#dcdcdc`
		`ghostwhite`	`#f8f8ff`
		`gold`	`#ffd700`
		`goldenrod`	`#daa520`
		`greenyellow`	`#adff2f`
		`grey`	`#808080`
		`honeydew`	`#f0fff0`
		`hotpink`	`#ff69b4`
		`indianred`	`#cd5c5c`
		`indigo`	`#4b0082`
		`ivory`	`#fffff0`
		`khaki`	`#f0e68c`
		`lavender`	`#e6e6fa`
		`lavenderblush`	`#fff0f5`
		`lawngreen`	`#7cfc00`
		`lemonchiffon`	`#fffacd`
		`lightblue`	`#add8e6`
		`lightcoral`	`#f08080`
		`lightcyan`	`#e0ffff`
	`lightgoldenrodyellow`	`#fafad2`
	`lightgray`	`#d3d3d3`
	`lightgreen`	`#90ee90`
	`lightgrey`	`#d3d3d3`
	`lightpink`	`#ffb6c1`
	`lightsalmon`	`#ffa07a`
	`lightseagreen`	`#20b2aa`
	`lightskyblue`	`#87cefa`
	`lightslategray`	`#778899`
	`lightslategrey`	`#778899`
	`lightsteelblue`	`#b0c4de`
	`lightyellow`	`#ffffe0`
	`limegreen`	`#32cd32`
	`linen`	`#faf0e6`
	`magenta` (synonyme de `fuchsia`)	`#ff00ff`
	`mediumaquamarine`	`#66cdaa`
	`mediumblue`	`#0000cd`
	`mediumorchid`	`#ba55d3`
	`mediumpurple`	`#9370db`
	`mediumseagreen`	`#3cb371`
	`mediumslateblue`	`#7b68ee`
	`mediumspringgreen`	`#00fa9a`
	`mediumturquoise`	`#48d1cc`
	`mediumvioletred`	`#c71585`
	`midnightblue`	`#191970`
	`mintcream`	`#f5fffa`
	`mistyrose`	`#ffe4e1`
	`moccasin`	`#ffe4b5`
	`navajowhite`	`#ffdead`
	`oldlace`	`#fdf5e6`
	`olivedrab`	`#6b8e23`
	`orangered`	`#ff4500`
	`orchid`	`#da70d6`
	`palegoldenrod`	`#eee8aa`
	`palegreen`	`#98fb98`
	`paleturquoise`	`#afeeee`
	`palevioletred`	`#db7093`
	`papayawhip`	`#ffefd5`
	`peachpuff`	`#ffdab9`
	`peru`	`#cd853f`
	`pink`	`#ffc0cb`
	`plum`	`#dda0dd`
	`powderblue`	`#b0e0e6`
	`rosybrown`	`#bc8f8f`
	`royalblue`	`#4169e1`
	`saddlebrown`	`#8b4513`
	`salmon`	`#fa8072`
	`sandybrown`	`#f4a460`
	`seagreen`	`#2e8b57`
	`seashell`	`#fff5ee`
	`sienna`	`#a0522d`
	`skyblue`	`#87ceeb`
	`slateblue`	`#6a5acd`
	`slategray`	`#708090`
	`slategrey`	`#708090`
	`snow`	`#fffafa`
	`springgreen`	`#00ff7f`
	`steelblue`	`#4682b4`
	`tan`	`#d2b48c`
	`thistle`	`#d8bfd8`
	`tomato`	`#ff6347`
	`turquoise`	`#40e0d0`
	`violet`	`#ee82ee`
	`wheat`	`#f5deb3`
	`whitesmoke`	`#f5f5f5`
	`yellowgreen`	`#9acd32`
CSS Color Module Level 4		`rebeccapurple`	`#663399`

La couleur rebeccapurple est équivalente à la couleur #639. Pour mieux comprendre pourquoi elle a été ajoutée, vous pouvez lire ce billet Codepen par Trezy « Honorer un grand homme » (en anglais).

Le mot-clé `transparent`

transparent est un mot-clé qui représente une couleur totalement transparente (autrement dit, la couleur qui sera vue sera la couleur située en arrière-plan). D'un point de vue technique, il s'agit d'un noir pur avec un canal alpha minimal : rgba(0,0,0,0).

Note : Attention lorsqu'on utilise ce mot-clé pour un dégradé (cf.gradient, la spécification W3C indique que transparent devrait être calculé dans l'espace de couleurs avec pré-multiplication des alpha. Cependant, les anciens navigateurs peuvent traiter ce noir avec une valeur alpha de 0.

Note historique : Le mot-clé transparent n'était pas une valeur de type <color> pour la spécification CSS de niveau 2 (première révision). C'était un mot-clé qui pouvait être utilisé comme valeur pour les propriétés background et border. Il a été ajouté afin de pouvoir surcharger l'héritage de couleurs opaques. Avec l'ajout de la gestion de l'opacité via les canaux alpha, transparent a été redéfini comme une couleur avec la spécification CSS de niveau 3 sur les couleurs, ce qui permet de l'utiliser à n'importe quel endroit où une valeur <color> est nécessaire (la propriété color par exemple).

Le mot-clé `currentColor`

Le mot-clé currentColor représente la valeur calculée de la propriété color pour l'élément. Il permet aux propriétés de couleur d'hériter de la valeur de l'élément parent même si, par défaut, celles-ci n'utilisent pas l'héritage.

Il peut également être utilisé sur des propriétés qui héritent de la valeur calculée de la propriété color de l'élément. Cela sera alors équivalent au mot-clé inherit.

Si currentColor est utilisée comme valeur pour la propriété color, sa valeur est déterminée à partir de la valeur héritée pour la propriété color.

Exemples

La couleur de la ligne prend la couleur héritée depuis son élément parent.

Exemple live n°1

<div style="color:darkred">
 La couleur de ce texte est bleu.
  <div style="background:currentColor; height:1px"></div>
 Un peu de texte.
</div>

Exemple live n°2

<div style="color:blue; border-bottom: 1px dashed currentColor;">
 La couleur de ce texte est bleu :
  <div style="background:currentColor; height:1px"></div>
 Un peu de texte.
</div>

Les couleurs RGB

Les couleurs peuvent être définies selon le modèles rouge-vert-bleu-alpha (RGB avec une composante alpha, optionnelle, pour gérer la transparence.

Syntaxe

Les couleurs RGB peuvent être exprimées avec une notation hexadécimale (préfixée avec #) ou avec des notations fonctionnelles (rgb() ou rgba()).

Note : Dans la spécification du module CSS Color de niveau 4, rgba() a été définie comme une fonction historique dont la grammaire et le comportement est le même que rgb(). C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.

Notation hexadécimale : #RRGGBB[AA]: Le signe « # » suivi par huit caractères hexadécimaux (0-9, A-F), les deux premiers déterminent la composante rouge, les deux suivants la composante verte puis la composante bleue et enfin les deux derniers, optionnels, déterminent la composante alpha.
Notation hexadécimale : #RGB[A]: le signe « # » suivi par quatre caractères hexadécimaux (0-9, A-F), le premier chiffre représente la composante rouge, le deuxième la composante verte, le troisième la composante bleue et le quatrième, optionnel, la composante alpha.
Notation fonctionnelle avec des virgules : rgb(R, G, B[, A]) ou rgba(R, G, B, A): Cette fonction permet d'ajouter une composante d'opacité (par rapport à la fonction rgb()). Le quatrième argument définira la force de l'opacité : 1 pour une opacité complète et 0 pour une transparence totale. Les arguments peuvent être des nombres (<number>) ou des pourcentages (<percentage>) (ex. rgb(1e2, .5e1, .5e0, +.25e2%)).
Notation fonctionnelle : rgb(R G B[ / A]) ou rgba(R G B / A): Cette forme fonctionne de façon analogue à la forme précédente depuis le module de spécification CSS Colors Level 4.

Exemples

Les différentes variantes pour la syntaxe RGB

/* Ces exemples définissent tous la même couleur */
#f03
#F03
#ff0033
#FF0033
rgb(255,0,51)
rgb(255, 0, 51)
rgb(255, 0, 51.0)
rgb(100%,0%,20%)
rgb(100%, 0%, 20%)
rgb(100%, 0, 20%) /* Erreur : on ne peut pas mélanger les nombres et les pourcentages */

RGBa

/* Notation hexadécimale */
#f030               /*   0% opacité - rouge */
#F03F               /* 100% opacité - rouge */
#ff003300           /*   0% opacité - rouge */
#FF003388           /*  50% opacité - rouge */

/* Notation fonctionnelle */
rgba(255,0,0,0.1)   /*  10% opacité - rouge */
rgba(255,0,0,0.4)   /*  40% opacité - rouge */
rgba(255,0,0,0.7)   /*  70% opacité - rouge */
rgba(255,0,0,  1)   /* 100% opacité - rouge */

/* Notation fonctionnelle avec des nombres décimaux */
rgba(255, 0, 153.6, 1)
rgba(1e2, .5e1, .5e0, +.25e2%)

/* Notation avec un espace */
rgba(255 0 0 / 0.4) /* 40% opacité - rouge */
rgba(255 0 0 / 40%) /* 40% opacité - rouge */

Les couleurs HSL

Les couleurs peuvent également être définies selon le modèle HSL (pour Hue-Saturation-Lightness qui signifie teinte-saturation-clarté).

HSL est considéré comme plus intuitif que RGB car on peut ajuster les couleurs au fur et à mesure ou créer des palettes de couleurs plus simplement (par exemple en conservant la même teinte et en faisant varier la saturation et/ou la clarté).

Syntaxe

Pour HSL, les couleurs peuvent être exprimées via les notations fonctionnelles hsl() ou hsla().

Note : Dans la spécification du module CSS Color de niveau 4, hsla() a été définie comme une fonction historique dont la grammaire et le comportement est le même que hsl(). C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.

Notation fonctionnelle : hsl(H, S, L,[, A]) ou hsla(H, S, L, A)

La valeur H correspond à la teinte (hue) et est représentée comme un angle <angle> sur le cercle des couleurs. Lorsque la valeur est écrite sans unité, elle est considérée comme une valeur exprimée en degré. Par définition, le rouge correspond à 0 et 360 et les autres couleurs évoluent sur le cercle. Vert correspond à 120 et bleu à 240. La valeur se comporte comme un angle et « tournera en boucle » avec une même mesure de couleur qui peut avoir différentes valeurs (par exemple -120 sera équivalent à 240 et 480 sera équivalent à 120).

La valeur S correspond à la saturation (saturation) et la valeur L correspond à la clarté (lightness), ces deux valeurs sont représentées par des pourcentages. Pour la saturation, avec 100% l'image sera complètement saturée et avec 0%, l'image sera en nuances de gris. Pour la clarté, 100% correspondra à du blanc et 0% à du noir. 50% agira comme une clarté « normale ».

La valeur A (canal alpha) peut être un nombre (type <number> entre 0 et 1 ou un pourcentage (type <percentage> (la valeur 100% correspond alors à la valeur numérique 1 : opacité complète).

Notation fonctionnelle : hsl(H S L[ / A]) ou hsla(H S L / A)

Le module CSS Colors Level 4 ajoute la prise en charge de la notation fonctionnelle avec les espaces comme séparateur.

Exemples

HSL

hsl(0,  100%,50%)   /* red */
hsl(30, 100%,50%)
hsl(60, 100%,50%)
hsl(90, 100%,50%)
hsl(120,100%,50%)   /* green */
hsl(150,100%,50%)
hsl(180,100%,50%)
hsl(210,100%,50%)
hsl(240,100%,50%)   /* blue */
hsl(270,100%,50%)
hsl(300,100%,50%)
hsl(330,100%,50%)
hsl(360,100%,50%)   /* red */

hsl(120,100%,25%)   /* dark green */
hsl(120,100%,50%)   /* green */
hsl(120,100%,75%)   /* light green */

hsl(120,100%,50%)   /* green */
hsl(120, 67%,50%)
hsl(120, 33%,50%)
hsl(120,  0%,50%)

hsl(120, 60%,70%)   /* pastel green */

/* syntaxe avec les espaces */
hsl(120 60% 70%) /* pastel green */

/* Valeur d'angle */
/* on peut également utiliser les unités */
/* rad, grad, turn */
hsl(120deg 60% 70%) /* pastel green */

/* Valeur alpha optionnelle */
hsl(240,100%,50%,0.05)   /* 5% opaque blue */
hsl(240,100%,50%,5%)     /* 5% opaque blue with percentage value for alpha */
hsl(240 100% 50% / 0.05) /* 5% opaque blue */
hsl(240 100% 50% / 5%)   /* 5% opaque blue with percentage value for alpha */

HSLa

hsla(240,100%,50%,0.05)  /* 5% opaque blue */
hsla(240,100%,50%, 0.4)  /* 40% opaque blue */
hsla(240,100%,50%, 0.7)  /* 70% opaque blue */
hsla(240,100%,50%,   1)  /* full opaque blue */

/* syntaxe avec un espace */
hsla(240 100% 50% / 0.05)/* 5% opaque blue */

/* valeur en pourcentage pour l'alpha */
hsla(240 100% 50% / 5%)/* 5% opaque blue */

/* valeur d'angle pour la teinte */
/* les unités rad, grad et turn*/
/* sont également acceptées */
hsla(240deg 100% 50% / 5%)/* 5% opaque blue */
hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */

Couleurs système

Tous les systèmes ne prennent pas en charges toutes les couleurs système. Cet usage est déprécié pour les pages web publiques (cf. ci-après le tableau des spécifications).

ActiveBorder: La bordure de la fenêtre active.
ActiveCaption: La légende de la fenêtre active. Devrait être utilisé avec CaptionText comme couleur de premier-plan.
AppWorkspace: La couleur d'arrière-plan d'une interface avec plusieurs documents.
Background: L'arrière-plan du bureau.
ButtonFace: La couleur d'arrière-plan visible (qui fait face à l'utilisateur) pour les éléments qui sont en 3D avec une bordure qui les entoure. Devrait être utilisée avec ButtonText comme couleur de premier-plan.
ButtonHighlight: La couleur de la bordure faisant face à la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour.
ButtonShadow: La couleur de la bordure éloignée de la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour..
ButtonText: La couleur du texte sur les bouttons. Devrait être utilisée avec ButtonFace ou ThreeDFace comme couleur d'arrière-plan.
CaptionText: La couleur du texte dans les légendes, la couleur des boîtes redimensionnables et de la flèche de l'ascenseur. Devrait être utilisée avec ActiveCaption comme couleur d'arrière-plan.
GrayText: Texte (désactivé) en gris.
Highlight: La couleur des éléments sélectionnés dans un contrôle. Devrait être utilisé avec HighlightText comme couleur de premier-plan.
HighlightText: La couleur du texte des éléments sélectionnés dans un contrôle. Devrait être utilisée avec Highlight comme couleur d'arrière-plan.
InactiveBorder: La couleur de la bordure d'une fenêtre inactive.
InactiveCaption: La couleur de la légende de fenêtre inactive. Devrait être utilisée avec InactiveCaptionText comme couleur de premier-plan.
InactiveCaptionText: La couleur du texte pour une légende inactive. Devrait être utilisée avec InactiveCaption comme couleur d'arrière-plan.
InfoBackground: La couleur d'arrière-plan pour les bulles d'informations. Devrait être utilisée avec InfoText comme couleur de premier-plan.
InfoText: La couleur du texte pour les bulles d'informations. Devrait être utilisée avec InfoBackground comme couleur d'arrière-plan.
Menu: La couleur d'arrière-plan du menu. Devrait être utilisée avec MenuText ou -moz-MenuBarText comme couleur de premier-plan.
MenuText: La couleur du texte dans les menus. Devrait être utilisée avec Menu comme couleur d'arrière-plan.
Scrollbar: La couleur d'arrière-plan de la barre de défilement (ascenseur).
ThreeDDarkShadow: La couleur de la bordure la plus sombre (généralement la bordure extérieure) éloignée de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
ThreeDFace: La couleur d'arrière-plan pour les éléments qui apparaissent en 3D grâce à des bordures concentriques. Devrait être utilisée avec ButtonText comme couleur de premier-plan.
ThreeDHighlight: La couleur de la bordure la plus claire (généralement la bordure extérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
ThreeDLightShadow: La couleur de la bordure la plus sombre (généralement la bordure intérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
ThreeDShadow: La couleur de la bordure la plus claire (généralement la bordure intérieure) lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
Window: La couleur d'arrière-plan de la fenêtre. Devrait être utilisée avec la couleur WindowText en premier plan.
WindowFrame: La couleur du cadre de la fenêtre.
WindowText: La couleur du texte dans les fenêtres. Devrait être utilisée avec la couleur Window en arrière-plan.

Ajouts propres à Mozilla pour les couleurs système

-moz-ButtonDefault: La couleur de la bordure autour des boutons représentant l'action par défaut d'une boîte de dialogue.
-moz-ButtonHoverFace: La couleur d'arrière-plan d'un bouton survolé par le pointeur (qui serait ThreeDFace ou ButtonFace lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec -moz-ButtonHoverText comme couleur de premier-plan.
-moz-ButtonHoverText: La couleur du texte d'un bouton survolé par le pointeur (qui serait ButtonText lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec-moz-ButtonHoverFace comme couleur d'arrière-plan.
-moz-CellHighlight: La couleur d'arrière-plan pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec -moz-CellHighlightText comme couleur de premier-plan. Voir aussi -moz-html-CellHighlight.
-moz-CellHighlightText: La couleur du texte pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec -moz-CellHighlight comme couleur d'arrière-plan. Voir aussi -moz-html-CellHighlightText.
-moz-Combobox: La couleur d'arrière-plan pour les listes déroulantes. Devrait être utilisée avec -moz-ComboboxText comme couleurs de premier-plan. Pour les versions antérieures à 1.9.2, on utilisera -moz-Field à la place.
-moz-ComboboxText: La couleur du texte pour les listes déroulantes. Devrait être utilisée avec -moz-Combobox comme couleur d'arrière-plan. Pour les versions antérieures à 1.9.2, on utilisera -moz-FieldText à la place.
-moz-Dialog: La couleur d'arrière-plan pour les boîtes de dialogue. Devrait être utilisée avec -moz-DialogText comme couleur de premier-plan.
-moz-DialogText: La couleur du texte pour les boîtes de dialogue. Devrait être utilisée avec -moz-Dialog comme couleur d'arrière-plan.
-moz-dragtargetzone
-moz-EvenTreeRow: La couleur d'arrière-plan pour les lignes numérotées paires d'un arbre. Devrait être utilisée avec-moz-FieldText comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera -moz-Field. Voir aussi -moz-OddTreeRow.
-moz-Field: La couleur d'arrière-plan pour les champs texte. Devrait être utilisée avec -moz-FieldText comme couleur de premier-plan.
-moz-FieldText: La couleur du texte pour les champs texte. Devrait être utilisée avec -moz-Field, -moz-EvenTreeRow, ou -moz-OddTreeRow comme couleur d'arrière-plan.
-moz-html-CellHighlight: La couleur d'arrière-plan pour les éléments sélectionnés dans un élément HTML <select>. Devrait être utilisée avec -moz-html-CellHighlightText comme couleur de premier-plan. Avant Gecko 1.9, on utilisera -moz-CellHighlight.
-moz-html-CellHighlightText: La couleur du texte pour les éléments sélectionnés dans un élément HTML <select>. Devrait être utilisée avec -moz-html-CellHighlight comme couleur d'arrière-plan. Avant Gecko 1.9, on utilisera -moz-CellHighlightText.
-moz-mac-accentdarkestshadow
-moz-mac-accentdarkshadow
-moz-mac-accentface
-moz-mac-accentlightesthighlight
-moz-mac-accentlightshadow
-moz-mac-accentregularhighlight
-moz-mac-accentregularshadow
-moz-mac-chrome-active
-moz-mac-chrome-inactive
-moz-mac-focusring
-moz-mac-menuselect
-moz-mac-menushadow
-moz-mac-menutextselect
-moz-MenuHover: La couleur d'arrière-plan pour les éléments de menu survolés. Généralement semblable à Highlight. Devrait être utilisée avec -moz-MenuHoverText ou -moz-MenuBarHoverText comme couleur de premier-plan.
-moz-MenuHoverText: La couleur du texte pour les éléments de menu survolés. Généralement similaire à HighlightText. Devrait être utilisée avec -moz-MenuHover comme couleur d'arrière-plan.
-moz-MenuBarText: La couleur du texte dans les barres de menu. Généralement similaire à MenuText. Devrait être utilisée avec Menu comme couleur d'arrière-plan.
-moz-MenuBarHoverText: La couleur du texte pour les éléments survolés dans les barres de menu, généralement similaire à -moz-MenuHoverText. Devrait être utilisée avec -moz-MenuHover comme couleur d'arrière-plan.
-moz-nativehyperlinktext: La couleur par défaut de la plate-forme pour les hyperliens.
-moz-OddTreeRow: La couleur d'arrière-plan pour les lignes numérotées impaires d'un arbre. Devrait être utilisée avec-moz-FieldText comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera -moz-Field. Voir aussi -moz-EvenTreeRow.
-moz-win-accentcolor: Utilisée pour accéder à la couleur d'accentuation de Windows 10 pour les menus, la barre de tâches, les barres de titre.
-moz-win-accentcolortext: Utilisée pour accéder à la couleur d'accentuation de Windows 10 uttilisée pour le texte des menus, de la barre de tâches et des barres de titre.
-moz-win-communicationstext: Devrait être utilisée comme couleur pour les textes des objets pour lesquels -moz-appearance: -moz-win-communications-toolbox;.
-moz-win-mediatext: Devrait être utilisée comme couleur pour les textes des objets pour lesquels -moz-appearance: -moz-win-media-toolbox.

Ajout de Mozilla pour les couleurs liées aux préférences

-moz-activehyperlinktext: La couleur choisie par l'utilisateur pour le texte des liens actifs. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
-moz-default-background-color: La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.
-moz-default-color: La couleur choisie par l'utilisateur pour la couleur du texte.
-moz-hyperlinktext: La couleur choisie par l'utilisateur pour le texte des liens non visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
-moz-visitedhyperlinktext: La couleur choisie par l'utilisateur pour le texte des liens visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.

Interpolation

Les valeurs de type <color> peuvent être interpolées afin de créer des animations ou des dégradés (type <gradient>). Dans ce cas, elles sont interpolées via chacune de leurs composantes rouge, verte, bleue et chacune de ces coordonnées est gérée comme un nombre réel flottant. L'interpolation des couleurs est appliquée dans l'espace de couleurs alpha sRGBA prémultiplié afin d'empêcher des tons de gris d'apparaître. Pour les animations, la vitesse de l'interpolation est définie selon la fonction de temporisation associée à l'animation.

Accessibilité

La recommandation du W3C : WCAG 2.0 conseille vivement aux auteurs de ne pas utiliser la couleur comme le seul moyen de transmettre une information, une action ou un résultat. Certains utilisateurs peuvent rencontrer des difficultés à distinguer les couleurs. Bien entendu, cette recommandation ne vise pas à interdire l'utilisation des couleurs, elle indique simplement que ce ne doit pas être le seul moyen de fournir une information (voir l'article sur Ies couleurs et le contraste pour plus d'informations).

Spécifications

Spécification	État	Commentaires
CSS Color Module Level 4 La définition de '<color>' dans cette spécification.	Version de travail	Ajout de la couleur `rebeccapurple`, de la notation hexadécimale sur quatre chiffres (`#RGBA`) et sur huit chiffres (`#RRGGBBAA`). `rgba()` et `hsla()` sont désormais synonymes de `rgb()` et `hsl()`, les paramètres des fonctions peuvent être séparés par des espaces plutôt que ds virgules, les valeurs de transparence (alpha) peuvent être exprimées en pourcentages et les valeurs de teinte avec un angle.
CSS Color Module Level 3 La définition de '<color>' dans cette spécification.	Recommendation	Les couleurs système sont désormais dépréciée. Les couleurs SVG sont ajoutées ainsi que les notations fonctionnelles `rgba()`, `hsl()`, `hsla()`.
CSS Level 2 (Revision 1) La définition de '<color>' dans cette spécification.	Recommendation	Ajout de la couleur `orange` et des couleurs système.
CSS Level 1 La définition de '<color>' dans cette spécification.	Recommendation	Définition initiale.

Compatibilité des navigateurs

BCD tables only load in the browser