CSS oklch() function

Definition and usage

In CSS oklch() The function is used to specify colors in the OKLCH color space.

oklch() The function is very intuitive: you need to consider the amount of brightness/lightness (L) to be used, the strength of the hue (gray), and the color itself (H). In addition, you can also choose to add a transparency channel value (A), representing the opacity of the color.

Instances

Define different oklch() Color :

/* Vert different levels of green */
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ Jaune de différentes luminosités /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ Rouge de différentes luminosités */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

Essayez-le vous-même

Syntaxe CSS

Syntaxe de valeur absolue

oklch(L C H / A)
Valeur Description
L

Obligatoire. Définit la luminosité perçue de la couleur (un nombre entre 0 et 1 ou un pourcentage entre 0% et 100%).

0 (ou 0%) représente le noir, 1 (ou 100%) représente le blanc.

Vous pouvez également utiliser none (équivalent à 0%).
C

Obligatoire. Définit la chroma (quantité de couleur), qui peut être un nombre ou un pourcentage.

Doit être un nombre entre -0.4 et 0.4 ou un pourcentage entre -100% et 100%.

Lorsque la valeur minimale (0% ou -0.4) est atteinte, la couleur est plus proche du gris.

Vous pouvez également utiliser none (équivalent à 0%).
H

Obligatoire. Définit la couleur elle-même, qui peut être un nombre ou un angle (de 0 à 360).

Vous pouvez également utiliser none (équivalent à 0deg).
/ A

Optionnel. Représente la valeur du canal de transparence de la couleur (0% ou 0 représente une transparence complète, 100% ou 100 représente une opacité complète).

Vous pouvez également utiliser none (représentant un canal de transparence absent).

La valeur par défaut est de 100%.

Syntaxe de valeur relative

oklch(from color L C H / A)
Valeur Description
from color

Commence par le mot-clé from, suivi de la valeur de la couleur originale.

C'est la couleur originale sur laquelle se base la couleur relative.
L

Obligatoire. Définit la luminosité perçue de la couleur (un nombre entre 0 et 1 ou un pourcentage entre 0% et 100%).

0 (ou 0%) représente le noir, 1 (ou 100%) représente le blanc.

Vous pouvez également utiliser none (équivalent à 0%).
C

Obligatoire. Définit la chroma (quantité de couleur), qui peut être un nombre ou un pourcentage.

Doit être un nombre entre -0.4 et 0.4 ou un pourcentage entre -100% et 100%.

Lorsque la valeur minimale (0% ou -0.4) est atteinte, la couleur est plus proche du gris.

Vous pouvez également utiliser none (équivalent à 0%).
H

Obligatoire. Définit la couleur elle-même, qui peut être un nombre ou un angle (de 0 à 360).

Vous pouvez également utiliser none (équivalent à 0deg).
/ A

Optionnel. Représente la valeur du canal de transparence de la couleur (0% ou 0 représente une transparence complète, 100% ou 100 représente une opacité complète).

Vous pouvez également utiliser none (représentant un canal de transparence absent). La valeur par défaut est de 100%.

Détails techniques

Version : CSS Color Module Level 4

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge complètement cette fonction.

Chrome Edge Firefox Safari Opera
oklch()
111 111 113 15.4 97
Mélangez des nombres et des pourcentages dans les paramètres
116 116 113 16.2 102

Pages associées

Référence :Couleurs CSS

Référence :Fonction hsl() CSS

Référence :Fonction hwb() CSS

Référence :Fonction lab() CSS

Référence :Fonction lch() CSS

Référence :Fonction oklab() CSS