CSS HSL-kleuren
HSL staat voor tint, verzadiging en lichtheid.
HSL-waarde
In CSS kan een kleur worden gespecificeerd met behulp van tint, verzadiging en lichtheid (HSL) in de vorm:
hsl ( tint , verzadiging , lichtheid )
Tint is een graad op het kleurenwiel van 0 tot 360. 0 is rood, 120 is groen en 240 is blauw.
Verzadiging is een procentuele waarde, 0% betekent een grijstint en 100% is de volledige kleur.
Lichtheid is ook een percentage, 0% is zwart, 50% is niet licht of donker, 100% is wit
Experimenteer door onderstaande HSL-waarden te mengen:
hsl(0, 100%, 50%)
TINT
VERZADIGING
LICHTHEID
Voorbeeld
Verzadiging
Verzadiging kan worden omschreven als de intensiteit van een kleur.
100% is pure kleur, geen grijstinten
50% is 50% grijs, maar je kunt nog steeds de kleur zien.
0% is helemaal grijs, je ziet de kleur niet meer.
Voorbeeld
Lichtheid
De lichtheid van een kleur kan worden omschreven als hoeveel licht je de kleur wilt geven, waarbij 0% betekent geen licht (zwart), 50% betekent 50% licht (noch donker noch licht) 100% betekent volledige lichtheid (wit).
Voorbeeld
Tinten grijs
Grijstinten worden vaak gedefinieerd door de tint en verzadiging op 0 te zetten en de lichtheid aan te passen van 0% tot 100% om donkerdere/lichtere tinten te krijgen:
Voorbeeld
HSLA-waarde
HSLA-kleurwaarden zijn een uitbreiding van HSL-kleurwaarden met een alfakanaal - dat de dekking voor een kleur specificeert.
Een HSLA-kleurwaarde wordt gespecificeerd met:
hsla( tint, verzadiging , lichtheid, alfa )
De alpha parameter is een getal tussen 0.0 (volledig transparant) en 1.0 (helemaal niet transparant):
Experimenteer door de onderstaande HSLA-waarden te mengen:
hsla (0, 100%, 50%, 0,5)
TINT
VERZADIGING
LICHTHEID
ALFA