CSS oklab() functie

definitie en gebruik

CSS oklab() De functie wordt gebruikt om kleuren te specificeren in de OKLAB-kleurenspace. Deze kleurenspace is ontworpen om de manier waarop het menselijk oog kleuren waarneemt te simuleren.

voorbeelden

Definieer verschillende oklab() Kleur:

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

Probeer het zelf uit

CSS syntaxis

absoluut waarde syntax

oklab(L a b / A)
waarde beschrijving
L

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

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

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

Verplicht. Definieert een getal tussen -0.4 en 0.4 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 vertegenwoordigt.

-0.4 betekent groen, 0.4 betekent rood. Men kan ook none gebruiken (equivalent aan 0%).
b

Verplicht. Definieert een getal tussen -0.4 en 0.4 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 vertegenwoordigt.

-0.4 betekent blauw, 0.4 betekent geel. Men kan ook none gebruiken (equivalent aan 0%).
/ A

Optioneel. Vertegenwoordigt de waarde van het transparantiekanal van de kleur (0% of 0 betekent volledig transparant, 100% of 100 betekent volledig ondoorzichtig).

Men kan ook none gebruiken (wat staat voor geen transparantie kanal). Standaardwaarde is 100%.

relatieve waarde syntax

oklab(from color L a b / A)
waarde beschrijving
from color

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

Dit is de oorspronkelijke kleur die als basis voor de relatieve kleur wordt gebruikt.
L

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

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

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

Verplicht. Definieert een getal tussen -0.4 en 0.4 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 vertegenwoordigt.

-0.4 betekent groen, 0.4 betekent rood. Men kan ook none gebruiken (equivalent aan 0%).
b

Verplicht. Definieert een getal tussen -0.4 en 0.4 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 vertegenwoordigt.

-0.4 betekent blauw, 0.4 betekent geel. Men kan ook none gebruiken (equivalent aan 0%).
/ A

Optioneel. Vertegenwoordigt de waarde van het transparantiekanal van de kleur (0% of 0 betekent volledig transparant, 100% of 100 betekent volledig ondoorzichtig).

Men kan ook none gebruiken (wat staat voor geen transparantie kanal). 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
oklab()
111 111 113 15.4 97
Gebruik cijfers en percentages mengelen 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 lch() functie

Referentie:CSS lab() functie

Referentie:CSS oklch() functie