lesrooster

CSS Referentie Handleiding

CSS-eigenschap

Verplichte cursus

Aanbevolen cursus:

CodeW3C.com schatkist

CSS hsl() functie

Vorige pagina CSS grayscale() functie
Volgende pagina CSS hue-rotate() functie
Terug naar de vorige laag CSS Functie Referentie Handleiding

Definitie en gebruik

CSS hsl() De functie gebruikt het kleurenmodel HSL (Hue-Saturation-Lightness) om kleuren te specificeren. Je kunt ook een optionele alpha component toevoegen (die de doorzichtigheid van de kleur aangeeft).

Tip:HSL staat voor tint (Hue), verzadiging (Saturation) en helderheid (Lightness), en het is een cilindrische coördinatenvergelijking van kleuren.

Let op:hsla() Functie is hsl() Functie-alias. Aangeraden wordt om hsl() Functie.

Voorbeeld

Voorbeeld 1

Definieer verschillende HSL(A) kleuren:

#p1 {achtergrondkleur: hsl(120 100% 50%);} /* Groen */
#p2 {achtergrondkleur: hsl(120 100% 75%);} /* Lichtgroen */
#p3 {achtergrondkleur: hsl(120 100% 25%);} /* Donkergroen */
#p4 {achtergrondkleur: hsl(120 100% 25% / 20%);} /* Doorzichtig donkergroen */
#p5 {achtergrondkleur: hsl(120 60% 70%);} /* Zacht groen */
#p6 {achtergrondkleur: hsl(290 100% 50%);} /* Paars */
#p7 {achtergrondkleur: hsl(290 60% 70%);} /* Zacht paars */
#p8 {achtergrondkleur: hsl(290 60% 70% / 0.3);} /* Doorzichtig zacht paars */

Probeer het zelf uit

Voorbeeld 2

Oude syntax waarbij de waarden door komma's gescheiden zijn:

#p1 {achtergrondkleur:hsl(120, 100%, 50%);} /* Groen */
#p2 {achtergrondkleur:hsl(120, 100%, 75%);} /* Licht groen */
#p3 {achtergrondkleur:hsl(120, 100%, 25%);} /* Diepe groen */
#p4 {achtergrondkleur:hsl(120, 60%, 70%);} /* Zachte groen */
#p5 {achtergrondkleur:hsl(290, 100%, 50%);} /* Paars */
#p6 {achtergrondkleur:hsl(290, 60%, 70%);} /* Zachte paars */

Probeer het zelf uit

CSS syntaxis

Absoluut waarde syntax

hsl(tint verzadiging lichting / A)

Waarde	Beschrijving
tint	Verplicht. Definieert het graden op de kleurenhoek (van 0 tot 360) - 0 (of 360) is rood, 120 is groen, 240 is blauw.
verzadiging	Verplicht. Definieert de verzadiging van de kleur; 0% is grijs, 100% is volledig kleur (volledige verzadiging). Men kan ook None gebruiken (wat gelijk is aan 0%).
lichting	Verplicht. Definieert de helderheid van de kleur; 0% is zwart, 50% is normaal, 100% is wit. Men kan ook None gebruiken (wat gelijk is aan 0%).
/ A	Optioneel. Voorstelt de alpha-kanaalwaarde van de kleur (van 0% (of 0) - volledig doorzichtig tot 100% (of 100) - volledig ondoorzichtig). Men kan ook None gebruiken (wat overeenkomt met 0%). Standaardwaarde is 100%.

Relatieve waarde syntax

hsl(from kleur tint verzadiging lichting / A)

Waarde	Beschrijving
from kleur	Met de keyword from begint, gevolgd door een kleurwaarde die de oorspronkelijke kleur vertegenwoordigt. Dit is de oorspronkelijke kleur waarop het relatieve kleur gebaseerd is.
tint	Verplicht. Definieert het graden op de kleurenhoek (van 0 tot 360) - 0 (of 360) is rood, 120 is groen, 240 is blauw.
verzadiging	Verplicht. Definieert de verzadiging van de kleur; 0% is grijs, 100% is volledig kleur (volledige verzadiging). Men kan ook None gebruiken (wat gelijk is aan 0%).
lichting	Verplicht. Definieert de helderheid van de kleur; 0% is zwart, 50% is normaal, 100% is wit. Men kan ook None gebruiken (wat gelijk is aan 0%).
/ A	Optioneel. Voorstelt de alpha-kanaalwaarde van de kleur (van 0% (of 0) - volledig doorzichtig tot 100% (of 100) - volledig ondoorzichtig). Men kan ook None gebruiken (wat overeenkomt met 0%). Standaardwaarde is 100%.