Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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 :

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

Compatibilité des navigateurs

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.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Simplexible, fscholz, teoli, louuis, FredB, BenoitL
 Dernière mise à jour par : SphinxKnight,