<color>

Syntaxe

/* 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 de couleurs relatives 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.

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

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

Composantes de couleur manquantes

Chaque composante 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 une composante manquante.

Indiquer explicitement les composantes manquantes lors de l'interpolation de couleurs est utile pour les cas où vous souhaitez interpoler certaines composantes de couleur mais pas d'autres. Pour tous les autres usages, une composante manquante 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 :

/* 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 composante 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 composantes manquantes

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 composantes manquantes d'une couleur sont remplacées par les valeurs existantes des mêmes composantes de l'autre couleur. Par exemple, les deux expressions suivantes sont équivalentes :

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

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

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

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 :

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

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

1. Remplacez les composantes manquantes dans les deux couleurs par une valeur nulle :

   css

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

2. 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)
   

3. Si une composante des couleurs converties est analogue à une composante manquante dans la couleur d'origine correspondante, remettez-la comme composante manquante :

   css

   oklch(83.915% 0.0902 none)
   oklch(63.612% 0.1522 78.748)
   

4. Remplacez toute composante manquante par la même composante 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>      |
  <contrast-color()>  |
  <device-cmyk()>     |
  <light-dark-color>  

<color-base> = 
  <hex-color>       |
  <color-function>  |
  <named-color>     |
  <color-mix()>     |
  transparent       

<system-color> = 
  AccentColor         |
  AccentColorText     |
  ActiveText          |
  ButtonBorder        |
  ButtonFace          |
  ButtonText          |
  Canvas              |
  CanvasText          |
  Field               |
  FieldText           |
  GrayText            |
  Highlight           |
  HighlightText       |
  LinkText            |
  Mark                |
  MarkText            |
  SelectedItem        |
  SelectedItemText    |
  VisitedText         |
  <deprecated-color>  

<contrast-color()> = 
  contrast-color( [ [ <color> && [ tbd-fg | tbd-bg ] && <target-contrast>? ] | [ <color> && [ tbd-fg | tbd-bg ] && <target-contrast> , <color># ] ] )  

<device-cmyk()> = 
  <legacy-device-cmyk-syntax>  |
  <modern-device-cmyk-syntax>  

<light-dark-color> = 
  light-dark( <color> , <color> )  

<color-function> = 
  <rgb()>        |
  <rgba()>       |
  <hsl()>        |
  <hsla()>       |
  <hwb()>        |
  <lab()>        |
  <lch()>        |
  <oklab()>      |
  <oklch()>      |
  <ictcp()>      |
  <jzazbz()>     |
  <jzczhz()>     |
  <alpha()>      |
  <color()>      |
  <hdr-color()>  

<named-color> = 
  aliceblue             |
  antiquewhite          |
  aqua                  |
  aquamarine            |
  azure                 |
  beige                 |
  bisque                |
  black                 |
  blanchedalmond        |
  blue                  |
  blueviolet            |
  brown                 |
  burlywood             |
  cadetblue             |
  chartreuse            |
  chocolate             |
  coral                 |
  cornflowerblue        |
  cornsilk              |
  crimson               |
  cyan                  |
  darkblue              |
  darkcyan              |
  darkgoldenrod         |
  darkgray              |
  darkgreen             |
  darkgrey              |
  darkkhaki             |
  darkmagenta           |
  darkolivegreen        |
  darkorange            |
  darkorchid            |
  darkred               |
  darksalmon            |
  darkseagreen          |
  darkslateblue         |
  darkslategray         |
  darkslategrey         |
  darkturquoise         |
  darkviolet            |
  deeppink              |
  deepskyblue           |
  dimgray               |
  dimgrey               |
  dodgerblue            |
  firebrick             |
  floralwhite           |
  forestgreen           |
  fuchsia               |
  gainsboro             |
  ghostwhite            |
  gold                  |
  goldenrod             |
  gray                  |
  green                 |
  greenyellow           |
  grey                  |
  honeydew              |
  hotpink               |
  indianred             |
  indigo                |
  ivory                 |
  khaki                 |
  lavender              |
  lavenderblush         |
  lawngreen             |
  lemonchiffon          |
  lightblue             |
  lightcoral            |
  lightcyan             |
  lightgoldenrodyellow  |
  lightgray             |
  lightgreen            |
  lightgrey             |
  lightpink             |
  lightsalmon           |
  lightseagreen         |
  lightskyblue          |
  lightslategray        |
  lightslategrey        |
  lightsteelblue        |
  lightyellow           |
  lime                  |
  limegreen             |
  linen                 |
  magenta               |
  maroon                |
  mediumaquamarine      |
  mediumblue            |
  mediumorchid          |
  mediumpurple          |
  mediumseagreen        |
  mediumslateblue       |
  mediumspringgreen     |
  mediumturquoise       |
  mediumvioletred       |
  midnightblue          |
  mintcream             |
  mistyrose             |
  moccasin              |
  navajowhite           |
  navy                  |
  oldlace               |
  olive                 |
  olivedrab             |
  orange                |
  orangered             |
  orchid                |
  palegoldenrod         |
  palegreen             |
  paleturquoise         |
  palevioletred         |
  papayawhip            |
  peachpuff             |
  peru                  |
  pink                  |
  plum                  |
  powderblue            |
  purple                |
  rebeccapurple         |
  red                   |
  rosybrown             |
  royalblue             |
  saddlebrown           |
  salmon                |
  sandybrown            |
  seagreen              |
  seashell              |
  sienna                |
  silver                |
  skyblue               |
  slateblue             |
  slategray             |
  slategrey             |
  snow                  |
  springgreen           |
  steelblue             |
  tan                   |
  teal                  |
  thistle               |
  tomato                |
  turquoise             |
  violet                |
  wheat                 |
  white                 |
  whitesmoke            |
  yellow                |
  yellowgreen           |
  transparent           

<color-mix()> = 
  color-mix( <color-interpolation-method>? , [ <color> && <percentage [0,100]>? ]# )  

<deprecated-color> = 
  ActiveBorder         |
  ActiveCaption        |
  AppWorkspace         |
  Background           |
  ButtonHighlight      |
  ButtonShadow         |
  CaptionText          |
  InactiveBorder       |
  InactiveCaption      |
  InactiveCaptionText  |
  InfoBackground       |
  InfoText             |
  Menu                 |
  MenuText             |
  Scrollbar            |
  ThreeDDarkShadow     |
  ThreeDFace           |
  ThreeDHighlight      |
  ThreeDLightShadow    |
  ThreeDShadow         |
  Window               |
  WindowFrame          |
  WindowText           

<target-contrast> = 
  <wcag2>  

<legacy-device-cmyk-syntax> = 
  device-cmyk( <number>#{4} )  

<modern-device-cmyk-syntax> = 
  device-cmyk( <cmyk-component>{4} [ / [ <alpha-value> | none ] ]? )  

<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( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

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

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

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

<oklch()> = 
  oklch( [ from <color> ]? [ <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( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<hdr-color()> = 
  color-hdr( [ <color> && <number [0,∞]>? ]#{2} )  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

<wcag2> = 
  wcag2                                           |
  wcag2( [ <number> | [ aa | aaa ] && large? ] )  

<cmyk-component> = 
  <number>      |
  <percentage>  |
  none          

<alpha-value> = 
  <number>      |
  <percentage>  

<legacy-rgb-syntax> = 
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )      

<modern-rgb-syntax> = 
  rgb( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<legacy-rgba-syntax> = 
  rgba( <percentage>#{3} , <alpha-value>? )  |
  rgba( <number>#{3} , <alpha-value>? )      

<modern-rgba-syntax> = 
  rgba( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<legacy-hsl-syntax> = 
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )  

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

<legacy-hsla-syntax> = 
  hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )  

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

<hue> = 
  <number>  |
  <angle>   

<colorspace-params> = 
  <custom-params>          |
  <predefined-rgb-params>  |
  <xyz-params>             

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+  

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

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

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

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

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

<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

<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;
}

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

<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;
}

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

<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;
}

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

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)