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

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 (en-US).

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.

html
<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 (en-US) : #RGB[A] ou #RRGGBB[AA]

R (rouge), G (vert, green en anglais), B (bleu), et A (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() ou rgba() : rgb[a](R, G, B[, A]) or rgb[a](R G B[ / A])

R (rouge), G (vert, green en anglais), et B (bleu) peuvent être des nombres (type <number>) ou des pourcentages (type <percentage>) où le nombre 255 correspond à 100%. A (alpha) peut être un nombre (type <number>) compris entre 0 et 1, ou un pourcentage (type <percentage>) où le nombre 1 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() ou hsla() : hsl[a](H, S, L[, A]) ou hsl[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 a red=0deg=360deg, et les autres couleurs distribuées sur le cercle avec green=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) et L (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 et 50% une luminosité « normale ».

A (alpha) peut être un nombre (type <number>) compris entre 0 et 1, 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 a red=0deg=360deg, et les autres couleurs distribuées sur le cercle avec green=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) et B (noirceur, blackness) sont des pourcentages (type <percentage>). Ces deux valeurs sont mélangées et il faut donc 0% de blancheur et 100% de noirceur afin de produire du noir. Réciproquement, il faudra 100% de blancheur et 0% 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 entre 0 et 1, 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> (en-US)

<color-base> =
<hex-color> (en-US) |
<color-function> |
<named-color> (en-US) |
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> (en-US) [ <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

html
<div></div>
<hr />
<label for="color">Veuillez saisir une valeur de couleur valide&nbsp;:</label>
<input type="text" id="color" />

CSS

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.

css
/* 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

css
/* 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

css
/* 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

css
/* 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

css
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