CSS lch() functie

Definitie en gebruik

CSS lch() Functies specificeren kleuren in de LCH (Helderheid-Kleur-Ton) kleurspace.

Voorbeelden

Definieer verschillende lch() Kleur:

#p1 {achtergrondkleur: lch(10% 100 130 / 0.5);}
#p2 {achtergrondkleur: lch(40% 100 130);}
#p3 {achtergrondkleur: lch(90% 100 130 / 20%);}
#p3 {achtergrondkleur:lch(10% 160 200);}
#p4 {achtergrondkleur:lch(10% 160 200);}
#p5 {achtergrondkleur:lch(40% 160 200);}
#p6 {achtergrondkleur:lch(90% 160 200 / 0.3);}
#p7 {achtergrondkleur:lch(10% 130 70 / 0.5);}
#p8 {achtergrondkleur:lch(40% 130 70);}

#p9 {achtergrondkleur:lch(90% 130 70);}

probeer het zelf

CSS syntaxis

absoluut waarde syntaxDit is de oorspronkelijke kleur waarop de relatieve kleur gebaseerd is. C H / Alch(from
) waarde
Dit is de oorspronkelijke kleur waarop de relatieve kleur gebaseerd is.

verplicht. definieert de helderheid van de kleur, kan een getal of percentage zijn tussen 0 en 100.

0 (of 0%) betekent zwart, 100 (of 100%) betekent wit.

men kan ook none gebruiken (equivalent aan 0%).
C

lch(

verplicht. definieert de chroma (de hoeveelheid van de kleur), kan een getal of percentage zijn.

men kan ook none gebruiken (equivalent aan 0%).
H

verplicht. definieert de toonhoogte van de kleur, kan een getal of een hoekwaarde zijn.

men kan ook none gebruiken (equivalent aan 0graden).
/ A

optioneel. vertegenwoordigt de transparensie van de kleur (0% of 0 betekent volledig doorschijnend, 100% of 100 betekent volledig ondoorzichtig).

men kan ook none gebruiken (wat staat voor geen transparensie kanal).

de standaardwaarde is 100%.

de minimumwaarde is 0 (of 0%). De maximumwaarde is onbeperkt (maar ligt in de praktijk niet hoger dan 230). 100% is equivalent aan 150.

relatieve waarde syntax from Dit is de oorspronkelijke kleur waarop de relatieve kleur gebaseerd is. C H / Alch(from
) waarde
beschrijving from

color

beginnend met het woord from, gevolgd door de kleurwaarde die de oorspronkelijke kleur vertegenwoordigt.
Dit is de oorspronkelijke kleur waarop de relatieve kleur gebaseerd is.

verplicht. definieert de helderheid van de kleur, kan een getal of percentage zijn tussen 0 en 100.

0 (of 0%) betekent zwart, 100 (of 100%) betekent wit.

men kan ook none gebruiken (equivalent aan 0%).
C

verplicht. definieert een getal tussen -125 en 125 of een percentage tussen -100% en 100%.

definieert de afstand van de kleur langs de a-as, wat de mate van roodgroen van de kleur aangeeft.

-125 betekent groen, 125 betekent rood.

men kan ook none gebruiken (equivalent aan 0%).
H

verplicht. definieert de toonhoogte van de kleur, kan een getal of een hoekwaarde zijn.

men kan ook none gebruiken (equivalent aan 0graden).
/ A

optioneel. vertegenwoordigt de transparensie van de kleur (0% of 0 betekent volledig doorschijnend, 100% of 100 betekent volledig ondoorzichtig).

men kan ook none gebruiken (wat staat voor geen transparensie kanal).

de standaardwaarde is 100%.

technische details

versie: CSS Color Module Level 4

browserondersteuning

De cijfers in de tabel geven de browserversie aan die de functie volledig ondersteunt.

Chrome Edge Firefox Safari Opera
lch()
111 111 113 15 97
mengel de cijfers en percentages in de parameters
116 116 113 16.2 102

gerelateerde pagina's

Referentie:CSS Colors

Referentie:CSS hsl() functie

Referentie:CSS hwb() functie

Referentie:CSS lab() functie

Referentie:CSS oklab() functie

Referentie:CSS oklch() functie