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

Syntaxe

/* Couleurs nommées */rebeccapurplealiceblue/* 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> (commeblue oupink),<system-color>, etcurrentColor.
• Par notations hexadécimales :<hex-color> (comme#ff0000).
• Par<color-function>, avec des paramètres dans unespace colorimétrique utilisant des notations fonctionnelles :
  • Espace colorimétriquesRGB :hsl(),hwb(), etrgb().
  • Espace colorimétriqueCIELAB :lab() etlch().
  • Espace colorimétriqueOklab^(angl.) :oklab() etoklch().
  • Autres espaces colorimétriques :color(),device-cmyk().
• En utilisant la syntaxerelative color pour produire une nouvelle couleur à partir d'une couleur existante. Toute fonction couleur ci-dessus peut prendre unecouleur d'origine précédée du mot-cléfrom et suivie des définitions des canaux pour la nouvellecouleur 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 decolor sur des propriétés qui ne l'acceptent pas par défaut.

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

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

.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 lescomposants manquants lors de l'interpolation de couleurs est utile pour les cas où vous souhaitezinterpoler 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% ou0deg. 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 lesdégradés, lestransitions, et lesanimations.

Lors de l'interpolation de valeurs<color>, elles sont d'abord converties dans un espace colorimétrique donné, puis chaque composant desvaleurs calculées est interpolé linéairement, la vitesse de l'interpolation étant déterminée par lafonction 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 :

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 : 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 descomposants analogues de la même catégorie, comme décrit dans le tableau suivant :

Par exemple :

• X (0.2) danscolor(xyz 0.2 0.1 0.6) est analogue àR (50%) dansrgb(50% 70% 30%).
• H (0deg) danshsl(0deg 100% 80%) est analogue àH (140) dansoklch(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 composants manquants 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 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)

4. 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 recommandationWCAG 2.2 déconseille fortement d'utiliser la couleur comme seul moyen de transmettre un message, une action ou un résultat. Voircouleur et contraste des couleurs pour plus d'informations.

Syntaxe formelle

<color> =
<color-base>|
currentColor|
<system-color>|
<contrast-color()>|
<device-cmyk()>|
<light-dark()>

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

<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()> =
light-dark(<color> ,<color>)

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

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

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

<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" />

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 courantescolor,background-color,border-color,box-shadow,outline-color,text-shadow utilisant<color>
• La fonctioncolor()
• 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)