<color>
Le type de données CSS <color>
permet de représenter des couleurs. Une valeur de type <color>
peut également contenir un canal alpha indiquant l'opacité (et donc la transparence) de la couleur, qui pourra être utilisée lors de la composition avec son arrière-plan.
Une valeur de type <color>
peut être définie de l'une des façons suivantes :
- En utilisant un mot-clé (comme
blue
outransparent
). Tous les mots-clés indiquent une couleur dans l'espace de couleur sRGB. - En utilisant le système de coordonnées RGB cubiques avec une notation hexadécimale précédée d'un
#
ou avec les notations fonctionnellesrgb()
etrgba()
. Les couleurs ainsi définies appartiennent toujours à l'espace de couleur sRGB. - En utilisant le système de coordonnées cylindriques HSL avec les notations fonctionnelles
hsl()
ethsla()
. Les couleurs ainsi définies appartiennent toujours à l'espace de couleur sRGB. - En utilisant le système de coordonnées cylindriques HWB avec la notation fonctionnelle
hwb()
. Les couleurs ainsi définies appartiennent toujours à l'espace de couleur sRGB. - En utilisant le système de coordonnées cylindriques LCH avec la notation fonctionnelle
lch()
. Cela permet de représenter n'importe quelle couleur visible. - En utilisant le système de coordonnées Lab, avec la notation fonctionnelle
lab()
. Cela permet de représenter n'importe quelle couleur visible. - En utilisant la notation fonctionnelle
color()
pour indiquer une couleur dans un espace de couleur prédéfini ou personnalisé.
Note : Cet article décrit le type de données <color>
. Si vous souhaitez en savoir plus sur l'utilisation des couleurs CSS avec HTML, voyez Appliquer des couleurs aux éléments HTML avec CSS.
Syntaxe
On peut fournir une valeur de type <color>
en utilisant l'une des syntaxes décrites ci-après.
Note : Bien que les valeurs <color>
soient précisément définies, l'apparence réelle peut varier (parfois significativement) d'un appareil à l'autre. Cela se produit pour la plupart des appareils qui ne sont pas calibrés ou lorsque les navigateurs ne prennent pas en charge les profils de couleur de l'appareil de sortie.
Couleurs nommées
Les couleurs nommées sont des identifiants, insensibles à la casse, qui représentent une couleur donnée, comme red
pour rouge, blue
pour bleu, black
pour noir, ou encore lightseagreen
. Bien que ces noms décrivent plus ou moins, en anglais, les couleurs auxquelles ils sont associés, leur sémantique est arbitraire et il n'y a pas de règle stricte pour déterminer un nom donné.
La liste complète des mots-clés correspondants est disponible sur cette page.
Mot-clé currentcolor
Le mot-clé currentcolor
représente la valeur de la propriété color
d'un élément. Cela permet d'utiliser la valeur color
sur les propriétés qui ne la reçoivent pas par défaut.
Si currentcolor
est utilisé comme valeur pour la propriété color
, c'est la valeur héritée pour la propriété color
qui est alors utilisée.
<div style="color: blue; border: 1px dashed currentcolor;">
La couleur de ce texte est bleue.
<div style="background: currentcolor; height:9px;"></div>
Ce bloc est entouré d'une bordure bleue.
</div>
Modèle de couleurs RGB
Le modèle de couleurs RGB définit des couleurs dans l'espace de couleur sRGB selon ses composantes rouge, vert (green en anglais), et bleu. Une composante alpha optionnelle décrit l'opacité de la couleur (et donc sa transparence).
Les couleurs RGB peuvent être exprimées avec une notation hexadécimale (préfixée avec #
) ou une notation fonctionnelle (rgb()
, rgba()
).
- Notation hexadécimale :
#RGB[A]
ou#RRGGBB[AA]
-
R
(rouge),G
(vert, green en anglais),B
(bleu), etA
(alpha) sont des caractères hexadécimaux (de 0 à 9 et de A à F).A
est optionnel. Ainsi,#ff0000
sera équivalent à#ff0000ff
. La notation sur trois chiffres (#RGB
) est une version plus courte de la notation sur six chiffres (#RRGGBB
). On a par exemple#f09
qui représente la même couleur que#ff0099
. De la même façon, la notation RGB sur quatre chiffres (#RGBA
) est une version plus courte de la notation sur huit chiffres (#RRGGBBAA
),#0f38
représente par exemple la même couleur que#00ff3388
. rgb()
ourgba()
:rgb[a](R, G, B[, A])
orrgb[a](R G B[ / A])
-
R
(rouge),G
(vert, green en anglais), etB
(bleu) peuvent être des nombres (type<number>
) ou des pourcentages (type<percentage>
) où le nombre255
correspond à100%
.A
(alpha) peut être un nombre (type<number>
) compris entre0
et1
, ou un pourcentage (type<percentage>
) où le nombre1
correspond à100%
(opacité complète).
Modèle de couleurs HSL
Le modèle de couleurs HSL définit des couleurs dans l'espace de couleur sRGB selon ses composantes de teinte (hue en anglais), de saturation, et de luminosité. Une composante alpha optionnelle décrit l'opacité de la couleur (et donc sa transparence).
La plupart des conceptrices et concepteurs trouvent le modèle HSL plus intuitif que le modèle RGB, car il permet d'ajuster indépendamment la teinte, la saturation et la luminosité. HSL permet également de créer plus facilement une palette de nuances sur la même teinte. Toutefois, utiliser HSL afin de créer des variations de couleurs peut produire des résultats surprenants, car il n'est pas uniforme pour la perception. Ainsi, hsl(240 100% 50%)
et hsl(60 100% 50%)
ont la même composante de luminosité, mais la première est bien plus sombre que la seconde.
Les couleurs HSL sont exprimées à l'aide des notations fonctionnelles hsl()
et hsla()
.
hsl()
ouhsla()
:hsl[a](H, S, L[, A])
ouhsl[a](H S L[ / A])
-
H
(pour la teinte, hue en anglais) est un angle (type<angle>
) sur le cercle des couleurs. Lorsqu'il est écrit sans unité, il est interprété comme étant exprimé en degré. Par définition, on ared=0deg=360deg
, et les autres couleurs distribuées sur le cercle avecgreen=120deg
,blue=240deg
, etc. Sa valeur étant un<angle>
, elle boucle sur elle-même et on a donc-120deg=240deg
,480deg=120deg
,-1turn=1turn
, etc.S
(saturation) etL
(luminosité) sont exprimées en pourcentages. Une saturation à100%
indique une couleur complètement saturée, tandis qu'une saturation à0%
fournira un niveau de gris (une couleur complètement désaturée). Une luminosité à100%
fournira du blanc, tandis qu'une luminosité à0%
fournira du noir et50%
une luminosité « normale ».A
(alpha) peut être un nombre (type<number>
) compris entre0
et1
, ou un pourcentage (type<percentage>
), où1
correspond à100%
(opacité complète).
Modèle de couleurs HWB
Similaire au modèle de couleurs HSL, le modèle de couleurs HWB définit une couleur donnée dans l'espace de couleur sRGB selon ses composantes de teinte, de blancheur et de noirceur.
Comme avec le modèle HSL, il peut être plus intuitif de travailler avec le modèle HWB qu'avec le modèle RGB. La teinte est indiquée de la même façon, mais est ici suivie de la quantité de blancheur et de noirceur respectives, exprimées en pourcentages. Cette fonction permet également d'indiquer une valeur pour la composante alpha.
Note : Il n'existe pas de fonction séparée hwba()
(à la différence donc de HSL avec hsl()
et hsla()
), la valeur alpha est un paramètre optionnel. Si elle n'est pas fournie, la composante alpha vaudra 1
(soit 100%
). Pour fournir cette valeur, on ajoutera une barre oblique (/
) après la valeur de noirceur et avant la composante alpha.
Les couleurs du modèle HWB sont exprimées à l'aide de la notation fonctionnelle hwb()
.
Note : La fonction hwb()
ne permet pas d'utiliser des virgules pour séparer les valeurs des arguments (contrairement aux autres fonctions de création de couleur qui l'ont précédée).
hwb()
:hwb(H W B[ / A])
-
Comme pour le modèle HSL,
H
(la teinte, hue en anglais) un angle (type<angle>
) sur le cercle des couleurs. Lorsqu'il est écrit sans unité, il est interprété comme étant exprimé en degré. Par définition, on ared=0deg=360deg
, et les autres couleurs distribuées sur le cercle avecgreen=120deg
,blue=240deg
, etc. Sa valeur étant un<angle>
, elle boucle sur elle-même et on a donc-120deg=240deg
,480deg=120deg
,-1turn=1turn
, etc.W
(blancheur, whiteness en anglais) etB
(noirceur, blackness) sont des pourcentages (type<percentage>
). Ces deux valeurs sont mélangées et il faut donc0%
de blancheur et100%
de noirceur afin de produire du noir. Réciproquement, il faudra100%
de blancheur et0%
de noirceur pour produire du blanc.50%
sur l'une ou l'autre des valeurs produira une teinte de gris intermédiaire avec une teinte de la couleur fournie avec le premier paramètre.A
(alpha) peut être un nombre (type<number>
) compris entre0
et1
, ou un pourcentage (type<percentage>
), où1
correspond à100%
(opacité complète). Lorsqu'on fournit une valeur alpha, celle-ci doit être précédée d'une barre oblique (/
).
Couleurs système
En mode de couleurs forcé (détectable avec la caractéristique média forced-colors
), la plupart des couleurs sont restreintes à la palette définie par l'utilisatrice/l'utilisateur et le navigateur. Les couleurs système sont exposées avec les mots-clés suivants, qui peuvent être utilisés afin de s'assurer que le reste de la page s'intègre bien avec la palette restreinte. Ces valeurs peuvent être utilisées dans d'autres contextes, mais ne sont pas prises en charge par l'ensemble des navigateurs.
Les mots-clés de cette liste sont définis dans le module de spécification CSS Color de niveau 4 : ActiveText
, ButtonBorder
, ButtonFace
, ButtonText
, Canvas
, CanvasText
, Field
, FieldText
, GrayText
, Highlight
, HighlightText
, LinkText
, Mark
, MarkText
, VisitedText
.
Note : Ces mots-clés sont insensibles à la casse, mais sont écrits ici en camel case à des fins de lisibilité.
Modèle de couleurs Lab
Cette notation a été introduite par le module de spécification CSS Color de niveau 4. Les couleurs Lab sont définies à l'aide de la notation fonctionnelle lab()
. Ces couleurs ne sont pas limitées à un espace de couleur spécifique et il est possible de représenter toutes les couleurs visibles par l'œil humain.
Modèle de couleurs LCH
Cette notation a été introduite par le module de spécification CSS Color de niveau 4. Les couleurs LCH sont définies à l'aide de la notation fonctionnelle lch()
. Ces couleurs ne sont pas limitées à un espace de couleur spécifique et il est possible de représenter toutes les couleurs visibles par l'œil humain.
LCH est la forme polaire de Lab et est souvent plus pratique à utiliser, car les composantes de chroma et de teinte sont indépendantes plutôt que d'être mélangées. Ce modèle est similaire à HSL dans cette représentation polaire/cylindrique, mais il est plus uniforme quant à la perception. À la différence de HSL où hsl(60 100% 50%)
hsl(240 100% 50%)
sont décrits avec la même luminosité, LCH (et Lab) affectent différentes luminosités à ces couleurs :
- La première (jaune) aura
L=97.6
- La seconde (bleue) aura
L=29.6
.
Aussi, LCH peut être utilisé afin de créer des palettes de couleurs différentes, avec des résultats prévisibles.
Note : La teinte LCH n'est pas la même que la teinte HSL et que la chroma LCH ne correspond pas à la saturation HSL, même si elles partagent certaines similarités conceptuelles.
color()
Cette notation a été introduite par le module de spécification CSS Color de niveau 4. Les couleurs définies grâce à la fonction color()
peuvent être définies par rapport à n'importe quel espace de couleur prédéfini ou personnalisé (dans ce cas l'espace de couleur sera défini avec une règle @color-profile
).
Interpolation
Pour les animations et les dégradés, les valeurs <color>
sont interpolées selon chacune de leurs composantes rouge, verte, bleu. Chaque composante est interpolée comme un nombre décimal. L'interpolation des couleurs s'effectue dans l'espace de couleur sRGBA avec les alpha pré-multipliés afin d'éviter l'apparition de couleurs grises. Pour les animations, la vitesse de l'interpolation est déterminée par la fonction de transition.
Accessibilité
Certaines personnes distinguent difficilement les couleurs entre elles. La recommandation WCAG 2.1 indique que la couleur ne doit pas être utilisée comme unique façon de transmettre un message, d'indiquer une action ou de fournir un résultat. Voir l'article Couleur et contraste pour plus d'informations.
Syntaxe formelle
<color> =
<color-base> |
currentColor |
<system-color>
<color-base> =
<hex-color> |
<color-function> |
<named-color> |
transparent
<color-function> =
<rgb()> |
<rgba()> |
<hsl()> |
<hsla()> |
<hwb()> |
<lab()> |
<lch()> |
<oklab()> |
<oklch()> |
<color()>
<rgb()> =
<legacy-rgb-syntax> |
<modern-rgb-syntax>
<rgba()> =
<legacy-rgba-syntax> |
<modern-rgba-syntax>
<hsl()> =
<legacy-hsl-syntax> |
<modern-hsl-syntax>
<hsla()> =
<legacy-hsla-syntax> |
<modern-hsla-syntax>
<hwb()> =
hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> =
lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> =
lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> =
oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> =
oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> =
color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<legacy-rgb-syntax> =
rgb( <percentage>#{3} , <alpha-value>? ) |
rgb( <number>#{3} , <alpha-value>? )
<modern-rgb-syntax> =
rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<legacy-rgba-syntax> =
rgba( <percentage>#{3} , <alpha-value>? ) |
rgba( <number>#{3} , <alpha-value>? )
<modern-rgba-syntax> =
rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<legacy-hsl-syntax> =
hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )
<modern-hsl-syntax> =
hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<legacy-hsla-syntax> =
hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )
<modern-hsla-syntax> =
hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<hue> =
<number> |
<angle>
<alpha-value> =
<number> |
<percentage>
<colorspace-params> =
<custom-params> |
<predefined-rgb-params> |
<predefined-polar-params> |
<predefined-rectangular-params> |
<xyz-params>
<custom-params> =
<dashed-ident> [ <number> | <percentage> | none ]+
<predefined-rgb-params> =
<predefined-rgb> [ <number> | <percentage> | none ]{3}
<predefined-polar-params> =
jzczhz [ <number> | <percentage> | none ]{2} [ <hue> | none ]
<predefined-rectangular-params> =
<predefined-rectangular> [ <number> | <percentage> | none ]{3}
<xyz-params> =
<xyz> [ <number> | <percentage> | none ]{3}
<predefined-rgb> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020 |
rec2100-pq |
rec2100-hlg |
rec2100-linear
<predefined-rectangular> =
jzazbz |
ictcp
<xyz> =
xyz |
xyz-d50 |
xyz-d65
Exemples
Testeur de couleur
Dans cet exemple, on fournit un élément <div>
et un champ texte. Saisir une couleur valide dans le champ texte permettra d'appliquer cette couleur sur l'élément <div>
, vous permettant ainsi de tester vos valeurs de couleur.
HTML
<div></div>
<hr />
<label for="color">Veuillez saisir une valeur de couleur valide :</label>
<input type="text" id="color" />
CSS
div {
width: 100%;
height: 200px;
}
Résultat
Variations sur la syntaxe RGB
Dans cet exemple, on indique différentes façons de créer une même couleur avec les différentes syntaxes RGB.
/* Ces variations de syntaxe définissent toutes la même valeur, un rose vif complètement opaque. */
/* Syntaxe hexadécimale */
#f09
#F09
#ff0099
#FF0099
/* Syntaxe fonctionnelle */
rgb(255,0,153)
rgb(255, 0, 153)
rgb(255, 0, 153.0)
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /* Erreur ! On ne mélange pas nombres et pourcentages. */
rgb(255 0 153)
/* Syntaxe hexadécimale avec une valeur alpha */
#f09f
#F09F
#ff0099ff
#FF0099FF
/* Syntaxe fonctionnelle avec une valeur alpha */
rgb(255, 0, 153, 1)
rgb(255, 0, 153, .5)
rgb(255, 0, 153, 0.5)
rgb(255, 0, 153, 100%)
/* Syntaxe avec l'espace comme séparateur des paramètres */
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)
/* Syntaxe fonctionnelle avec des valeurs décimales */
rgb(255, 0, 153.6, 1)
rgb(2.55e2, 0e0, 1.53e2, 1e2%)
Variations sur la transparence RGB
/* Syntaxe hexadécimale */
#3a30 /* Vert opaque à 0% */
#3a3f /* Vert complètement opaque */
#33aa3300 /* Vert opaque à 0% */
#33aa3380 /* Vert opaque à 50% */
/* Syntaxe fonctionnelle */
rgba(51, 170, 51, 0.1) /* Vert opaque à 10% */
rgba(51, 170, 51, 0.4) /* Vert opaque à 40% */
rgba(51, 170, 51, 0.7) /* Vert opaque à 70% */
rgba(51, 170, 51, 1) /* Vert complètement opaque */
/* Syntaxe utilisant les espaces pour séparer les paramètres */
rgba(51 170 51 / 0.4) /* Vert opaque à 40% */
rgba(51 170 51 / 40%) /* Vert opaque à 40% */
/* Syntaxe fonctionnelle avec des valeurs décimales */
rgba(51, 170, 51.6, 1)
rgba(5.1e1, 1.7e2, 5.1e1, 1e2%)
Variations sur la syntaxe HSL
/* Tous ces exemples décrivent la même couleur : lavande. */
hsl(270,60%,70%)
hsl(270, 60%, 70%)
hsl(270 60% 70%)
hsl(270deg, 60%, 70%)
hsl(4.71239rad, 60%, 70%)
hsl(0.75turn, 60%, 70%)
/* Tous ces exemples décrivent la même couleur : un ton lavande opaque à 15% */
hsl(270, 60%, 50%, 0.15)
hsl(270, 60%, 50%, 0.15)
hsl(270, 60%, 50%, 15%)
hsl(270 60% 50% / 0.15)
hsl(270 60% 50% / 15%)
Variations sur la syntaxe HWB
/* Tous ces exemples décrivent une nuance de vert citron. */
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(0.25turn 0% 40%)
/* Le même vert citron avec une valeur alpha. */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)
Couleurs complètement saturées
Notation | Description | Résultat |
---|---|---|
hsl(0, 100%, 50%) |
Rouge | |
hsl(30, 100%, 50%) |
Orange | |
hsl(60, 100%, 50%) |
Jaune | |
hsl(90, 100%, 50%) |
Vert citron | |
hsl(120, 100%, 50%) |
Vert | |
hsl(150, 100%, 50%) |
Vert-bleu | |
hsl(180, 100%, 50%) |
Cyan | |
hsl(210, 100%, 50%) |
Bleu ciel | |
hsl(240, 100%, 50%) |
Bleu | |
hsl(270, 100%, 50%) |
Violet | |
hsl(300, 100%, 50%) |
Magenta | |
hsl(330, 100%, 50%) |
Rose | |
hsl(360, 100%, 50%) |
Rouge |
Verts clairs et sombres
Notation | Description | Résultat |
---|---|---|
hsl(120, 100%, 0%) |
Noir | |
hsl(120, 100%, 20%) |
||
hsl(120, 100%, 40%) |
||
hsl(120, 100%, 60%) |
||
hsl(120, 100%, 80%) |
||
hsl(120, 100%, 100%) |
Blanc |
Verts saturés et désaturés
Notation | Description | Résultat |
---|---|---|
hsl(120, 100%, 50%) |
Vert | |
hsl(120, 80%, 50%) |
||
hsl(120, 60%, 50%) |
||
hsl(120, 40%, 50%) |
||
hsl(120, 20%, 50%) |
||
hsl(120, 0%, 50%) |
Gris |
Variations HSL avec de la transparence
hsla(240, 100%, 50%, 0.05) /* bleu opaque à 5% */
hsla(240, 100%, 50%, 0.4) /* bleu opaque à 40% */
hsla(240, 100%, 50%, 0.7) /* bleu opaque à 70% */
hsla(240, 100%, 50%, 1) /* bleu complètement opaque */
/* Syntaxe où les paramètres sont séparés par des espaces */
hsla(240 100% 50% / 0.05) /* bleu opaque à 5% */
/* Valeur alpha exprimée en pourcentage */
hsla(240 100% 50% / 5%) /* bleu opaque à 5% */
Spécifications
Specification |
---|
CSS Color Module Level 4 # color-syntax |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- La propriété
opacity
qui permet de définir la transparence à l'échelle d'un élément. - Certaines propriétés fréquemment employées et qui utilisent ce type de données :
- Appliquer des couleurs aux éléments HTML en utilisant CSS