At vælge en farve i HSL er behageligt, men stylesheets, designoverleveringer og branddokumenter kører stadig på HEX. Denne konverter lukker hullet og giver dig den sekscifrede kode for enhver kombination af hue, saturation og lightness.
Sådan fungerer konvertering fra HSL til HEX
- Omsæt saturation og lightness til brøker: 60% bliver 0.6.
- Beregn chroma C = (1 − |2L − 1|) × S — det fortæller, hvor langt farven ligger fra grå.
- Brug hue til at placere den chroma på de røde, grønne og blå kanaler, og skift derefter alle tre med L − C/2.
- Gang hver kanal med 255, rund af, og skriv den som to hexadecimale cifre.
Eksempel
Afrunding sker én gang, i sidste trin, når hver kanal låses til et helt 0–255-tal. Resultatet er den nærmeste HEX-kode til dit HSL-input og normalt identisk med, hvad et designværktøj viser.
HSL og HEX forklaret
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
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
HSL til HEX referenceoversigt
De mest almindelige CSS-farver, konverteret fra HSL til HEX.
| Farve | 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 |