HSL beskriuwt in kleur sa’t minsken deroer prate: hokker tint, hoefier kleurryk, hoe helder. Omdraai in HEX-koade nei HSL is de fluchste manier om in kleur yn in foarm te krijen dy'tst echt fine en oanpasse kinst — lichter meitsje, dempe of in hiele skaal bouwe.
Hoe konversje fan HEX nei HSL wurket
- Konverteer de HEX-koade nei RGB en dield elk kanaal troch 255, sadat alle trije tusken 0 en 1 lizze.
- Fyn it grutste en it lytste fan de trije wearden. Har gemiddelde is de helderheid L.
- De fersprieding tusken harren bepaalt de ferzadiging S: dield it troch (2 − max − min) foar ljocht kleuren, of troch (max + min) foar tsjustre kleuren.
- It kanaal dat it maksimum hat beslút de tint H — reade by 0°, griene by 120°, blau by 240° — en de oare twa kanaals pleatse de tint binnen dat segmint.
Wurkend foarbyld
De wiskunde is presys, mar HSL-wearden wurde meast troch rûnten ôfbylde nei heule graden en persintaazjes. Terjoech konvertearjen kin dêrom ien of twa RGB-stappen fuort fan it origineel lizze — yn praktyk oantinkensleas, mar it is goed om te witten asst kleuren faak hinne en wer rûnst.
HEX en HSL útlis
Wat is HEX?
In HEX-koade is in seis-sifers hexadesimale nûmer dy't de reade, griene en blau kanaal fan in kleur opslaat efter in foaropstelde #. Elke pear sifers dekke ien kanaal, fan 00 (gjin) oant FF (fol), wat deselde 16,7 miljoen kleuren jout as RGB yn in folle koartere notaasje. HEX is de standert yn CSS, ûntwerpools en merke-rigels.
- Syntaks:
- #RRGGBB
- Berik:
- 00–FF per kanaal
- Bêst foar:
- CSS, ûntwerp-oerdracht, merkregels
Wat is HSL?
HSL splitst in kleur yn hue (0–360° op it kleurfiel), saturation (hoe kleurryk, 0–100%) en lightness (hoe ljocht, 0–100%). Omdat elk diel past by hoe minsken kleuren beskriuwe, is HSL it maklikste formaat foar it bouen fan tinten, shades en konsistente paletten — hânmjittich of yn koade.
- Syntaks:
- hsl(H, S%, L%)
- Berik:
- 0–360°, 0–100%, 0–100%
- Bêst foar:
- paletten, tinten en shades, theming
HEX nei HSL referinsjetabel
De meast foarkommende CSS-kleuren, konvertearre fan HEX nei 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%) |