<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é (comme
blue
outransparent
par exemple) - en utilisant le système de coordonnées cubiques RGB (grâce à la notation #-hexadecimal ou aux notations fonctionnelles
rgb()
etrgba()
) - en utilisant le système de coordonnées cylindriques HSL (grâce aux notations fonctionnelles
hsl()
ethsla()
)
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
Note : 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 : Historiquement, 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])
ourgba(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])
ourgba(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])
ouhsla(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 avec0%
, l'image sera en nuances de gris. Pour la clarté,100%
correspondra à du blanc et0%
à 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 valeur100%
correspond alors à la valeur numérique 1 : opacité complète). - Notation fonctionnelle :
hsl(H S L[ / A])
ouhsla(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.
-
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. -
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.
-
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..
-
La couleur du texte sur les bouttons. Devrait être utilisée avec
ButtonFace
ouThreeDFace
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. -
La couleur d'arrière-plan du menu. Devrait être utilisée avec
MenuText
ou-moz-MenuBarText
comme couleur de premier-plan. -
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
-
La couleur de la bordure autour des boutons représentant l'action par défaut d'une boîte de dialogue.
-
La couleur d'arrière-plan d'un bouton survolé par le pointeur (qui serait
ThreeDFace
ouButtonFace
lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec-moz-ButtonHoverText
comme couleur de premier-plan. -
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
-
Couleurs d'accentuation.
- -moz-mac-chrome-active, -moz-mac-chrome-inactive
-
Couleurs pour les éléments de chrome actifs/inactifs
-
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. -
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. -
La couleur du texte dans les barres de menu. Généralement similaire à
MenuText
. Devrait être utilisée avecMenu
comme couleur d'arrière-plan. -
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
.appearance
: -moz-win-communications-toolbox; - -moz-win-mediatext
-
Devrait être utilisée comme couleur pour les textes des objets pour lesquels
.appearance
: -moz-win-media-toolbox
Ajout de Mozilla pour les couleurs liées aux préférences
- -moz-activehyperlinktext
-
La couleur choisie par l'utilisateur pour le texte des liens actifs. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
- -moz-default-background-color
-
La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.
- -moz-default-color
-
La couleur choisie par l'utilisateur pour la couleur du texte.
- -moz-hyperlinktext
-
La couleur choisie par l'utilisateur pour le texte des liens non visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
- -moz-visitedhyperlinktext
-
La couleur choisie par l'utilisateur pour le texte des liens visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
Interpolation
Les valeurs de type <color>
peuvent être interpolées afin de créer des animations ou des dégradés (type <gradient>
). Dans ce cas, elles sont interpolées via chacune de leurs composantes rouge, verte, bleue et chacune de ces coordonnées est gérée comme un nombre réel flottant. L'interpolation des couleurs est appliquée dans l'espace de couleurs alpha sRGBA prémultiplié afin d'empêcher des tons de gris d'apparaître. Pour les animations, la vitesse de l'interpolation est définie selon la fonction de temporisation associée à l'animation.
Accessibilité
La recommandation du W3C : WCAG 2.0 conseille vivement aux auteurs de ne pas utiliser la couleur comme le seul moyen de transmettre une information, une action ou un résultat. Certains utilisateurs peuvent rencontrer des difficultés à distinguer les couleurs. Bien entendu, cette recommandation ne vise pas à interdire l'utilisation des couleurs, elle indique simplement que ce ne doit pas être le seul moyen de fournir une information (voir l'article sur Ies couleurs et le contraste pour plus d'informations).
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Color Module Level 4 La définition de '<color>' dans cette spécification. |
Version de travail |
Ajout de la couleur rebeccapurple , de la notation
hexadécimale sur quatre chiffres (#RGBA ) et sur huit
chiffres (#RRGGBBAA ). rgba() et
hsla() sont désormais synonymes de rgb() et
hsl() , les paramètres des fonctions peuvent être séparés
par des espaces plutôt que ds virgules, les valeurs de transparence
(alpha) peuvent être exprimées en pourcentages et les valeurs de teinte
avec un angle.
|
CSS Color Module Level 3 La définition de '<color>' dans cette spécification. |
Recommendation |
Les couleurs système sont désormais dépréciée. Les couleurs SVG sont
ajoutées ainsi que les notations fonctionnelles rgba() ,
hsl() , hsla() .
|
CSS Level 2 (Revision 1) La définition de '<color>' dans cette spécification. |
Recommendation | Ajout de la couleur orange et des couleurs système. |
CSS Level 1 La définition de '<color>' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
BCD tables only load in the browser