<color>

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é
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())

La liste des valeurs acceptées pour les couleurs s'est étendue au fur et à mesure de l'évolution de la spécification. À l'heure actuelle, toutes les couleurs utilisables sont décrites par CSS3.

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.

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.

Note : 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.

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.

Valeurs

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.

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 :
- 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`
		`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`
	`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 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.

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 la même que celle de cette ligne :
  <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 la même que celle de cette ligne :
  <div style="background:currentcolor; height:1px"></div>
 Un peu de texte.
</div>

`rgb()`

Les couleurs peuvent être définies de deux façons via le modèle RGB (rouge-vert-bleu ou Red-Green-Blue en anglais) :

En notation hexadécimale :

#RRGGBB : le signe « # » suivi par six caractères hexadécimaux (0-9, A-F), les deux premiers déterminent la composante rouge, les deux suivants la composante verte et les deux derniers la composante bleue.
#RGB : le signe « # » suivi par trois caractères hexadécimaux (0-9, A-F), le premier chiffre représente la composante rouge, le deuxième la composante verte et le troisième la composante bleue.

Une couleur qui pourra être exprimée avec cette deuxième forme pourra également être exprimée avec la première (ainsi #f03 et #ff0033 représentent la même couleur).

En notation fonctionnelle rgb(R,G,B)

"rgb", suivi de trois valeurs de type <integer> ou <percentage>.
L'entier 255 correspond à 100% et à F ou FF en hexadécimal.

/* 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.2) /* Erreur : on ne peut pas utiliser de nombres décimaux. */ 
 rgb(100%,0%,20%)
 rgb(100%, 0%, 20%)
 rgb(100%, 0, 20%) /* Erreur : on ne peut pas mélanger les entiers et les pourcentages */

`hsl()`

Les couleurs peuvent aussi être définies selon le modèle HSL (pour Hue-Saturation-Lightness qui signifie teinte-saturation-luminosité). 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 luminosité).

La teinte (hue) est représentée comme un angle sur le cercle des couleurs. L'angle est exprimé comme un nombre (type <number>) sans unité. 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 saturation (saturation) et la luminosité (lightness) 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 luminosité, 100% correspondra à du blanc et 0% à du noir. 50% agira comme une luminosité « normale ».

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 */

`rgba()`

Les couleurs peuvent être définies selon le modèles rouge-vert-bleu-alpha (RGBa) de deux façons :

En notation hexadécimale : #RGBA

#RRGGBBAA : 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 déterminent la composante alpha.
#RGBA : 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 la composante alpha.

Une couleur qui pourra être exprimée avec cette deuxième forme pourra également être exprimée avec la première (ainsi #f03f et #ff0033ff représentent la même couleur).

En notation fonctionnelle : rgba()

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.

#f030                /* 0% opaque red */  
#F03F                /* full opaque red */  
#ff003300            /* 0% opaque red */  
#FF003388            /* 50% opaque red */  
rgba(255,0,0,0.1)    /* 10% opaque red */  
rgba(255,0,0,0.4)    /* 40% opaque red */  
rgba(255,0,0,0.7)    /* 70% opaque red */  
rgba(255,0,0,  1)    /* full opaque red */

`hsla()`

Les couleurs peuvent être définies selon le modèle HSLa (pour Hue-Saturation-Lightness-alpha) grâce à la notation fonctionnelle hsla(). HSLa étend le modèle HSL afin d'ajouter un canal alpha permettant de régler l'opacité d'une couleur (0 : la couleur sera transparente et 1 : la couleur sera complètement opaque) :

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 */

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-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.

Spécifications

Spécification	État	Commentaires
CSS Color Module Level 4 La définition de '<color>' dans cette spécification.	Brouillon de l'éditeur	Ajout de la couleur `rebeccapurple`, de la notation hexadécimale sur quatre chiffres (`#RGBA`) et sur huit chiffres (`#RRGGBBAA`).
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.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Mots-clés	1.0	1.0 (1.0)	3.0 ^[1]	3.5	1.0 (85)
`#RRGGBB`, `#RGB`	1.0	1.0 (1.0)	3.0	3.5	1.0 (85)
`rgb()`	1.0	1.0 (1.0)	4.0	3.5	1.0 (85)
`hsl()`	1.0	1.0 (1.5)	9.0	9.5	3.1 (525)
`rgba()`, `hsla()`	1.0	3.0 (1.9)	9.0	10.0	3.1 (525)
`currentColor`	1.0	1.5 (1.8)	9.0	9.5	4.0 (528)
`transparent`	1.0	3.0 (1.9)	9.0 ^[2]	10.0	3.1 (525)
`rebeccapurple`	38.0	33 (33)	11	25.0	7.1
`#RRGGBBAA`, `#RGBA`	52.0	49 (49)	?	Pas de support	Pas de support

Fonctionnalité	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Support simple	(Oui)	(Oui)	(Oui)	(Oui)	(Oui)
`rgba()`, `hsla()`	(Oui)	(Oui)	(Oui)	(Oui)	(Oui)
`rebeccapurple`	(Oui)	33.0 (33)	?	?	8
`#RRGGBBAA`, `#RGBA`	52.0	49.0 (49)	Pas de support	Pas de support	?

[1] Les couleurs 'e'-grey (grey, darkgrey, darkslategrey, dimgrey, lightgrey, lightslategrey) ne sont prises en charge qu'à partir de IE 8.0. IE 3 à IE 7 prennent uniquement en charge les variantes « gray » (avec un a) : gray, darkgray, darkslategray, dimgray, lightgray, lightslategray.

[2] IE 7-8 prend en charge le mot-clé transparent uniquement pour les propriétés background et border. color: transparent; est affiché en noir. IE6 affiche également les bordures transparentes en noir.

[3] Cette fonctionnalité est prise en charge par Chrome Canary depuis la version 52.0.

<color>

Interpolation

Valeurs

Les mots-clés

Le mot-clé transparent

Le mot-clé currentColor