valeur de couleur

Résumé

Le type de données CSS <couleur> indique une couleur dans l'espace couleur sRGB. Une couleur peut être décrite par un mot-clé, en utilisant le système de coordonnées cubiques RGB (via les notations #-hexadécimal ou les fonctions rgb() et rgba()) ou en utilisant le système de coordonnées cylindriques HSL (via les fonctions hsl() et hsla()).

Associée avec la couleur dans l'espace sRGB, une valeur <couleur> est aussi constituée d'une coordonnée dans le canal alpha, la valeur de transparence, indiquant comment une couleur doit se composer avec sa couleur d'arrière-plan.

Bien que les valeurs de couleurs CSS soient définies précisément, elles peuvent apparaître différemment selon l'appareil d'affichage. La plupart d'entre eux ne sont pas calibrés, et certains navigateurs ne gèrent pas les profils de couleur des appareils d'affichage. Sans ceux-ci, le rendu des couleurs peut grandement varier.

Note : la recommendation WCAG 2.0 du W3C conseille fortement les auteurs de ne pas utiliser la couleur comme seul moyen de communiquer une information, une action ou un résultat. Certains utilisateurs rencontrent des difficultés à distinguer les couleurs et les informations communiquées peuvent ne pas être saisies. Bien sûr, ceci n'empêche pas l'usage de la couleur, mais sont usage comme seul moyen de décrire une information.

Interpolation

Les valeurs du type de données CSS <couleur> peuvent être interpolées de manière à réaliser des animations ou pour créer des valeurs de type <dégradés>. Dans ce cas elles sont interpolées sur chacune des composante rouge, bleue et verte, considérées chacunes comme un nombre réel à virgule flottante. Notez que l'interpolation des couleurs a lieu dans l'espace couleur sRGBA pré-multiplié pour éviter l'apparition de teintes grises non désirées. Au cours des animations, la vitesse de l'interpolation est déterminée par la fonction de temporisation associée à l'animation.

Valeurs

De nombreuses manières de décrire une valeur de <couleur> existent.

Mots-clés

Les mots-clés représentant une couleurs sont des identifiants insensibles à la casse spécifiques à une couleur, p. ex. red, blue, brown, lightseagreen. Le nom décrit la couleur en langue anglaise, bien que ce soit quelque peu artificiel. La liste des valeurs acceptées a beaucoup varié au cours des différentes spécifications :

  • CSS Level 1 n'acceptait que 16 couleurs basiques, appelées les couleurs VGA puisqu'elles étaient tirées de l'ensemble des couleurs affichables par les cartes graphiques VGA.
  • CSS Level 2 a ajouté le mot-clé orange.
  • Depuis le début, les navigateurs acceptent d'autres couleurs, principalement la liste de couleurs nommées de X11 puisque certains des premiers navigateurs étaient des applications X11, mais avec quelques différences. SVG 1.0 a été le premier standard a définir de manière formelle ces mots-clés ; CSS Colors Level 3 définit aussi formellement ces mots-clés. Ont y fait souvent référence sous le terme de mots-clés de couleurs étendus, les couleurs X11, ou encore les couleurs SVG.

Il existe quelques mises en garde à considérer lors de l'utilisation des mots-clés :

  • En dehors des 16 couleurs basiques qui sont communes avec HTML, les autres ne peuvent pas être utilisées dans le HTML. HTML convertit ces valeurs inconnues à l'aide d'un algorithme qui peut aboutir à des couleurs complètement différentes. Ces mots-clés ne doivent être utilisés que dans SVG et CSS.
  • Les mots-clés inconnus rendent la propriété CSS invalide. Les propriétés invalides étant ignorées, la couleur n'aura pas d'effet. Ce comportement est différent de celui de HTML.
  • Aucune couleur définie par un mot-clé en CSS n'a de transparence, ce sont des couleurs unies.
  • De nombreux mots-clés décrivent les mêmes couleurs :
    • darkgray / darkgrey
    • darkslategray / darkslategrey
    • dimgray / dimgrey
    • lightgray / lightgrey
    • lightslategray / lightslategrey
    • gray / grey
    • slategray / slategray
  • Bien que les mots-clés ont été tirés des noms des couleur X11, la couleur peut diverger de la couleur du système X11 car elles étaient définies pour le matériel spécifique du fabricant.
Spécifications Couleur Mot-clé Coordonnées cubiques RGB Exemple en direct
CSS3 CSS2 CSS1   black =rgb(  0,   0,   0)  
  silver =rgb(192, 192, 192)  
  gray[*] =rgb(128, 128, 128)  
  white =rgb(255, 255, 255)  
  maroon =rgb(128,   0,   0)  
  red =rgb(255,   0,   0)  
  purple =rgb(128,   0, 128)  
  fuchsia =rgb(255,   0, 255)  
  green =rgb(  0, 128,   0)  
  lime =rgb(  0, 255,   0)  
  olive =rgb(128, 128,   0)  
  yellow =rgb(255, 255,   0)  
  navy =rgb(  0,   0, 128)  
  blue =rgb(  0,   0, 255)  
  teal =rgb(  0, 128, 128)  
  aqua =rgb(  0, 255, 255)  
    orange =rgb(255, 165,   0)  
    aliceblue =rgb(240, 248, 245)  
  antiquewhite =rgb(250, 235, 215)  
  aquamarine =rgb(127, 255, 212)  
  azure =rgb(240, 255, 255)  
  beige =rgb(245, 245, 220)  
  bisque =rgb(255, 228, 196)  
  blanchedalmond =rgb(255, 235, 205)  
  blueviolet =rgb(138,  43, 226)  
  brown =rgb(165,  42,  42)  
  burlywood =rgb(222, 184,  35)  
  cadetblue =rgb( 95, 158, 160)  
  chartreuse =rgb(127, 255,   0)  
  chocolate =rgb(210, 105,  30)  
  coral =rgb(255, 127,  80)  
  cornflowerblue =rgb(100, 149, 237)  
  cornsilk =rgb(255, 248, 220)  
  crimson =rgb(220,  20,  60)  
  darkblue =rgb(  0,   0, 139)  
  darkcyan =rgb(  0, 139, 139)  
  darkgoldenrod =rgb(184, 134,  11)  
  darkgray[*] =rgb(169, 169, 169)  
  darkgreen =rgb(  0, 100,   0)  
  darkgrey[*] =rgb(169, 169, 169)  
  darkkhaki =rgb(189, 183, 107)  
  darkmagenta =rgb(139,   0, 139)  
  darkolivegreen =rgb( 85, 107,  47)  
  darkorange =rgb(255, 140,   0)  
  darkorchid =rgb(153,  50, 204)  
  darkred =rgb(139,   0,   0)  
  darksalmon =rgb(233, 150, 122)  
  darkseagreen =rgb(143, 188, 143)  
  darkslateblue =rgb( 72,  61, 139)  
  darkslategray[*] =rgb( 47,  79,  79)  
  darkslategrey[*] =rgb( 47,  79,  79)  
  darkturquoise =rgb(  0, 206, 209)  
  darkviolet =rgb(148,   0, 211)  
  deeppink =rgb(255,  20, 147)  
  deepskyblue =rgb(  0, 191, 255)  
  dimgray[*] =rgb(105, 105, 105)  
  dimgrey[*] =rgb(105, 105, 105)  
  dodgerblue =rgb( 30, 144, 255)  
  firebrick =rgb(178,  34,  34)  
  floralwhite =rgb(255, 250, 240)  
  forestgreen =rgb( 34, 139,  34)  
  gainsboro =rgb(220, 220, 220)  
  ghostwhite =rgb(248, 248, 255)  
  gold =rgb(255, 215,   0)  
  goldenrod =rgb(218, 165,  32)  
  greenyellow =rgb(173, 255,  47)  
  grey =rgb(128, 128, 128)  
  honeydew =rgb(240, 255, 240)  
  hotpink =rgb(255, 105, 180)  
  indianred =rgb(205,  92,  92)  
  indigo =rgb( 75,  0, 130)  
  ivory =rgb(255, 255, 240)  
  khaki =rgb(240, 230, 140)  
  lavender =rgb(230, 230, 250)  
  lavenderblush =rgb(255, 240, 245)  
  lawngreen =rgb(124, 252, 0)  
  lemonchiffon =rgb(255, 250, 205)  
  lightblue =rgb(173, 216, 230)  
  lightcoral =rgb(240, 128, 128)  
  lightcyan =rgb(224, 255, 255)  
  lightgoldenrodyellow =rgb(250, 250, 210)  
  lightgray[*] =rgb(211, 211, 211)  
  lightgreen =rgb(144, 238, 144)  
  lightgrey[*] =rgb(211, 211, 211)  
  lightpink =rgb(255, 182, 193)  
  lightsalmon =rgb(255, 160, 122)  
  lightseagreen =rgb( 32, 178, 170)  
  lightskyblue =rgb(135, 206, 250)  
  lightslategray[*] =rgb(119, 136, 153)  
  lightslategrey[*] =rgb(119, 136, 153)  
  lightsteelblue =rgb(176, 196, 222)  
  lightyellow =rgb(255, 255, 224)  
  limegreen =rgb( 50, 205,  50)  
  linen =rgb(250, 240, 230)  
  mediumaquamarine =rgb(102, 205, 170)  
  mediumblue =rgb(  0,   0, 205)  
  mediumorchid =rgb(186,  85, 211)  
  mediumpurple =rgb(147, 112, 219)  
  mediumseagreen =rgb( 60, 179, 113)  
  mediumslateblue =rgb(123, 104, 238)  
  mediumspringgreen =rgb(  0, 250, 154)  
  mediumturquoise =rgb( 72, 209, 204)  
  mediumvioletred =rgb(199,  21, 133)  
  midnightblue =rgb( 25,  25, 112)  
  mintcream =rgb(245, 255, 250)  
  mistyrose =rgb(255, 228, 225)  
  moccasin =rgb(255, 228, 181)  
  navajowhite =rgb(255, 222, 173)  
  oldlace =rgb(253, 245, 230)  
  olivedrab =rgb(107, 142,  35)  
  orangered =rgb(255,  69,   0)  
  orchid =rgb(218, 112, 214)  
  palegoldenrod =rgb(238, 232, 170)  
  palegreen =rgb(152, 251, 152)  
  paleturquoise =rgb(175, 238, 238)  
  palevioletred =rgb(219, 112, 147)  
  papayawhip =rgb(255, 239, 213)  
  peachpuff =rgb(255, 218, 185)  
  peru =rgb(205, 133,  63)  
  pink =rgb(255, 192, 203)  
  plum =rgb(221, 160, 221)  
  powderblue =rgb(176, 224, 230)  
  rosybrown =rgb(188, 143, 143)  
  royalblue =rgb( 65, 105, 225)  
  saddlebrown =rgb(139,  69,  19)  
  salmon =rgb(250, 128, 114)  
  sandybrown =rgb(244, 164,  96)  
  seagreen =rgb( 46, 139,  87)  
  seashell =rgb(255, 245, 238)  
  sienna =rgb(160,  82,  45)  
  skyblue =rgb(135, 206, 235)  
  slateblue =rgb(106,  90, 205)  
  slategray[*] =rgb(112, 128, 144)  
  slategrey[*] =rgb(112, 128, 144)  
  snow =rgb(255, 250, 250)  
  springgreen =rgb(  0, 255, 127)  
  steelblue =rgb( 70, 130, 180)  
  tan =rgb(210, 180, 140)  
  thistle =rgb(216, 191, 216)  
  tomato =rgb(255,  99,  71)  
  turquoise =rgb( 64, 224, 208)  
  violet =rgb(238, 130, 238)  
  wheat =rgb(245, 222, 179)  
  whitesmoke =rgb(245, 245, 245)  
  yellowgreen =rgb(154, 205,  50)  

Mot-clé transparent

la mot-clé transparent représente ou couleur complètement transparente, c.-à-d. que la couleur vue sera la couleur d'arrière-plan. Dans les faits, c'est un noir dont la valeur du canal alpha est maximale et c'est un raccourci pour rgba(0,0,0,0).

Note historique
Le mot-clé transparent n'a pas toujours été une vraie couleur dans CSS Level 2 (Revision 1). C'était un mot-clé spécifique qui pouvait être utilisé à la place d'une valeur de type <couleur> dans deux propriétés CSS : background et border. Il a été ajouté principalement pour outrepasser une couleur unie héritée.

Grâce à la gestion de l'opacité via les canaux alpha, transparent a été redéfini comme une vraie couleur dans CSS Colors Level 3 permettant son usage à tout endroit où une valeur de type <couleur> est nécessaire, comme la propriété color.[**]

Mot-clé currentColor

Le mot-clé currentColor représente la valeur calculé de a propriété color de l'élément. Il permet de faire hériter les propriétés de couleur à d'autres propriétés ou aux propriétés d'un élément enfant qui n'héritent pas par défaut.

Il peut aussi être utilisé sur les propriétés qui héritent de la valeur calculée de la propriété color et est équivalent au mot-clé inherit sur ces éléments, s'ils existent.

Exemple en direct

La couleur de la ligne (un div rempli de couleur) s'adapte selon la couleur de sa propriété color, héritée de son élément parent.

<div style="color:darkred">
 La couleur de ce texte est la même que celle de la ligne :
  <div style="background:currentcolor; height:1px"></div>
 Un peu plus de texte.
</div> 
La couleur de ce texte est la même que celle de la ligne :
.
Un peu plus de texte.
<div style="color:blue">
 La couleur de ce texte est la même que celle de la ligne :
  <div style="background:currentcolor; height:1px"></div>
 Un peu plus de texte.
</div> 
La couleur de ce texte est la même que celle de la ligne :
.
Un peu plus de texte.

rgb() (rouge-vert-bleu)

Notation hexadécimale #RRGGBB et #RGB
  • "#", suivi de six caractères hexadécimaux (0-9, A-F).
  • "#", suivi de trois caractères hexadécimaux (0-9, A-F).
La notation RGB à trois caractères (#RGB) et celle à six caractères (#RRGGBB) sont égales.
Par exemple, #f03 et #ff0033 représentent la même couleur.
Notation fonctionnelle rgb(R,G,B)
« rgb », suivi de trois <integer> ou trois valeurs de <percentage>.
L'entier 255 correspond à 100% et au F ou FF des notations hexadécimales.
/* Ces exemples indiquent tous la même couleur RGB : */
 
 #f03
 #F03
 #ff0033
 #FF0033
 rgb(255,0,51)
 rgb(255, 0, 51)
 rgb(255, 0, 51.2) /* ERREUR ! N'utilisez pas les fractions, utilisez des entiers */ 
 rgb(100%,0%,20%)
 rgb(100%, 0%, 20%)
 rgb(100%, 0, 20%) /* ERREUR ! Ne mélangez pas les entiers et les pourcentages */

hsl() (teinte-saturation-lumière)

L'avantage de HSL par rapport à RGB est qu'il est bien plus intuitif : il est possible de deviner les couleurs qu'on veut, puis ajuster. C'est aussi plus facile de créer des ensembles de couleurs qui vont ensemble (en conservant la valeur de teinte et en variant les valeurs de lumière et de saturation).

La teinte est représentée par un angle sur le cercle des couleurs (c.-à-d. l'arc-en-ciel représenté sous forme de cercle). Cet angle est donné comme un <number> sans unité. Par définition, rouge=0=360, et les autres couleurs sont réparties sur le cercle, donc vert=120, bleu=240, etc. En tant qu'angle, le débordement est géré automatiquement de telle manière que -120=240 and 480=120.

La saturation la lumière sont représentés comme des pourcentages.
100% est la saturation maximale, et 0% est une teinte de gris.
100% de lumière correspond au blanc, 0% de lumière correspond au noir, et à 50% la lumière est lightness is « 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() (rouge-vert-bleu-alpha)

Étend le modèle de couleur RGB pour inclure « alpha » qui permet la spécification de l'opacité d'une couleur.
a signifie opacité : 0 = transparent ; 1 = opaque ;

rgba(255,0,0,0.1)    /* rouge 10% opaque */  
rgba(255,0,0,0.4)    /* rouge 40% opaque */  
rgba(255,0,0,0.7)    /* rouge 70% opaque */  
rgba(255,0,0,  1)    /* rouge complètement opaque */ 

hsla() (teinte-saturation-lumière-alpha)

Étend le modèle de couleur HSL pour inclure « alpha » qui permet la spécification de l'opacité d'une couleur.
a signifie opacité : 0 = transparent ; 1 = opaque ;

hsla(240,100%,50%,0.05)   /* bleu 5% opaque */   
hsla(240,100%,50%, 0.4)   /* bleu 40% opaque */  
hsla(240,100%,50%, 0.7)   /* bleu 70% opaque */  
hsla(240,100%,50%,   1)   /* bleu complètement full */ 

Couleurs systèmes

Toutes les couleurs systèmes ne sont pas gérées par tous les systèmes. pour l'usage sur les pages Web publiques.

ActiveBorder
Bordure de la fenêtre active.
ActiveCaption
Description de fenêtre active. Doit être utilisé avec CaptionText comme couleur de premier plan.
AppWorkspace
Couleur d'arrière-plan de l'interface multidocuments.
Background
Coulleur d'arrière-plan du bureau.
ButtonFace
Couleur d'arrière-plan des faces des éléments 3D qui apparaissent en 3D à cause d'une couche de bordure entourante. Doit être utilisé avec ButtonText comme couleur de premier plan.
ButtonHighlight
La couleur de la bordure faisant face à la source de lumière dans les éléments 3D qui apparaissent en relief à cause d'une douche de bordure entourante.
ButtonShadow
La couleur de la bordure à l'opposée de la sourec de lumière pour les éléments 3D qui apparaissent en relief à cause d'une couche de bordure entourante.
ButtonText
Texte sur les boutons à pousser. Doit être utilisé avec ButtonFace ou ThreeDFace comme couleur d'arrière-plan.
CaptionText
texte dans les descriptions, la boîte de dimensions et les flèches d'ascenceurs. Doit être utilisé avec ActiveCaption comme couleur d'arrière-plan.
GrayText
Texte grisé (désactivé).
Highlight
Élément(s) sélectionné(s) dans un contrôle. Doit être utilisé avec HighlightText comme couleur d'arrière-plan.
HighlightText
Texte des élément(s) sélectionné(s) dans un contrôle. Doit être utilisé avec Highlight comme couleur d'arrière-plan.
InactiveBorder
Bordure de fenêtre inactive.
InactiveCaption
Description de fenêtre inactive. Doit être utilisé avec InactiveCaptionText comme couleur de premier plan.
InactiveCaptionText
Couleur du texte dans une description inactive. Doit être utilisé avec InactiveCaption comme couleur d'arrière-plan.
InfoBackground
Couleur d'arrière-plan pour les info-bulles. Doit être utilisé avec InfoText comme couleur de premier plan.
InfoText
Couleur du texte pour les info-bulles. Doit être utilisé avec InfoBackground comme couleur d'arrière-plan.
Menu
Arrière-plan du menu. Doit être utilisé avec MenuText ou -moz-MenuBarText comme couleur de premier plan.
MenuText
Texte dans les menus. Doit être utilisé avec Menu comme couleur d'arrière-plan.
Scrollbar
Zone grise de l'ascenceur.
ThreeDDarkShadow
La couleur de la plus sombre des deux bordures (généralement celle la plus à l'extérieur) à l'opposé de la source de lumière pour les éléments en 3D à cause de deux couches de bordures entourantes.
ThreeDFace
La couleur d'arière-plan des faces des éléments en 3D qui apparaissent en relief à cause de deux couches de bordures entourantes. Doit être utilisé avec ButtonText comme couleur de premier plan.
ThreeDHighlight
La couleur de la bordure la plus claire (généralement celle la plus à l'extérieur) des deux bordures du côté de la source de lumière des éléments 3D qui apparaissent en relief à cause de deux couches de bordures entourantes.
ThreeDLightShadow
la couleur de la plus sombre des deux bordures (généralement celle à l'intérieur) du côté de la source de lumière pour les éléments en 3D qui apparaissent en relief à cause de deux couches de bordures entourantes.
ThreeDShadow
La couleur de la plus claire (généralement celle à l'intérieur) des deux bordures pour les éléments en 3D  qui apparaissent en relief à cause de deux couches de bordures entourantes.
Window
Couleur d'arrière-plan de la fenêtre. Doit être utilisé avec WindowText comme couleur de premier plan.
WindowFrame
Couleur du cadre de la fenêtre.
WindowText
Texte dans les fenêtres. Doit être utilisé avec Window comme couleur d'arrière-plan. background color.

Extensions Mozilla aux couleurs systèmes

-moz-ButtonDefault
La couleur de la bordure qui entourent les boutons représentants une action par défaut d'une boîte de dialogue.
-moz-ButtonHoverFace
La couleur par défaut d'un bouton survolé par le pointeur de la souris (ce serait ThreeDFace ou ButtonFace si le pointeur n'était pas au-dessus). Doit être utilisé avec- moz-ButtonHoverText comme couleur de premier plan.
-moz-ButtonHoverText
La couleur du texte d'un bouton survolé par le pointeur de la souris (ce serait ButtonText si le pointeur n'était pas au-dessus). Doit être utilisé avec -moz-ButtonHoverFace comme couleur d'arrière-plan.
-moz-CellHighlight
Couleur d'arrière-plan pour un élément sélectionné dans ue arborescence.  Doit être utilisé avec -moz-CellHighlightText comme couleur de premier plan. Voir également -moz-html-CellHighlight.
-moz-CellHighlightText
Couleur du texte pour un élément sélectionné dans une arborescence. Doit être utilisé avec -moz-CellHighlight comme couleur d'arrière-plan. Voir également -moz-html-CellHighlightText.
-moz-Combobox
Couleur d'arrière plan des boîtes combinées. Doit être utilisé avec -moz-ComboboxText comme couleur de premier plan. Dans les versions avant 1.9.2, utilisez -moz-Field.
-moz-ComboboxText
Couleur d'arrière-plan pour les boîtes combinées. Doit être utilisé avec -moz-ComboboxText comme couleur de premier plan. Dans les versions avant 1.9.2, utilisez -moz-FieldText.
-moz-Dialog
Couleur d'arrière-plan pour les boîtes de dialogue. Doit être utilisé avec -moz-DialogText comme couleur de premier plan.
-moz-DialogText
Couleur du texte pour les boîtes de dialogue. Doit être utilisé avec -moz-Dialog comme couleur d'arrière-plan.
-moz-dragtargetzone
-moz-EvenTreeRow
Couleur d'arrière-plan pour les lignes paires dans une arborescence. Doit être utilisé avec -moz-FieldText comme couleur d'arrière-plan. Dans les versions avant 1.9, utilisez -moz-Field. Voir également -moz-OddTreeRow.
-moz-Field
Couleur d'arrière-plan des champs de texte. Doit être utilisé avec -moz-FieldText comme couleur de premier plan.
-moz-FieldText
Couleur de premier plan des champs de texte. Doit être utilisé avec -moz-Field, -moz-EvenTreeRow, ou -moz-OddTreeRow comme couleur d'arrière-plan.
-moz-html-CellHighlight
Couleur d'arrière-plan pour un élément réhaussé dans un élément HTML select. Doit être utilisé avec -moz-html-CellHighlightText comme couleur de premier plan. Dans les versions avant 1.9, utilisez -moz-CellHighlight.
-moz-html-CellHighlightText
Couleur de premier plan pour un élément réhaussé dans un élément HTML select. Doit être utilisé avec -moz-html-CellHighlight comme couleur d'arrière-plan. Dans les versions avant 1.9, utilisez -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
Couleur d'arrière-plan d'un élément de menu survolé. Souvent similaire à Highlight. Doit être utilisé avec -moz-MenuHoverText ou -moz-MenuBarHoverText comme couleur de premier plan.
-moz-MenuHoverText
Couleur de premier plan pour les éléments de menu survolés. Souvent similaire à HighlightText. Doit être utilisé avec -moz-MenuHover comme couleur d'arrière-plan.
-moz-MenuBarText
Couleur de premier plan du texte des barres de menu. Souvent similaire à MenuText. Doit être utilisé avec Menu comme couleur d'arrière-plan.
-moz-MenuBarHoverText
Couleur de premier plan du texte dans des éléments de menus survolés. Souvent similaire à -moz-MenuHoverText. Doit être utilisé avec -moz-MenuHover comme couleur d'arrière-plan.
-moz-nativehyperlinktext
couleur par défaut des hyperliens sur la plateforme.
-moz-OddTreeRow
Couleur d'arrière-plan des lignes impaires dans une arborescence. Doit être utilisé avec -moz-FieldText comme couleur de premier plan. Dans les versions avant 1.9, utilisez -moz-Field. Voir également -moz-EvenTreeRow.
-moz-win-communicationstext
Doit être utilisé pour le texte dans les objets avec appearance:-moz-win-communications-toolbox.
-moz-win-mediatext
Doit être utilisé pour le texte dans les objets avec appearance:-moz-win-media-toolbox.

Extensions Mozilla de préférences couleur

-moz-activehyperlinktext
Préférence de l'utilisateur pour la couleur du texte des liens actifs. Doit être utilisé sur l'arrière-plan par défaut du document.
 
-moz-default-background-color
Préférence de l'utilisateur pour la couleur d'arrière-plan du document.
 
-moz-default-color
Préférence de l'utilisateur pour la couleur du texte.
-moz-hyperlinktext
Préférence de l'utilisateur pour la couleur du texte des liens non visités. Doit être utilisé sur l'arrière-plan par défaut du document.
-moz-visitedhyperlinktext
Préférence de l'utilisateur pour la couleur du texte des liens visités. Doit être utilisé sur l'arrière-plan par défaut du document.

Spécifications

Spécification État Commentaire
CSS Color Module Level 3 Recommendation Couleurs systèmes dépréciées ; ajout des couleurs SVG ; ajout des notations fonctionnelles rgba(), hsl(), hsla().
CSS Level 2 (Revision 1) Recommendation Ajout de la couleur orange et des couleurs systèmes.
CSS Level 1 Recommendation  

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
mots-clés 1.0 1.0 (1.0) 3.0 [*] 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() 1.0 3.0 (1.9) 9.0 # 10.0 3.1 (525)
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 [**] 10.0 3.1 (525)
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base ? ? ? ? ?

[*] Les couleurs grises avec un « e » (grey, darkgrey, darkslategrey, dimgrey, lightgrey, lightslategrey) sont gérées depuis IE 8.0. IE 3 à IE 6 ne gèrent que les variantes avec un « a » : gray, darkgray, darkslategray, dimgray, lightgray, lightslategray.

[**]  IE 7-8 gèrent la transparence seulement pour background et border. color:transparent est dessiné en noir avec IE.

Voir également

Étiquettes et contributeurs liés au document

Contributeurs ayant participé à cette page : FredB
Dernière mise à jour par : FredB,
Masquer la barre latérale