oklab()

Syntaxe

/* Valeurs absolues */
oklab(40.1% 0.1143 0.045);
oklab(59.69% 0.1007 0.1191);
oklab(59.69% 0.1007 0.1191 / 0.5);

/* Valeurs relatives */
oklab(from green l a b / 0.5)
oklab(from #123456 calc(l + 0.1) a b / calc(alpha * 0.9))
oklab(from hsl(180 100% 50%) calc(l - 0.1) a b)

Valeurs

Voici les descriptions des valeurs autorisées pour les couleurs absolues et relatives.

Syntaxe des valeurs absolues

oklab(L a b[ / A])

Les paramètres sont les suivants :

L

Un nombre (<number>) entre 0 et 1, un pourcentage (<percentage>) entre 0% et 100%, ou le mot-clé none (équivalent à 0% dans ce cas). Cette valeur définit la luminosité perçue de la couleur. Le nombre 0 correspond à 0% (noir) et le nombre 1 correspond à 100% (blanc).

a

Un nombre (<number>) entre -0.4 et 0.4, un pourcentage (<percentage>) entre -100% et 100%, ou le mot-clé none (équivalent à 0% dans ce cas). Cette valeur définit la distance de la couleur le long de l'axe a dans l'espace de couleur Oklab, qui détermine à quel point la couleur est verte (en se déplaçant vers -0.4) ou rouge (en se déplaçant vers +0.4). Notez que ces valeurs sont signées (permettant des valeurs positives et négatives) et théoriquement illimitées, ce qui signifie que vous pouvez définir des valeurs en dehors des limites ±0.4 (±100%). En pratique, les valeurs ne peuvent pas dépasser ±0.5.

b

Un nombre (<number>) entre -0.4 et 0.4, un pourcentage (<percentage>) entre -100% et 100%, ou le mot-clé none (équivalent à 0% dans ce cas). Cette valeur définit la distance de la couleur le long de l'axe b dans l'espace de couleur Oklab, qui détermine à quel point la couleur est bleue (en se déplaçant vers -0.4) ou jaune (en se déplaçant vers +0.4). Notez que ces valeurs sont signées (permettant des valeurs positives et négatives) et théoriquement illimitées, ce qui signifie que vous pouvez définir des valeurs en dehors des limites ±0.4 (±100%). En pratique, les valeurs ne peuvent pas dépasser ±0.5.

A Facultatif

Une valeur <alpha-value> représentant la valeur du canal alpha de la couleur, où le nombre 0 correspond à 0% (entièrement transparent) et 1 correspond à 100% (entièrement opaque). De plus, le mot-clé none peut être utilisé pour indiquer explicitement l'absence de canal alpha. Si la valeur du canal A n'est pas explicitement définie, elle prend par défaut la valeur 100%. Si elle est incluse, la valeur est précédée d'une barre oblique (/).

Syntaxe des valeurs relatives

oklab(from <color> L a b[ / A])

Les paramètres sont les suivants :

from <color>

Le mot-clé from est toujours inclus lors de la définition d'une couleur relative, suivi d'une valeur <color> représentant la couleur d'origine. C'est la couleur originale sur laquelle la couleur relative est basée. La couleur d'origine peut être n'importe quelle syntaxe <color> valide, y compris une autre couleur relative.

L

Un nombre (<number>) entre 0 et 1, un pourcentage (<percentage>) entre 0% et 100%, ou le mot-clé none (équivalent à 0% dans ce cas). Cette valeur représente la luminosité de la couleur de sortie. Le nombre 0 correspond à 0% (noir) et le nombre 1 correspond à 100% (blanc).

a

Un nombre (<number>) entre -0.4 et 0.4, un pourcentage (<percentage>) entre -100% et 100%, ou le mot-clé none (équivalent à 0% dans ce cas). Cette valeur représente la distance de la couleur de sortie le long de l'axe a dans l'espace de couleur Oklab, qui détermine à quel point la couleur est verte (en se déplaçant vers -0.4) ou rouge (en se déplaçant vers +0.4). Notez que ces valeurs sont signées (permettant des valeurs positives et négatives) et théoriquement illimitées, ce qui signifie que vous pouvez définir des valeurs en dehors des limites ±0.4 (±100%). En pratique, les valeurs ne peuvent pas dépasser ±0.5.

b

Un nombre (<number>) entre -0.4 et 0.4, un pourcentage (<percentage>) entre -100% et 100%, ou le mot-clé none (équivalent à 0% dans ce cas). Cette valeur représente la distance de la couleur de sortie le long de l'axe b dans l'espace de couleur Oklab, qui détermine à quel point la couleur est bleue (en se déplaçant vers -0.4) ou jaune (en se déplaçant vers +0.4). Notez que ces valeurs sont signées (permettant des valeurs positives et négatives) et théoriquement illimitées, ce qui signifie que vous pouvez définir des valeurs en dehors des limites ±0.4 (±100%). En pratique, les valeurs ne peuvent pas dépasser ±0.5.

A Facultatif

Une valeur <alpha-value> représentant la valeur du canal alpha de la couleur de sortie, où le nombre 0 correspond à 0% (entièrement transparent) et 1 correspond à 100% (entièrement opaque). De plus, le mot-clé none peut être utilisé pour indiquer explicitement l'absence de canal alpha. Si la valeur du canal A n'est pas explicitement définie, elle prend par défaut la valeur du canal alpha de la couleur d'origine. Si elle est incluse, la valeur est précédée d'une barre oblique (/).

Définition des composants des canaux de couleur de sortie relative

Lors de l'utilisation de la syntaxe des couleurs relatives dans une fonction oklab(), le navigateur convertit la couleur d'origine en une couleur Oklab équivalente (si elle n'est pas déjà définie comme telle). La couleur est définie comme trois valeurs de canaux de couleur distinctes — l (luminosité), a (axe vert/rouge), et b (axe bleu/jaune) — plus une valeur de canal alpha (alpha). Ces valeurs de canaux sont rendues disponibles dans la fonction pour être utilisées lors de la définition des valeurs des canaux de couleur de sortie :

• La valeur du canal l est résolue en un <number> entre 0 et 1, inclus.
• Les canaux a et b sont chacun résolus en un <number> entre -0.4 et 0.4, inclus.
• Le canal alpha est résolu en un <number> entre 0 et 1, inclus.

Lors de la définition d'une couleur relative, les différents canaux de la couleur de sortie peuvent être exprimés de plusieurs manières différentes. Ci-dessous, nous étudierons quelques exemples pour illustrer ceux-ci.

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

Commençons par une couleur d'origine de hsl(0 100% 50%) (équivalent à red). La fonction suivante produit la même couleur que la couleur d'origine — elle utilise les valeurs des canaux l, a, et b de la couleur d'origine (0.627966, 0.22488, et 0.125859) comme valeurs des canaux de sortie :

oklab(from hsl(0 100% 50%) l a b)

La couleur de sortie de cette fonction est oklab(0.627966 0.22488 0.125859).

La fonction suivante utilise des valeurs absolues pour les valeurs des canaux de la couleur de sortie, produisant une couleur complètement différente non basée sur la couleur d'origine :

oklab(from hsl(0 100% 50%) 42.1% 0.165 -0.101)

Dans le cas ci-dessus, la couleur de sortie est oklab(0.421 0.165 -0.101).

La fonction suivante crée une couleur relative basée sur la couleur d'origine :

oklab(from hsl(0 100% 50%) l -0.3 b)

Cet exemple :

• Convertit la couleur d'origine hsl() en une couleur oklab() équivalente — oklab(0.627966 0.22488 0.125859).
• Définit les valeurs des canaux L et b pour la couleur de sortie à celles de l'équivalent oklab() d'origine des canaux L et b — ces valeurs sont 0.627966 et 0.125859, respectivement.
• Définit la valeur du canal a de la couleur de sortie à une nouvelle valeur non basée sur la couleur d'origine : -0.3.

La couleur de sortie finale est oklab(0.627966 -0.3 0.125859).

Dans les exemples que nous avons vus jusqu'à présent dans cette section, les canaux alpha n'ont pas été explicitement définis pour les couleurs d'origine ou de sortie. Lorsque le canal alpha de la couleur de sortie n'est pas défini, il prend par défaut 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 défini (et qu'il ne s'agit pas d'une couleur relative), il prend par défaut la valeur 1. Par conséquent, les valeurs des canaux alpha d'origine et de sortie sont 1 pour les exemples ci-dessus.

Examinons quelques exemples qui définissent les valeurs des canaux alpha d'origine et de sortie. Le premier définit la valeur du canal alpha de sortie comme étant la même que la valeur du canal alpha d'origine, tandis que le second définit une valeur différente du canal alpha de sortie, non liée à la valeur du canal alpha d'origine.

oklab(from hsl(0 100% 50% / 0.8) l a b / alpha)
/* Couleur de sortie calculée : oklab(0.627966 0.22488 0.125859 / 0.8) */

oklab(from hsl(0 100% 50% / 0.8) l a b / 0.5)
/* Couleur de sortie calculée : oklab(0.627966 0.22488 0.125859 / 0.5) */

Dans l'exemple suivant, la couleur d'origine hsl() est à nouveau convertie vers l'équivalent oklab() — oklab(0.627966 0.22488 0.125859). Les calculs calc() sont appliqués aux valeurs L, a, b, et A, résultant en une couleur de sortie de oklab(0.827966 0.14488 -0.0741406 / 0.9) :

oklab(from hsl(0 100% 50%) calc(l + 0.2) calc(a - 0.08) calc(b - 0.2) / calc(alpha - 0.1))

Syntaxe formelle

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

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

Exemples

Ajustement de la luminosité

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

HTML

<div data-color="red-dark"></div>
<div data-color="red"></div>
<div data-color="red-light"></div>

<div data-color="green-dark"></div>
<div data-color="green"></div>
<div data-color="green-light"></div>

<div data-color="blue-dark"></div>
<div data-color="blue"></div>
<div data-color="blue-light"></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
div {
  height: 50px;
  flex: 0 0 28%;
  border: 1px solid black;
}

[data-color="red-dark"] {
  background-color: oklab(0.05 0.4 0.4);
}
[data-color="red"] {
  background-color: oklab(0.5 0.4 0.4);
}
[data-color="red-light"] {
  background-color: oklab(0.95 0.4 0.4);
}

[data-color="green-dark"] {
  background-color: oklab(5% -100% 0.4);
}
[data-color="green"] {
  background-color: oklab(50% -100% 0.4);
}
[data-color="green-light"] {
  background-color: oklab(95% -100% 0.4);
}

[data-color="blue-dark"] {
  background-color: oklab(0.05 -0.3 -0.4);
}
[data-color="blue"] {
  background-color: oklab(0.5 -0.3 -0.4);
}
[data-color="blue-light"] {
  background-color: oklab(0.95 -0.3 -0.4);
}

Résultat

Ajustement de l'opacité

L'exemple suivant montre l'effet de la variation de la valeur A (alpha) de la fonction oklab(). Les éléments red et red-alpha se superposent à l'élément #background-div pour démontrer l'effet de l'opacité. Donner à l'élément red-alpha une opacité de 0.4 le rend plus transparent que l'élément red.

HTML

<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: lightblue;
  width: 150px;
  height: 40px;
}

[data-color="red"] {
  background-color: oklab(0.628 0.225 0.126);
}
[data-color="red-alpha"] {
  background-color: oklab(0.628 0.225 0.126 / 0.4);
}

Résultat

Ajustement des axes de couleur

Cet exemple démontre les effets de la définition des valeurs a et b de la fonction oklab() aux extrémités et aux points médians de l'axe a et de l'axe b, respectivement. L'axe a va du vert (-0.4) au rouge (0.4) et l'axe b va du jaune (-0.4) au bleu (0.4).

HTML

<div data-color="red-yellow"></div>
<div data-color="red-zero"></div>
<div data-color="red-blue"></div>

<div data-color="zero-yellow"></div>
<div data-color="zero-zero"></div>
<div data-color="zero-blue"></div>

<div data-color="green-yellow"></div>
<div data-color="green-zero"></div>
<div data-color="green-blue"></div>

CSS

En utilisant la propriété CSS background-color, nous faisons varier les valeurs a et b de la fonction de couleur oklab() le long de l'axe a et de l'axe b, montrant les effets des valeurs maximales, médianes et minimales dans chaque cas.

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
div {
  height: 50px;
  flex: 0 0 28%;
  border: 1px solid black;
}

/* Maximum de l'axe a, axe b variable */
[data-color="red-yellow"] {
  background-color: oklab(0.5 0.4 0.4);
}
[data-color="red-zero"] {
  background-color: oklab(0.5 0.4 0);
}
[data-color="red-blue"] {
  background-color: oklab(0.5 0.4 -0.4);
}

/* Centre de l'axe a, axe b variable */
[data-color="zero-yellow"] {
  background-color: oklab(0.5 0 0.4);
}
[data-color="zero-zero"] {
  background-color: oklab(0.5 0 0);
}
[data-color="zero-blue"] {
  background-color: oklab(0.5 0 -0.4);
}

/* Minimum de l'axe a, axe b variable */
[data-color="green-yellow"] {
  background-color: oklab(0.5 -0.4 0.4);
}
[data-color="green-zero"] {
  background-color: oklab(0.5 -0.4 0);
}
[data-color="green-blue"] {
  background-color: oklab(0.5 -0.4 -0.4);
}

Résultat

La colonne de gauche est à l'extrémité jaune (-0.4) de l'axe b et la colonne de droite est à l'extrémité bleue (0.4). La rangée du haut affiche les couleurs à l'extrémité rouge de l'axe a (-0.4) et la rangée du bas est à l'extrémité verte (0.4). La colonne et la rangée du milieu sont aux points médians de chaque axe, la cellule du milieu étant grise ; elle ne contient ni rouge, ni vert, ni jaune, ni bleu, avec une valeur 0 pour les deux axes.

Dégradés linéaires le long de l'axe a et de l'axe b

Cet exemple inclut des dégradés linéaires pour démontrer la progression des valeurs de la fonction oklab() le long de l'axe a (du rouge au vert) et le long de l'axe b (du jaune au bleu). Dans chaque image de dégradé, un axe reste statique tandis que l'autre axe progresse de valeurs faibles à élevées.

<div data-color="red-to-green-yellow">
  <span>rouge</span><span>`b`= -0.4 (jaune)</span><span>vert</span>
</div>
<div data-color="red-to-green-zero">
  <span>rouge</span><span>ni jaune ni bleu</span><span>vert</span>
</div>
<div data-color="red-to-green-blue">
  <span>rouge</span><span>`b`= 0.4 (bleu)</span><span>vert</span>
</div>

<div data-color="yellow-to-blue-red">
  <span>jaune</span><span>`a` = -0.4 (rouge)</span><span>bleu</span>
</div>
<div data-color="yellow-to-blue-zero">
  <span>jaune</span><span>ni rouge ni vert</span><span>bleu</span>
</div>
<div data-color="yellow-to-blue-green">
  <span>jaune</span><span>`a` = 0.4 (vert)</span><span>bleu</span>
</div>

CSS

div {
  height: 50px;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
span {
  background-color: #ffffffcc;
  padding: 3px;
}

/* Dégradés de l'axe a */
[data-color="red-to-green-yellow"] {
  background-image: linear-gradient(to right, oklab(50% 0.4 0.4), oklab(50% -0.4 0.4));
}
[data-color="red-to-green-zero"] {
  background-image: linear-gradient(to right, oklab(50% 0.4 0), oklab(50% -0.4 0));
}
[data-color="red-to-green-blue"] {
  background-image: linear-gradient(to right, oklab(50% 0.4 -0.4), oklab(50% -0.4 -0.4));
}

/* Dégradés de l'axe b */
[data-color="yellow-to-blue-red"] {
  background-image: linear-gradient(to right, oklab(50% 0.4 0.4), oklab(50% 0.4 -0.4));
}
[data-color="yellow-to-blue-zero"] {
  background-image: linear-gradient(to right, oklab(50% 0 0.4), oklab(50% 0 -0.4));
}
[data-color="yellow-to-blue-green"] {
  background-image: linear-gradient(to right, oklab(50% -0.4 0.4),oklab(50% -0.4 -0.4));
}

Résultat

Utilisation des couleurs relatives avec oklab()

Cet exemple stylise trois éléments <div> avec différentes couleurs de fond. Le <div> du milieu conserve la --base-color non modifiée, tandis que ceux de gauche et de droite reçoivent des variantes éclaircies et assombries de cette --base-color.

Ces variantes sont définies en utilisant des couleurs relatives — la propriété personnalisée --base-color est passée dans une fonction oklab(), et les couleurs de sortie ont leur canal de luminosité modifié pour obtenir l'effet désiré via une fonction calc(). La couleur éclaircie a 0.15 (15%) ajouté au canal de luminosité, et la couleur assombrie a 0.15 (15%) soustrait du canal de luminosité.

<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: oklab(from var(--base-color) calc(l + 0.15) a b);
}

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

#three {
  background-color: oklab(from var(--base-color) calc(l - 0.15) a b);
}

Résultat

Le résultat est le suivant :

Spécifications

Compatibilité des navigateurs

Voir aussi

• Le type de donnée <color> pour une liste de toutes les notations de couleur
• Les fonctions de couleur lab() et oklch()
• Utilisation des couleurs relatives
• Le module des couleurs CSS
• Un espace de couleur perceptuel pour le traitement des images ^(angl.) sur bottosson.github.io (2023)
• Roue de couleurs OKLAB ^(angl.) sur observablehq.com