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 :

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 Exemple « live » dans le navigateur
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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
colorChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 3Opera Support complet OuiSafari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet 1.0
Alpha color values (rgba(), hsla())Chrome Support complet 1Edge Support complet 12Firefox Support complet 3IE Support complet 9Opera Support complet 10Safari Support complet 3.1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 2Samsung Internet Android Support complet Oui
RGBA hexadecimal notation (#RRGGBBAA, #RGBA)Chrome Support complet 62
Support complet 62
Support complet 52
Désactivée
Désactivée From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Aucun support NonFirefox Support complet 49IE Aucun support NonOpera Support complet 49
Support complet 49
Support complet 39
Désactivée
Désactivée From version 39: this feature is behind the Enable experimental Web Platform features preference.
Safari Support complet 9.1WebView Android Support complet 62
Support complet 62
Support complet 52
Désactivée
Désactivée From version 52: this feature is behind the Enable experimental Web Platform features preference.
Chrome Android Support complet 62
Support complet 62
Support complet 52
Désactivée
Désactivée From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Support complet 49Opera Android Support complet 47
Support complet 47
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Support complet 9.1Samsung Internet Android ?
currentcolorChrome Support complet 1Edge Support complet 12Firefox Support complet 1.5IE Support complet 9Opera Support complet 9.5Safari Support complet 4WebView Android Support complet 37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android ? Safari iOS Support complet 3.2Samsung Internet Android ?
Allow floats in rgb() and rgba()Chrome Support complet 66Edge Aucun support NonFirefox Support complet 52IE Aucun support NonOpera Support complet 53Safari Support complet 12.1WebView Android Support complet 66Chrome Android Support complet 66Firefox Android Support complet 52Opera Android Support complet 47Safari iOS Support complet 12.2Samsung Internet Android ?
HSL color values (hsl())Chrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 9Opera Support complet 9.5Safari Support complet 3.1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 2Samsung Internet Android Support complet Oui
Keyword color valuesChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 3
Notes
Support complet 3
Notes
Notes Internet Explorer 8 and later support gray color keywords spelled with an e (grey, darkgrey, darkslategrey, dimgrey, lightgrey, and lightslategrey). Internet Explorer 3 to Internet Explorer 7 only support the keywords spelled with a (gray, darkgray, darkslategray, dimgray, lightgray, and lightslategray).
Opera Support complet 3.5Safari Support complet 1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet Oui
rebeccapurpleChrome Support complet 38Edge Support complet 12Firefox Support complet 33IE Support complet 11Opera Support complet 25Safari Support complet 9WebView Android Support complet 38Chrome Android Support complet 38Firefox Android Support complet 33Opera Android Support complet 25Safari iOS Support complet 8Samsung Internet Android Support complet 3.0
RGB functional notation (rgb())Chrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 3.5Safari Support complet 1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet Oui
RGB hexadecimal notation (#RRGGBB, #RGB)Chrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 3Opera Support complet 3.5Safari Support complet 1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet Oui
Space-separated functional color notationsChrome Support complet 65Edge Aucun support NonFirefox Support complet 52IE Aucun support NonOpera Support complet 52Safari Support complet 12.1WebView Android Support complet 65Chrome Android Support complet 65Firefox Android Support complet 52Opera Android Support complet 47Safari iOS Support complet 12.2Samsung Internet Android ?
transparentChrome Support complet 1Edge Support complet 12Firefox Support complet 3IE Support complet 9Opera Support complet 10Safari Support complet 3.1WebView Android Support complet 37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android ? Safari iOS Support complet 2Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : SphinxKnight,