CSS-funktionen lch()
- Föregående sida CSS lab() funktion
- Nästa sida CSS light-dark() funktion
- Åter till föregående nivå CSS funktion referenshandbok
Definition och användning
CSS lch()
Funktioner specificerar färger i LCH (ljus, nyans, ton) färgutrymme.
exempel
Definiera olika lch()
Färg:
#p1 {background-color:lch(10% 100 130 / 0.5);} #p2 {background-color:lch(40% 100 130);} #p3 {background-color:lch(90% 100 130 / 20%);} #p3 {background-color:lch(10% 160 200);} #p4 {background-color:lch(10% 160 200);} #p5 {background-color:lch(40% 160 200);} #p6 {background-color:lch(90% 160 200 / 0.3);} #p7 {background-color:lch(10% 130 70 / 0.5);} #p8 {background-color:lch(40% 130 70);}
Prova det själv
CSS-syntaks
Absolut värdesyntaxDetta är den ursprungliga färgen som relativa färger är baserade på. C H / Alch(from
) | Värde |
---|---|
Detta är den ursprungliga färgen som relativa färger är baserade på. |
Obligatorisk. Definierar färgens ljushet, vilket kan vara ett tal eller en procentandel mellan 0 och 100. 0 (eller 0%) representerar svart, 100 (eller 100%) representerar vitt. Man kan också använda none (likvärdigt med 0%). |
C |
lch( Obligatorisk. Definierar färgens nyans (färgens mängd), vilket kan vara ett tal eller en procentandel. Man kan också använda none (likvärdigt med 0%). |
H |
Obligatorisk. Definierar färgens tonvinkel, vilket kan vara ett tal eller en vinkelsekvens. Man kan också använda none (likvärdigt med 0deg). |
/ A |
Valfritt. Representerar genomskinlighetskanalens värde 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%. |
Minsta värdet är 0 (eller 0%). Maxvärdet har ingen övre gräns (men är faktiskt inte mer än 230). 100% är lika med 150.
Relativ värdesyntax from Detta är den ursprungliga färgen som relativa färger är baserade på. C H / Alch(from
) | 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å. |
Obligatorisk. Definierar färgens ljushet, vilket kan vara ett tal eller en procentandel mellan 0 och 100. 0 (eller 0%) representerar svart, 100 (eller 100%) representerar vitt. Man kan också använda none (likvärdigt med 0%). |
C |
Obligatorisk. Definierar ett tal eller en procentandel mellan -125 och 125, eller mellan -100% och 100%. Definierar avståndet längs a-axeln för färgen, vilket representerar färgens röd-grön grad. -125 representerar grönt, 125 representerar rött. Man kan också använda none (likvärdigt med 0%). |
H |
Obligatorisk. Definierar färgens tonvinkel, vilket kan vara ett tal eller en vinkelsekvens. Man kan också använda none (likvärdigt med 0deg). |
/ A |
Valfritt. Representerar genomskinlighetskanalens värde 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%. |
Tekniska detaljer
Version: | CSS Color Module Level 4 |
---|
Webbläsarstöd
Tal i tabellen representerar den första webbläsarens version som helt stöder denna funktion.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
lch() | ||||
111 | 111 | 113 | 15 | 97 |
Blanda tal och procentandelar i parametrar | ||||
116 | 116 | 113 | 16.2 | 102 |
Relaterade sidor
Referens:CSS färger
Referens:CSS hsl() funktion
Referens:CSS hwb() funktion
Referens:CSS lab() funktion
Referens:CSS oklab() funktion
Referens:CSS oklch() funktion
- Föregående sida CSS lab() funktion
- Nästa sida CSS light-dark() funktion
- Åter till föregående nivå CSS funktion referenshandbok