CSS oklch() funktion

definition og brug

CSS- oklch() Funktionen bruges til at specificere farve i OKLCH-farverummet.

oklch() Funktionen er meget intuitiv: Du skal overveje mængden af lysstyrke / lysstyrke (L), intensiteten af farvetone (C), samt farven selv (H). Derudover kan du vælge at tilføje en gennemskinnelighedsværdi (A), som angiver farvens uigennemskinnelighed.

eksempler

definere forskellige oklch() Farve:

/* forskellige lysstyrker af grøn /
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ forskellige lysstyrker af gule /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ forskellige lysstyrker af rød */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

Prøv det selv

CSS syntaks

Absolut værdi语法

oklch(L C H / A)
Værdi Beskrivelse
L

Obligatorisk. Definerer farvens opfattede lysstyrke, kan være et tal mellem 0 og 1 eller en procentdel mellem 0% og 100%.

0 (eller 0%) betyder sort, 1 (eller 100%) betyder hvid.

Man kan også bruge none (lig med 0%).
C

Obligatorisk. Definerer farvespektralværdien (mængden af farve), kan være et tal eller en procentdel.

Må være et tal mellem -0.4 og 0.4 eller en procentdel mellem -100% og 100%.

Mindste værdi (0% eller -0.4) gør farven mere tæt på grå.

Man kan også bruge none (lig med 0%).
H

Obligatorisk. Definerer farven selv, kan være et tal eller en vinkel (0 til 360).

Man kan også bruge none (lig med 0grader).
/ A

Valgfri. Angiver værdien for farvespecifikken kanal (0% eller 0 betyder fuldstændig gennemsigtig, 100% eller 100 betyder fuldstændig uigennemsigtig).

Man kan også bruge none (betyder ingen transparentkanal).

Standardværdien er 100%.

Relative værdi语法

oklch(from color L C H / A)
Værdi Beskrivelse
from color

Begynder med nøglen from, følget af værdien for den oprindelige farve.

Dette er den oprindelige farve, der er baseret på den relative farve.
L

Obligatorisk. Definerer farvens opfattede lysstyrke, kan være et tal mellem 0 og 1 eller en procentdel mellem 0% og 100%.

0 (eller 0%) betyder sort, 1 (eller 100%) betyder hvid.

Man kan også bruge none (lig med 0%).
C

Obligatorisk. Definerer farvespektralværdien (mængden af farve), kan være et tal eller en procentdel.

Må være et tal mellem -0.4 og 0.4 eller en procentdel mellem -100% og 100%.

Mindste værdi (0% eller -0.4) gør farven mere tæt på grå.

Man kan også bruge none (lig med 0%).
H

Obligatorisk. Definerer farven selv, kan være et tal eller en vinkel (0 til 360).

Man kan også bruge none (lig med 0grader).
/ A

Valgfri. Angiver værdien for farvespecifikken kanal (0% eller 0 betyder fuldstændig gennemsigtig, 100% eller 100 betyder fuldstændig uigennemsigtig).

Man kan også bruge none (betyder ingen transparentkanal). Standardværdien er 100%.

Tekniske detaljer

Version: CSS Color Module Level 4

Browserunderstøttelse

Tal i tabellen viser den første browserversion, der fuldt ud understøtter funktionen.

Chrome Edge Firefox Safari Opera
oklch()
111 111 113 15.4 97
Bland brug af tal og procenter i parametrene
116 116 113 16.2 102

Relaterede sider

Referencer:CSS farver

Referencer:CSS hsl() funktion

Referencer:CSS hwb() funktion

Referencer:CSS lab() funktion

Referencer:CSS lch() funktion

Referencer:CSS oklab() funktion