CSS lab() functie

Definitie en gebruik

CSS lab() De functie specificeert de kleur in de CIE Lab-kleurenspace. Deze kleurenspace vertegenwoordigt alle kleuren die het menselijk oog kan zien.

Voorbeelden

Definieer verschillende lab() Kleur:

#p1 {achtergrondkleur: lab(0 40% 20% / 0.5);}
#p2 {achtergrondkleur: lab(30 -40% -20%);}
#p3 {achtergrondkleur:lab(40 30% -20% / 20%);}
#p4 {achtergrondkleur:lab(50 60% 20%);}
#p5 {achtergrondkleur:lab(60 50% -10%);}
#p6 {achtergrondkleur:lab(70 70% -80% / 0.3);}
#p7 {achtergrondkleur:lab(80 70% 20% / 0.5);}
#p8 {achtergrondkleur:lab(90 80% -20%);}
#p9 {achtergrondkleur:lab(100 90% -100%);}

Probeer het zelf

CSS syntaxis

absoluut waarde syntax

lab(L a b / A)
waarde beschrijving
L

Verplicht. Definieert de helderheid van de kleur, wat een getal tussen 0 en 100 of een percentage kan zijn.

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

Men kan ook none gebruiken (equivalent aan 0%).
a

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 rode-groene mate van de kleur aangeeft. -125 betekent groen, 125 betekent rood.

Men kan ook none gebruiken (equivalent aan 0%).
b

Verplicht. Definieert een getal tussen -125 en 125 of een percentage tussen -100% en 100%.

Definieert de afstand van de kleur langs de b-as, wat de gele-blauwe mate van de kleur aangeeft.

-125 betekent blauw, 125 betekent geel.

Men kan ook none gebruiken (equivalent aan 0%).
/ A

Optioneel. Voorraadwaarde van de kleurtransparantie (0% of 0 betekent volledig doorschijnend, 100% of 100 betekent volledig ondoordringbaar).

Men kan ook none gebruiken (wat geen transparantie kanaal betekent).

Standaardwaarde is 100%.

relatieve waarde syntax

lab(from kleur L a b / A)
waarde beschrijving
from kleur

Begint met het woord from, gevolgd door de kleurwaarde die de oorspronkelijke kleur vertegenwoordigt.

Dit is de oorspronkelijke kleur op basis waarvan de relatieve kleur is gebaseerd.
L

Verplicht. Definieert de helderheid van de kleur, wat een getal tussen 0 en 100 of een percentage kan zijn.

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

Men kan ook none gebruiken (equivalent aan 0%).
a

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 rode-groene mate van de kleur aangeeft.

-125 betekent groen, 125 betekent rood.

Men kan ook none gebruiken (equivalent aan 0%).
b

Verplicht. Definieert een getal tussen -125 en 125 of een percentage tussen -100% en 100%.

Definieert de afstand van de kleur langs de b-as, wat de gele-blauwe mate van de kleur aangeeft.

-125 betekent blauw, 125 betekent geel.

Men kan ook none gebruiken (equivalent aan 0%).
/ A

Optioneel. Voorraadwaarde van de kleurtransparantie (0% of 0 betekent volledig doorschijnend, 100% of 100 betekent volledig ondoordringbaar).

Men kan ook none gebruiken (wat geen transparantie kanaal betekent).

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
lab()
111 111 113 15 97
Meng cijfers en percentages in parameters
116 116 113 16.2 102

gerelateerde pagina's

Referentie:CSS Colors

Referentie:CSS hsl() functie

Referentie:CSS hwb() functie

Referentie:CSS lch() functie

Referentie:CSS oklab() functie

Referentie:CSS oklch() functie