HSL beskriver en farve, som folk taler om den: hvilken nuance, hvor farverig og hvor lys. At konvertere en HEX-kode til HSL er den hurtigste måde at få en farve i en form, du faktisk kan finjustere — gøre den lysere, dæmpe den eller bygge hele skalaer ud fra den.
Sådan fungerer konvertering fra HEX til HSL
- Konverter HEX-koden til RGB og divider hver kanal med 255, så alle tre ligger mellem 0 og 1.
- Find den største og den mindste af de tre værdier. Deres gennemsnit er lysheden L.
- Spredningen mellem dem styrer mætningen S: divider den med (2 − max − min) for lyse farver, eller med (max + min) for mørke.
- Den kanal, der har maksimum, afgør nuancen H — rød ved 0°, grøn ved 120°, blå ved 240° — og de to andre kanaler placerer nuancen inde i det segment.
Eksempel
Matematikken er eksakt, men HSL-værdier afrundes normalt til hele grader og procenter. At konvertere tilbage kan derfor lande en eller to RGB-trin væk fra originalen — usynligt i praksis, men godt at vide, hvis du gentagne gange rundturkonverterer farver.
HEX og HSL forklaret
Hvad er HEX?
En HEX-kode er et sekscifret hexadecimalt tal, som gemmer en farves røde, grønne og blå kanal bag et indledende #. Hvert par cifre dækker én kanal fra 00 (ingen) til FF (fuld), hvilket giver de samme 16,7 millioner farver som RGB i en kortere notation. HEX er standard i CSS, designværktøjer og brandguidelines.
- Syntaks:
- #RRGGBB
- Område:
- 00–FF per kanal
- Bedst til:
- CSS, designoverlevering, brandguidelines
Hvad er HSL?
HSL deler en farve op i hue (0–360° på farvehjulet), saturation (hvor farverig, 0–100%) og lightness (hvor lys, 0–100%). Da hver del passer til, hvordan mennesker beskriver farver, er HSL det nemmeste format til at bygge tints, shades og konsistente palettes — manuelt eller i kode.
- Syntaks:
- hsl(H, S%, L%)
- Område:
- 0–360°, 0–100%, 0–100%
- Bedst til:
- paletter, tints og shades, theming
HEX til HSL referenceoversigt
De mest almindelige CSS-farver, konverteret fra HEX til HSL.
| Farve | 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%) |