CSS HSL Kleure
HSL staan vir kleur, versadiging en ligtheid.
HSL waarde
In CSS kan 'n kleur gespesifiseer word deur gebruik te maak van tint, versadiging en ligtheid (HSL) in die vorm:
hsl( tint , versadiging , ligheid )
Tint is 'n graad op die kleurwiel van 0 tot 360. 0 is rooi, 120 is groen en 240 is blou.
Versadiging is 'n persentasiewaarde, 0% beteken 'n skakering van grys, en 100% is die volkleur.
Ligte is ook 'n persentasie, 0% is swart, 50% is nie lig of donker nie, 100% is wit
Eksperimenteer deur die HSL-waardes hieronder te meng:
hsl(0, 100%, 50%)
HUE
VERSADIGING
LIGHEID
Voorbeeld
Versadiging
Versadiging kan beskryf word as die intensiteit van 'n kleur.
100% is suiwer kleur, geen skakerings van grys nie
50% is 50% grys, maar jy kan steeds die kleur sien.
0% is heeltemal grys, jy kan nie meer die kleur sien nie.
Voorbeeld
Ligte
Die ligheid van 'n kleur kan beskryf word as hoeveel lig jy die kleur wil gee, waar 0% beteken geen lig (swart), 50% beteken 50% lig (nie donker nóg lig) 100% beteken volle lig (wit).
Voorbeeld
Skakerings van grys
Skakerings van grys word dikwels gedefinieer deur die tint en versadiging op 0 te stel, en die ligheid van 0% tot 100% aan te pas om donkerder/ligter skakerings te kry:
Voorbeeld
HSLA waarde
HSLA-kleurwaardes is 'n uitbreiding van HSL-kleurwaardes met 'n alfakanaal - wat die ondeursigtigheid vir 'n kleur spesifiseer.
'n HSLA-kleurwaarde word gespesifiseer met:
hsla( tint, versadiging , ligheid, alfa )
Die alfa-parameter is 'n getal tussen 0.0 (ten volle deursigtig) en 1.0 (glad nie deursigtig nie):
Eksperimenteer deur die HSLA-waardes hieronder te meng:
hsla (0, 100%, 50%, 0.5)
HUE
VERSADIGING
LIGHEID
ALFA