<color>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨juillet 2015⁩.

* Some parts of this feature may have varying levels of support.

Le type de donnée CSS <color> représente une couleur. Une valeur <color> peut aussi inclure une valeur de transparence (canal alpha), indiquant comment la couleur doit être composée ^(angl.) avec son arrière-plan.

Note : Bien que les valeurs <color> soient précisément définies, leur apparence réelle peut varier (parfois de façon significative) d'un appareil à l'autre. Cela s'explique par le fait que la plupart des appareils ne sont pas calibrés et que certains navigateurs ne prennent pas en charge les profils colorimétriques des périphériques de sortie.

Syntaxe

css

/* Couleurs nommées */
rebeccapurple
aliceblue

/* RGB Hexadécimal */
#f09
#ff0099

/* RGB (Rouge, Vert, Bleu) */
rgb(255 0 153)
rgb(255 0 153 / 80%)

/* HSL (Teinte, Saturation, Luminosité) */
hsl(150 30% 60%)
hsl(150 30% 60% / 80%)

/* HWB (Teinte, Blancheur, Noirceur) */
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)

/* Lab (Luminosité, axe A, axe B) */
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)

/* LCH (Luminosité, Chroma, Teinte) */
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)

/* Oklab (Luminosité, axe A, axe B) */
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)

/* OkLCh (Luminosité, Chroma, Teinte) */
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)

/* Couleurs CSS relatives */
/* Changement de teinte HSL */
hsl(from red 240deg s l)
/* Changement du canal alpha HWB */
hwb(from green h w b / 0.5)
/* Changement de luminosité LCH */
lch(from blue calc(l + 20) c h)

/* light-dark */
light-dark(white, black)
light-dark(rgb(255 255 255), rgb(0 0 0))

Une valeur <color> peut être définie en utilisant l'une des méthodes suivantes :

Par des mots-clés : <named-color> (comme blue ou pink), <system-color>, et currentColor.
Par notations hexadécimales : <hex-color> (comme #ff0000).
Par <color-function>, avec des paramètres dans un espace colorimétrique utilisant des notations fonctionnelles :
- Espace colorimétrique sRGB : hsl(), hwb(), et rgb().
- Espace colorimétrique CIELAB : lab() et lch().
- Espace colorimétrique Oklab ^(angl.) : oklab() et oklch().
- Autres espaces colorimétriques : color(), device-cmyk().
En utilisant la syntaxe relative color pour produire une nouvelle couleur à partir d'une couleur existante. Toute fonction couleur ci-dessus peut prendre une couleur d'origine précédée du mot-clé from et suivie des définitions des canaux pour la nouvelle couleur de sortie.
En mélangeant deux couleurs : color-mix().
En spécifiant une couleur pour obtenir une couleur contrastée : contrast-color().
En spécifiant deux couleurs, la première pour les thèmes clairs et la seconde pour les thèmes sombres : light-dark().

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 de color sur des propriétés qui ne l'acceptent pas par défaut.

Si currentColor est utilisé comme valeur de la propriété color, il prend alors la valeur héritée de la propriété color.

html

<div class="container">
  La couleur de ce texte est bleue.
  <div class="child"></div>
  Ce bloc est entouré d'une bordure bleue.
</div>

css

.container {
  color: blue;
  border: 1px dashed currentColor;
}
.child {
  background: currentColor;
  height: 9px;
}

Composants de couleur manquants

Chaque composant de toute fonction couleur CSS — sauf pour celles utilisant l'ancienne syntaxe avec des virgules — peut être indiqué par le mot-clé none pour être un composant manquant.

Indiquer explicitement les composants manquants lors de l'interpolation de couleurs est utile pour les cas où vous souhaitez interpoler certains composants de couleur mais pas d'autres. Pour tous les autres usages, un composant manquant aura effectivement une valeur nulle dans l'unité appropriée : 0, 0% ou 0deg. Par exemple, les couleurs suivantes sont équivalentes lorsqu'elles sont utilisées en dehors de l'interpolation :

css

/* Ces valeurs sont équivalentes */
color: oklab(50% none -0.25);
color: oklab(50% 0 -0.25);

/* Ces valeurs sont équivalentes */
background-color: hsl(none 100% 50%);
background-color: hsl(0deg 100% 50%);

Interpolation

L'interpolation des couleurs a lieu avec les dégradés, les transitions, et les animations.

Lors de l'interpolation de valeurs <color>, elles sont d'abord converties dans un espace colorimétrique donné, puis chaque composant des valeurs calculées est interpolé linéairement, la vitesse de l'interpolation étant déterminée par la fonction d'accélération dans les transitions et animations. L'espace colorimétrique d'interpolation par défaut est Oklab, mais il peut être remplacé via <color-interpolation-method> dans certaines notations fonctionnelles liées à la couleur.

Interpolation avec composants manquants

Interpolation de couleurs dans le même espace

Lorsque l'on interpole des couleurs qui sont exactement dans l'espace colorimétrique d'interpolation, les composants manquants d'une couleur sont remplacés par les valeurs existantes des mêmes composants de l'autre couleur. Par exemple, les deux expressions suivantes sont équivalentes :

css

color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30))
color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30))

Note : Si un composant est manquant dans les deux couleurs, ce composant sera manquant après l'interpolation.

Interpolation de couleurs d'espaces différents : composants analogues

Si une couleur à interpoler n'est pas dans l'espace colorimétrique d'interpolation, ses composants manquants sont transférés dans la couleur convertie en fonction des composants analogues de la même catégorie, comme décrit dans le tableau suivant :

Catégorie	Composants analogues
Rouges	`R`, `X`
Verts	`G`, `Y`
Bleus	`B`, `Z`
Luminosité	`L`
Colorimétrie	`C`, `S`
Teinte	`H`
a	`a`
b	`b`

Par exemple :

X (0.2) dans color(xyz 0.2 0.1 0.6) est analogue à R (50%) dans rgb(50% 70% 30%).
H (0deg) dans hsl(0deg 100% 80%) est analogue à H (140) dans oklch(80% 0.1 140).

En utilisant OkLCh comme espace colorimétrique d'interpolation et les deux couleurs ci-dessous comme exemple :

css

lch(80% 30 none)
color(display-p3 0.7 0.5 none)

La procédure de prétraitement est la suivante :

Remplacez les composants manquants dans les deux couleurs par une valeur nulle :
css
```
lch(80% 30 0)
color(display-p3 0.7 0.5 0)
```
Convertissez les deux couleurs dans l'espace colorimétrique d'interpolation :
css
```
oklch(83.915% 0.0902 0.28)
oklch(63.612% 0.1522 78.748)
```
Si un composant des couleurs converties est analogue à un composant manquant dans la couleur d'origine correspondante, remettez-le comme composant manquant :
css
```
oklch(83.915% 0.0902 none)
oklch(63.612% 0.1522 78.748)
```
Remplacez tout composant manquant par le même composant de l'autre couleur convertie :
css
```
oklch(83.915% 0.0902 78.748)
oklch(63.612% 0.1522 78.748)
```

Accessibilité

Certaines personnes ont des difficultés à distinguer les couleurs. La recommandation WCAG 2.2 déconseille fortement d'utiliser la couleur comme seul moyen de transmettre un message, une action ou un résultat. Voir couleur et contraste des couleurs 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()>   |
  <ictcp()>   |
  <jzazbz()>  |
  <jzczhz()>  |
  <alpha()>   |
  <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 ] ]? )  

<ictcp()> = 
  ictcp( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<jzazbz()> = 
  jzazbz( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<jzczhz()> = 
  jzczhz( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<alpha()> = 
  alpha( [ from <color> ] [ / [ <alpha-value> | none ] ]? )  

<color()> = 
  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> = 
  <predefined-rgb-params>  |
  <xyz-params>             

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}  

<predefined-rgb> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  rec2100-pq         |
  rec2100-hlg        |
  rec2100-linear     

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65

Exemples

Exploration des valeurs de couleur

Dans cet exemple, nous fournissons un <div> et un champ de saisie texte. Saisir une couleur valide dans le champ applique cette couleur au <div>, ce qui vous permet de tester nos valeurs de couleur.

HTML

html

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

div {
  height: 200px;
  width: 200px;
}

const inputElem = document.querySelector("input");
const divElem = document.querySelector("div");

function validTextColor(stringToTest) {
  if (stringToTest === "inherit" || stringToTest === "transparent") {
    return false;
  }

  const div = document.createElement("div");
  div.style.color = stringToTest;
  return !!div.style.color;
}

inputElem.addEventListener("input", () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = "";
  } else {
    divElem.removeAttribute("style");
    divElem.textContent = "Valeur de couleur invalide";
  }
});

Résultat

Génération de couleurs sRGB entièrement saturées

Cet exemple présente des couleurs sRGB entièrement saturées dans l'espace colorimétrique sRGB.

HTML

html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}

css

div:nth-child(1) {
  background-color: hsl(0 100% 50%);
}
div:nth-child(2) {
  background-color: hsl(30 100% 50%);
}
div:nth-child(3) {
  background-color: hsl(60 100% 50%);
}
div:nth-child(4) {
  background-color: hsl(90 100% 50%);
}
div:nth-child(5) {
  background-color: hsl(120 100% 50%);
}
div:nth-child(6) {
  background-color: hsl(150 100% 50%);
}
div:nth-child(7) {
  background-color: hsl(180 100% 50%);
}
div:nth-child(8) {
  background-color: hsl(210 100% 50%);
}
div:nth-child(9) {
  background-color: hsl(240 100% 50%);
}
div:nth-child(10) {
  background-color: hsl(270 100% 50%);
}
div:nth-child(11) {
  background-color: hsl(300 100% 50%);
}
div:nth-child(12) {
  background-color: hsl(330 100% 50%);
}

Résultat

Création de différentes nuances de rouge

Cet exemple montre des rouges de différentes nuances dans l'espace colorimétrique sRGB.

HTML

html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  box-sizing: border-box;
  height: 80px;
  margin: 10px;
  width: 80px;
}

css

div:nth-child(1) {
  background-color: hsl(0 100% 0%);
}
div:nth-child(2) {
  background-color: hsl(0 100% 20%);
}
div:nth-child(3) {
  background-color: hsl(0 100% 40%);
}
div:nth-child(4) {
  background-color: hsl(0 100% 60%);
}
div:nth-child(5) {
  background-color: hsl(0 100% 80%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 100%);
  border: solid;
}

Résultat

Création de rouges de différentes saturations

Cet exemple montre des rouges de différentes saturations dans l'espace colorimétrique sRGB.

HTML

html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}

css

div:nth-child(1) {
  background-color: hsl(0 0% 50%);
}
div:nth-child(2) {
  background-color: hsl(0 20% 50%);
}
div:nth-child(3) {
  background-color: hsl(0 40% 50%);
}
div:nth-child(4) {
  background-color: hsl(0 60% 50%);
}
div:nth-child(5) {
  background-color: hsl(0 80% 50%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 50%);
}

Résultat

Spécifications

Specification
CSS Color Module Level 4 # color-syntax

Compatibilité des navigateurs

Voir aussi

La propriété opacity qui définit la transparence au niveau de l'élément
Le type de donnée <hue> représentant l'angle de teinte d'une couleur
Les propriétés courantes color, background-color, border-color, box-shadow, outline-color, text-shadow utilisant <color>
La fonction color()
Appliquer une couleur aux éléments HTML avec CSS
Utiliser les couleurs relatives
Nouvelles fonctions, dégradés et teintes dans CSS Colors (Niveau 4) sur le blog MDN (2023)

Help improve MDN

Learn how to contribute

This page was last modified on ⁨13 oct. 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content