CSS HSL Kleur

HSL-waarde

In CSS kan je kleur specificeren met tint, verzadiging en helderheid (HSL), in de volgende format:

hsla(hue, saturation, lightness)

Tint (hue）is een hoek in graden van 0 tot 360 op de kleurenhoek. 0 is rood, 120 is groen, en 240 is blauw.

Verzadiging (saturation）is een percentage, 0% betekent een grijs schaduw, en 100% is de volledige kleur.

Helderheid (lightness）is ook een percentage, 0% is zwart, 50% is niet licht noch donker, en 100% is wit.

Experimenteer door de volgende HSL-waarden te mengen:

　

HUE

0

SATURATION

100%

LIGHTNESS

50%

Voorbeeld

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

Probeer het zelf

Verzadiging

Verzadiging kan worden beschreven als de intensiteit van de kleur.

100% is zuivere kleur, zonder grijs schaduw

50% is 50% grijs, maar je kunt de kleur nog steeds zien.

0% is volledig grijs, je kunt de kleur niet meer zien.

Voorbeeld

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

Probeer het zelf

Helderheid

De helderheid van de kleur kan worden beschreven als hoeveel licht er aan de kleur wordt gegeven, waarbij 0% niet helder betekent (zwart), 50% 50% helder betekent (niet donker noch helder), en 100% volledig helder betekent (wit).

Voorbeeld

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)

Probeer het zelf

Meestal wordt een grijs schaduw gedefinieerd door de toon en de verzadiging op 0 in te stellen, en de helderheid van 0% tot 100% aan te passen om diepere/dunnere schaduwen te krijgen:

Voorbeeld

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)

Probeer het zelf

HSLA waarde

HSLA kleurwaarde is een uitbreiding van HSL kleurwaarde met een Alpha kanaal - het specificeert de ondoorzichtigheid van de kleur.

HSLA kleurwaarde wordt ingesteld op:

hsla(hue, saturation, lightness, alpha)

alpha De parameters zijn getallen tussen 0.0 (compleet transparant) en 1.0 (geen transparensie):

Experimenteer door de volgende HSLA-waarden te mengen:

　

HUE

0

SATURATION

100%

LIGHTNESS

50%

ALPHA

0.5

Voorbeeld

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)

Probeer het zelf