课程表

CSS reference manual

CSS 属性

Valfria kurser

Kursrekommendation:

CodeW3C.com presentatorkorg

CSS oklch() funktion

Föregående sida CSS oklab() funktion
Nästa sida CSS opacity() funktion
Gå tillbaka till föregående nivå CSS function reference manual

Definition och användning

CSS: oklch() Funktionen används för att specificera färg i OKLCH-färgutrymmet.

oklch() Funktionen är mycket intuitiv: Du behöver överväga mängden ljusintensitet / ljusstyrka (L) du använder, styrkan av nyansen (gråton) (C), samt färgen själv (H). Dessutom kan du välja att lägga till ett transparensvärde (A) som representerar färgens ogenomskinlighet.

exempel

Definiera olika oklch() Färg:

/* Olikt ljusintensitet av grönt /
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ Gult med olika ljusheter /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ Röd med olika ljusheter */
#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 själv

CSS-syntax

Absolutt värdes语法

oklch(L C H / A)

Värde	Beskrivning
L	Obligatorisk. Definierar färgens upplevda ljushet, kan vara ett nummer mellan 0 och 1 eller en procentandel mellan 0% och 100%. 0 (eller 0%) representerar svart, 1 (eller 100%) representerar vitt. Man kan också använda none (likvärdigt 0%).
C	Obligatorisk. Definierar färgens nyans (mängden av färgen), kan vara ett nummer eller en procentandel. Måste vara ett nummer mellan -0.4 och 0.4 eller en procentandel mellan -100% och 100%. När minsta värdet (0% eller -0.4) uppnås, är färgen mer nära grå. Man kan också använda none (likvärdigt 0%).
H	Obligatorisk. Definierar färgen själv, kan vara ett nummer eller en vinkel (0 till 360). Man kan också använda none (likvärdigt 0deg).
/ A	Valfritt. Representerar genomskinlighetskanalvärdet för färgen (0% eller 0 representerar helt genomskinlig, 100% eller 100 representerar helt opåverkad). Man kan också använda none (som representerar ingen genomskinlighet). Standardvärdet är 100%.

Relativt värdes语法

oklch(from color L C H / A)

Värde	Beskrivning
from color	Börjar med nyckelordet from, följt av färgvärdet som representerar den ursprungliga färgen. Detta är den ursprungliga färgen som relativa färger är baserade på.
L	Obligatorisk. Definierar färgens upplevda ljushet, kan vara ett nummer mellan 0 och 1 eller en procentandel mellan 0% och 100%. 0 (eller 0%) representerar svart, 1 (eller 100%) representerar vitt. Man kan också använda none (likvärdigt 0%).
C	Obligatorisk. Definierar färgens nyans (mängden av färgen), kan vara ett nummer eller en procentandel. Måste vara ett nummer mellan -0.4 och 0.4 eller en procentandel mellan -100% och 100%. När minsta värdet (0% eller -0.4) uppnås, är färgen mer nära grå. Man kan också använda none (likvärdigt 0%).
H	Obligatorisk. Definierar färgen själv, kan vara ett nummer eller en vinkel (0 till 360). Man kan också använda none (likvärdigt 0deg).
/ A	Valfritt. Representerar genomskinlighetskanalvärdet för färgen (0% eller 0 representerar helt genomskinlig, 100% eller 100 representerar helt opåverkad). Man kan också använda none (som representerar ingen genomskinlighet). Standardvärdet är 100%.