Funzione oklch() in CSS

Definizione e uso

Definizione e uso in CSS oklch() La funzione viene utilizzata per specificare i colori nello spazio di colore OKLCH.

oklch() La funzione è molto intuitiva: devi considerare la quantità di luminosità/brightessità (L) utilizzata, l'intensità del tono di grigio (C), e il colore stesso (H). Inoltre, puoi scegliere di aggiungere un valore di canale di trasparenza (A), che rappresenta l'opacità del colore.

Esempi

Definire diversi oklch() Colore:

/* Diversi livelli di luminosità verdi */
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ Giallo a diverse luminosità /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ Rosso a diverse luminosità */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

Prova personalmente

Sintassi CSS

Sintassi dei valori assoluti

oklch(L C H / A)
Valore Descrizione
L

Obbligatorio. Definisce la luminosità percepita del colore (da 0 a 1 tra numeri o da 0% a 100% tra percentuali).

0 (o 0%) rappresenta il nero, 1 (o 100%) rappresenta il bianco.

Puoi anche usare none (equivalente a 0%).
C

Obbligatorio. Definisce la cromia del colore (quantità del colore), può essere un numero o una percentuale.

Deve essere un numero tra -0.4 e 0.4 o una percentuale tra -100% e 100%.

Al minimo (0% o -0.4), il colore è più vicino al grigio.

Puoi anche usare none (equivalente a 0%).
H

Obbligatorio. Definisce il colore stesso, può essere un numero o un angolo (da 0 a 360).

Puoi anche usare none (equivalente a 0deg).
/ A

Opzionale. Rappresenta il valore del canale di trasparenza del colore (0% o 0 rappresenta trasparenza completa, 100% o 100 rappresentano opacità completa).

Puoi anche usare none (che rappresenta canale di trasparenza nullo).

Il valore predefinito è 100%.

Sintassi dei valori relativi

oklch(from color L C H / A)
Valore Descrizione
from color

Inizia con il termine from, seguito dal valore del colore che rappresenta il colore originale.

Questo è il colore originale su cui si basano i colori relativi.
L

Obbligatorio. Definisce la luminosità percepita del colore (da 0 a 1 tra numeri o da 0% a 100% tra percentuali).

0 (o 0%) rappresenta il nero, 1 (o 100%) rappresenta il bianco.

Puoi anche usare none (equivalente a 0%).
C

Obbligatorio. Definisce la cromia del colore (quantità del colore), può essere un numero o una percentuale.

Deve essere un numero tra -0.4 e 0.4 o una percentuale tra -100% e 100%.

Al minimo (0% o -0.4), il colore è più vicino al grigio.

Puoi anche usare none (equivalente a 0%).
H

Obbligatorio. Definisce il colore stesso, può essere un numero o un angolo (da 0 a 360).

Puoi anche usare none (equivalente a 0deg).
/ A

Opzionale. Rappresenta il valore del canale di trasparenza del colore (0% o 0 rappresenta trasparenza completa, 100% o 100 rappresentano opacità completa).

Puoi anche usare none (che rappresenta canale di trasparenza nullo). Il valore predefinito è 100%.

Dettagli tecnici

Versione: CSS Color Module Level 4

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la funzione.

Chrome Edge Firefox Safari Opera
oklch()
111 111 113 15.4 97
Mischiare numeri e percentuali nei parametri
116 116 113 16.2 102

Pagine correlate

Riferimento:Colore CSS

Riferimento:Funzione hsl() di CSS

Riferimento:Funzione CSS hwb()

Riferimento:Funzione CSS lab()

Riferimento:Funzione CSS lch()

Riferimento:Funzione CSS oklab()