HSL beskryf 'n kleur op die manier waarop mense daaroor praat: watter tint, hoe kleurvol, hoe helder. Om 'n HEX-kode na HSL om te skakel is die vinnigste manier om 'n kleur in 'n vorm te kry wat jy werklik kan verfyn — ligter maak, demp, of 'n hele skaal daaruit bou.
Hoe HEX na HSL omskakeling werk
- Skakel die HEX-kode na RGB om en deel elke kanaal deur 255, sodat al drie tussen 0 en 1 val.
- Vind die grootste en die kleinste van die drie waardes. Hul gemiddelde is die ligtheid L.
- Die verskil tussen hulle bepaal die versadiging S: deel dit deur (2 − max − min) vir ligte kleure, of deur (max + min) vir donker kleure.
- Die kanaal wat die maksimum hou, bepaal die tint H — rooi by 0°, groen by 120°, blou by 240° — en die ander twee kanale plaas die tint binne daardie segment.
Werkende voorbeeld
Die wiskunde is eksakt, maar HSL-waardes word gewoonlik na volle grade en persentasies afgerond. Terugskakeling kan dus een of twee RGB-stappe van die oorspronklike af beland — onwaarneembaar in praktyk, maar goed om te weet as jy kleure herhaaldelik heen en weer omskakel.
HEX en HSL verduidelik
Wat is HEX?
’n HEX-kode is ’n ses-syfer heksadesimale getal wat die rooi-, groen- en bloukanaal van ’n kleur agter ’n leidende # stoor. Elke paar syfers dek een kanaal, van 00 (geen) tot FF (vol), wat dieselfde 16,7 miljoen kleure gee as RGB maar in ’n baie korter notasie. HEX is die verstek in CSS, ontwerptoepassings en handelsriglyne.
- Sintaks:
- #RRGGBB
- Reeks:
- 00–FF per kanaal
- Beste vir:
- CSS, ontwerp-oordrag, handelsriglyne
Wat is HSL?
HSL verdeel ’n kleur in hue (0–360° op die kleurwiel), versadiging (hoe kleurvol, 0–100%) en ligtheid (hoe helder, 0–100%). Omdat elk van hierdie dele ooreenstem met hoe mense kleur beskryf, is HSL die maklikste formaat om tint-, skadu- en konsekwente palette te bou — met die hand of in kode.
- Sintaks:
- hsl(H, S%, L%)
- Reeks:
- 0–360°, 0–100%, 0–100%
- Beste vir:
- palette, tint- en skaduwerk, theming
HEX na HSL verwysingstabel
Die mees algemene CSS-kleure, omgeskakel van HEX na HSL.
| Kleur | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |