Kleuren kieze yn HSL is noflik, mar stylesheets, oerdrachten nei ûntwerpers en merkdokuminten draaie noch op HEX. Dizze konverter slút dat gap en jout dy de seis-sifers koade foar elke kombinaasje fan hue, saturation en lightness.
Hoe konversje fan HSL nei HEX wurket
- Feroarje saturation en lightness nei fractionen: 60% wurdt 0.6.
- Bereken de chroma C = (1 − |2L − 1|) × S — dat is hoe fier de kleur fan grys ôf stiet.
- Brûk de hue om dy chroma op de reade, griene en blauwe kanaals te pleatsen, en verschuif dan alle trije mei L − C/2.
- Fermannigfâldig elk kanaal mei 255, rûnts it ôf, en skriuw it as twa hexadecimal sifers.
Wurkend foarbyld
Rûnten bart ien kear, by it lêste stadium as elk kanaal nei in heul 0–255 wearde knipt wurdt. It resultaat is de tichtsbystekende HEX-koade by dyn HSL-ynput en meastal identyk oan wat in ûntwerptool toant.
HSL en HEX útlis
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
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
HSL nei HEX referinsjetabel
De meast foarkommende CSS-kleuren, konvertearre fan HSL nei HEX.
| Kleur | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |