CSS oklch() functie

CSS

Definitie en gebruik in oklch() De functie wordt gebruikt om een kleur te specificeren in de OKLCH-kleurenspace.

oklch() De functie is zeer intuïtief: je moet de hoeveelheid helderheid/lichtintensiteit (L) overwegen die je gebruikt, de intensiteit van de toon (C), en de kleur zelf (H). Bovendien kun je een transparenswaarde (A) toevoegen om de ondoorzichtigheid van de kleur aan te geven.

Voorbeelden

Definieer verschillende oklch() Kleur:

/* Verschillende lichtheden van groen */
#p1 {achtergrondkleur: oklch(30% 0.4 150);}
#p2 {achtergrondkleur: oklch(60% 0.4 150);}
#p3 {achtergrondkleur: oklch(100% 0.4 150);}
/ geel van verschillende helderheden /
#p4 {achtergrondkleur: oklch(30% 0.4 100);}
#p5 {achtergrondkleur: oklch(60% 0.4 100);}
#p6 {achtergrondkleur: oklch(100% 0.4 100);}
/ rood van verschillende helderheden */
#p7 {achtergrondkleur: oklch(30% 0.4 20);}
#p8 {achtergrondkleur: oklch(60% 0.4 20);}
#p9 {achtergrondkleur: oklch(100% 0.4 20);}

Probeer het zelf uit

CSS syntaxis

absoluut waarde syntax

oklch(L C H / A)
waarde beschrijving
L

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

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

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

Verplicht. Definieert de chroma (hoeveelheid van de kleur), kan een getal of een percentage zijn.

Moet een getal tussen -0.4 en 0.4 of een percentage tussen -100% en 100% zijn.

Bij de minimale waarde (0% of -0.4) komt de kleur dichter bij grijs.

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

Verplicht. Definieert de kleur zelf, kan een getal of een hoek (0 tot 360) zijn.

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

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

Men kan ook none gebruiken (wat de transparentiekanal is).

Standaardwaarde is 100%.

relatieve waarde syntax

oklch(from kleur L C H / A)
waarde beschrijving
from kleur

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

Dit is de oorspronkelijke kleur waarop het relatieve kleurcircuit gebaseerd is.
L

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

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

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

Verplicht. Definieert de chroma (hoeveelheid van de kleur), kan een getal of een percentage zijn.

Moet een getal tussen -0.4 en 0.4 of een percentage tussen -100% en 100% zijn.

Bij de minimale waarde (0% of -0.4) komt de kleur dichter bij grijs.

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

Verplicht. Definieert de kleur zelf, kan een getal of een hoek (0 tot 360) zijn.

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

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

Men kan ook none gebruiken (wat de transparentiekanal is). 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
oklch()
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 lab() functie

Referentie:CSS lch() functie

Referentie:CSS oklab() functie