oklch()

Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La notation fonctionnelle oklch() exprime une couleur donnée dans l'espace de couleur OKLCH. Cet espace utilise le même axe L (luminosité) que oklab(), mais utilise des coordonnées polaires C (chroma) et H (pour la teinte, hue en anglais).

Syntaxe

css
oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)

Valeurs

oklch(L C H [/ A])

L indique la luminosité perçue et est exprimée comme un pourcentage (type <percentage>) compris entre 0%, pour le noir, et 100%, pour le blanc.

Le deuxième argument, C, indique la chroma (indiquant en quelque sorte la quantité de couleur). Sa valeur minimale est 0 et sa valeur maximale est théoriquement infinie, bien qu'elle n'excède pas 0.4 en pratique.

Le troisième argument, H correspond à l'angle pour la teinte (hue en anglais). 0deg pointe selon l'axe positif "a" (un rouge pourpre), 90deg pointe selon l'axe positif "b" (jaune moutarde), 180deg pointe selon l'axe négatif "a" (un cyan vert), et 270deg pointe selon l'axe négatif "b" (bleu ciel).

A (alpha) peut être un nombre (type <number>) compris entre 0 et 1, ou un pourcentage (type <percentage>), où 1 correspond à 100% (opacité complète).

Spécifications

Specification
CSS Color Module Level 4
# ok-lab

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi