color()

Syntaxe

/* Valeurs absolues */
color(display-p3 1 0.5 0);
color(display-p3 1 0.5 0 / .5);

/* Valeurs relatives */
color(from green srgb r g b / 0.5)
color(from #123456 xyz calc(x + 0.75) y calc(z - 0.35))

Valeurs

Vous trouverez ci-dessous la description des valeurs autorisées pour les couleurs absolues et relatives.

Syntaxe de valeur absolue

color(colorspace c1 c2 c3[ / A])

Les paramètres sont les suivants :

colorspace

Un <ident> indiquant un des espaces colorimétriques prédéfinis : srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50 ou xyz-d65.

c1, c2, c3

Chaque valeur peut être écrite comme un nombre (<number>), un pourcentage (<percentage>), ou le mot-clé none (équivalent à 0 dans ce cas). Ces valeurs représentent les composantes pour l'espace colorimétrique. Avec une valeur <number>, généralement, 0 à 1 représente les bornes de l'espace colorimétrique. Les valeurs hors de cette plage sont autorisées mais seront hors du gamut de l'espace colorimétrique donné. Avec une valeur en pourcentage, 100% représente 1 et 0% représente 0.

A Facultatif

Une valeur <alpha-value> représentant la valeur du canal alpha de la couleur, où le nombre 0 correspond à 0% (totalement transparent) et 1 à 100% (totalement opaque). Le mot-clé none peut aussi être utilisé pour indiquer explicitement l'absence de canal alpha. Si la valeur du canal A n'est pas précisée, elle vaut par défaut 100%. Si elle est présente, elle est précédée d'un slash (/).

Syntaxe de valeur relative

color(from <color> colorspace c1 c2 c3[ / A])

Les paramètres sont les suivants :

from <color>

Le mot-clé from est toujours présent lors de la définition d'une couleur relative, suivi d'une valeur <color> représentant la couleur d'origine. Il s'agit de la couleur de base sur laquelle la couleur relative est fondée. La couleur d'origine peut être n'importe quelle syntaxe <color> valide, y compris une autre couleur relative.

colorspace

Un <ident> indiquant l'espace colorimétrique de la couleur de sortie, généralement un des espaces prédéfinis : srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50 ou xyz-d65.

c1, c2, c3

Chaque valeur peut être écrite comme un nombre (<number>), un pourcentage (<percentage>), ou le mot-clé none (équivalent à 0 dans ce cas). Ces valeurs représentent les composantes de la couleur de sortie. Avec une valeur <number>, généralement 0 à 1 représente les bornes de l'espace colorimétrique. Les valeurs hors de cette plage sont autorisées mais seront hors du gamut de l'espace colorimétrique donné. Avec une valeur en pourcentage, 100% représente 1 et 0% représente 0.

A Facultatif

Un <alpha-value> représentant la valeur du canal alpha de la couleur de sortie, où 0 correspond à 0% (totalement transparent) et 1 à 100% (totalement opaque). Le mot-clé none peut aussi être utilisé pour indiquer explicitement l'absence de canal alpha. Si la valeur du canal A n'est pas précisée, elle prend la valeur du canal alpha de la couleur d'origine. Si elle est présente, elle est précédée d'un slash (/).

Définir les composantes de sortie d'une couleur relative

Quand vous utilisez la syntaxe relative dans color(), le navigateur convertit la couleur d'origine dans l'espace colorimétrique définit (si ce n'est pas déjà le cas). La couleur est définie par trois valeurs de canaux de couleur distincts plus une valeur de canal alpha (alpha). Ces valeurs sont disponibles dans la fonction pour définir les composantes de la couleur de sortie :

• Les trois valeurs de canaux de la couleur d'origine sont résolues en <number>. Selon l'espace colorimétrique, elles seront :

  • r, g, b : pour les espaces colorimétriques RGB (srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020)

  • x, y, z : pour les espaces XYZ (xyz, xyz-d50, xyz-d65)

    Note : Ces valeurs sont généralement comprises entre 0 et 1 mais peuvent être hors de cette plage.

    Note : Référencer r, g, b dans un espace XYZ, ou x, y, z dans un espace RGB, ou tout autre caractère, est invalide. Les canaux disponibles doivent correspondre au type d'espace colorimétrique définit.

• alpha : la valeur de transparence, résolue en <number> entre 0 et 1 inclus.

Pour définir une couleur relative, les différents canaux de la couleur de sortie peuvent être exprimés de plusieurs façons. Voici quelques exemples :

Dans les deux premiers exemples ci-dessous, nous utilisons la syntaxe de couleur relative. Cependant, le premier retourne la même couleur que la couleur d'origine et le second retourne une couleur qui n'est pas basée sur la couleur d'origine. Ils ne créent pas vraiment de couleurs relatives ! Il est peu probable que vous utilisiez ces exemples dans une base de code réelle, et vous utiliseriez probablement simplement une valeur de couleur absolue à la place. Nous avons inclus ces exemples comme point de départ pour apprendre la syntaxe relative de color().

Commençons avec une couleur d'origine hsl(0 100% 50%) (équivalent à red). Bien qu'il soit peu probable que vous écriviez les fonctions suivantes car elles retournent la même couleur que la couleur d'origine, cela montre comment utiliser les valeurs de canal de la couleur d'origine comme valeurs de canal de sortie :

color(from hsl(0 100% 50%) srgb r g b)
color(from hsl(0 100% 50%) xyz x y z)

Les couleurs de sortie de ces fonctions sont respectivement color(srgb 1 0 0) et color(xyz-d65 0.412426 0.212648 0.0193173).

Les fonctions suivantes utilisent des valeurs absolues pour les canaux de sortie, produisant des couleurs différentes de la couleur d'origine :

color(from hsl(0 100% 50%) srgb 0.749938 0 0.609579)
/* Couleur calculée : color(srgb 0.749938 0 0.609579) */

color(from hsl(0 100% 50%) xyz 0.75 0.6554 0.1)
/* Couleur calculée : color(xyz-d65 0.75 0.6554 0.1) */

Les fonctions suivantes utilisent deux des valeurs de canal de couleur d'origine pour les valeurs de canal de couleur de sortie (r et b, et x et y, respectivement), mais utilisent une nouvelle valeur pour l'autre valeur de canal de sortie (g et z, respectivement), créant une couleur relative basée sur la couleur d'origine dans chaque cas :

color(from hsl(0 100% 50%) srgb r 1 b)
/* Couleur calculée : color(srgb 1 1 0) */

color(from hsl(0 100% 50%) xyz x y 0.5)
/* Couleur calculée : color(xyz-d65 0.412426 0.212648 0.5) */

Dans les exemples que nous avons vus jusqu'à présent dans cette section, les canaux alpha n'ont pas été explicitement spécifiés pour les couleurs d'origine ou de sortie. Lorsque le canal alpha de la couleur de sortie n'est pas spécifié, il prend la même valeur que le canal alpha de la couleur d'origine. Lorsque le canal alpha de la couleur d'origine n'est pas spécifié (et qu'il ne s'agit pas d'une couleur relative), il prend la valeur 1. Par conséquent, les valeurs du canal alpha d'origine et de sortie sont 1 pour les exemples ci-dessus.

Voyons quelques exemples qui spécifient les valeurs du canal alpha d'origine et de sortie. Le premier spécifie que la valeur du canal alpha de sortie est la même que la valeur du canal alpha d'origine, tandis que le second spécifie une valeur différente du canal alpha de sortie, sans rapport avec la valeur du canal alpha d'origine.

color(from hsl(0 100% 50% / 0.8) srgb r g b / alpha)
/* Couleur calculée : color(srgb 1 0 0 / 0.8) */

color(from hsl(0 100% 50% / 0.8) xyz x y z / 0.5)
/* Couleur calculée : color(xyz-d65 0.412426 0.212648 0.0193173 / 0.5) */

Les exemples suivants utilisent les fonctions calc() pour calculer de nouvelles valeurs de canal pour les couleurs de sortie qui sont relatives aux valeurs de canal de couleur d'origine.

color(from hsl(0 100% 50%) srgb calc(r - 0.4) calc(g + 0.1) calc(b + 0.6) / calc(alpha - 0.1))
/* Couleur calculée : color(srgb 0.6 0.1 0.6 / 0.9)  */

color(from hsl(0 100% 50%) xyz calc(x - 0.3) calc(y + 0.3) calc(z + 0.3) / calc(alpha - 0.1))
/* Couleur calculée : color(xyz-d65 0.112426 0.512648 0.319317 / 0.9) */

Syntaxe formelle

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

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

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

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

<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

Utiliser les espaces colorimétriques prédéfinis avec color()

L'exemple suivant montre l'effet de la variation des valeurs de luminosité, d'axe a et d'axe b de la fonction color().

HTML

<div data-color="red-a98-rgb"></div>
<div data-color="red-prophoto-rgb"></div>
<div data-color="green-srgb-linear"></div>
<div data-color="green-display-p3"></div>
<div data-color="blue-rec2020"></div>
<div data-color="blue-srgb"></div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

[data-color="red-a98-rgb"] {
  background-color: color(a98-rgb 1 0 0);
}
[data-color="red-prophoto-rgb"] {
  background-color: color(prophoto-rgb 1 0 0);
}
[data-color="green-srgb-linear"] {
  background-color: color(srgb-linear 0 1 0);
}
[data-color="green-display-p3"] {
  background-color: color(display-p3 0 1 0);
}
[data-color="blue-rec2020"] {
  background-color: color(rec2020 0 0 1);
}
[data-color="blue-srgb"] {
  background-color: color(srgb 0 0 1);
}

Résultat

Utiliser l'espace colorimétrique xyz avec color()

L'exemple suivant montre comment utiliser l'espace colorimétrique xyz pour définir une couleur.

HTML

<div data-color="red"></div>
<div data-color="green"></div>
<div data-color="blue"></div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

[data-color="red"] {
  background-color: color(xyz 45 20 0);
}

[data-color="green"] {
  background-color: color(xyz-d50 0.3 80 0.3);
}

[data-color="blue"] {
  background-color: color(xyz-d65 5 0 50);
}

Résultat

Utiliser les media queries color-gamut avec color()

Cet exemple montre comment utiliser la media query color-gamut pour détecter la prise en charge d'un espace colorimétrique et l'utiliser pour définir une couleur.

HTML

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

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

@media (color-gamut: p3) {
  div {
    background-color: color(display-p3 1 0 0);
  }
}

@media (color-gamut: srgb) {
  div:nth-child(2) {
    background-color: color(srgb 1 0 0);
  }
}

@media (color-gamut: rec2020) {
  div:nth-child(3) {
    background-color: color(rec2020 1 0 0);
  }
}

Résultat

Utiliser les couleurs relatives avec color()

Cet exemple applique trois couleurs de fond différentes à des éléments <div>. Celui du milieu utilise la couleur --base-color telle quelle, tandis que les deux autres utilisent des variantes éclaircies et assombries de cette couleur, définies avec des couleurs relatives.

Les variantes sont définies en passant la propriété personnalisée --base-color à la fonction color(), puis en modifiant les canaux g et b via calc(). La couleur éclaircie ajoute 15% à ces canaux, la couleur assombrie en retire 15%.

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

:root {
  --base-color: orange;
}

#one {
  background-color: color(
    from var(--base-color) display-p3 r calc(g + 0.15) calc(b + 0.15)
  );
}

#two {
  background-color: var(--base-color);
}

#three {
  background-color: color(
    from var(--base-color) display-p3 r calc(g - 0.15) calc(b - 0.15)
  );
}

/* Utiliser @supports pour l'ancienne syntaxe qui exige les valeurs r g b en pourcentage (avec unités) dans les calculs.
   Requis pour Safari 16.4+ */
@supports (color: color(from red display-p3 r g calc(b + 30%))) {
  #one {
    background-color: color(
      from var(--base-color) display-p3 r calc(g + 15%) calc(b + 15%)
    );
  }

  #three {
    background-color: color(
      from var(--base-color) display-p3 r calc(g - 15%) calc(b - 15%)
    );
  }
}

Résultat

Le résultat est le suivant :

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété color
• Le type de donnée <color> pour la liste de toutes les notations de couleur
• Utiliser les couleurs relatives
• Outil de conversion de format de couleur
• Module des couleurs CSS
• Fonctionnalité média color-gamut
• Large gamme de couleurs en CSS avec Display-p3 ^(angl.)