HSL beskriver en färg som folk pratar om: vilken nyans, hur färgstark, hur ljus. Att konvertera en HEX-kod till HSL är det snabbaste sättet att få en färg i en form du faktiskt kan finjustera — ljusa upp, tona ner eller bygga en hel skala.
Hur HEX till HSL-konvertering fungerar
- Konvertera HEX-koden till RGB och dividera varje kanal med 255, så att alla tre ligger mellan 0 och 1.
- Hitta det största och det minsta av de tre värdena. Deras medelvärde är ljusstyrkan L.
- Spridningen mellan dem styr mättnaden S: dela den med (2 − max − min) för ljusa färger, eller med (max + min) för mörka.
- Kanalen som håller maxvärdet bestämmer nyansen H — rött vid 0°, grönt vid 120°, blått vid 240° — och de andra två kanalerna placerar nyansen inuti det segmentet.
Exempel som fungerar
Matematiken är exakt, men HSL-värden avrundas normalt till hela grader och procent. Att konvertera tillbaka kan därför hamna en eller två RGB-steg från originalet — osynligt i praktiken, men bra att veta om du loopar färger fram och tillbaka ofta.
HEX och HSL förklarat
Vad är HEX?
En HEX-kod är ett sexsiffrigt hexadecimalt tal som lagrar röd, grön och blå kanal för en färg bakom en ledande #. Varje par siffror täcker en kanal, från 00 (ingen) till FF (full), vilket ger samma 16,7 miljoner färger som RGB i en mycket kortare notation. HEX är standard i CSS, designverktyg och varumärkesriktlinjer.
- Syntax:
- #RRGGBB
- Intervall:
- 00–FF per kanal
- Bäst för:
- CSS, designöverlämning, varumärkesriktlinjer
Vad är HSL?
HSL delar upp en färg i hue (0–360° på färghjulet), saturation (hur färgrik, 0–100%) och lightness (hur ljus, 0–100%). Eftersom varje del motsvarar hur människor beskriver färg är HSL det enklaste formatet för att skapa nyanser, toner och konsekventa paletter — för hand eller i kod.
- Syntax:
- hsl(H, S%, L%)
- Intervall:
- 0–360°, 0–100%, 0–100%
- Bäst för:
- paletter, toner och nyanser, teman
HEX till HSL referenstabell
De vanligaste CSS-färgerna, konverterade från HEX till HSL.
| Färg | 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%) |