Å velge en farge i HSL er behagelig, men stylesheets, designoverleveringer og branddokumenter bruker fortsatt HEX. Denne konverteren lukker gapet og gir deg den sekssifrede koden for enhver kombinasjon av hue, metning og lyshet.
Hvordan konvertering fra HSL til HEX fungerer
- Gjør metning og lyshet om til desimaler: 60% blir 0.6.
- Beregn kroma C = (1 − |2L − 1|) × S — det viser hvor langt fargen ligger fra grått.
- Bruk hue for å plassere den kromaen på rød-, grønn- og blåkanalene, og forskyv deretter alle tre med L − C/2.
- Multipliser hver kanal med 255, rund av, og skriv den som to heksadesimale sifre.
Eksempel
Avrunding skjer én gang, i siste steg, når hver kanal snaps til et helt 0–255‑tall. Resultatet er den nærmeste HEX-koden til HSL-inndataene dine og er normalt identisk med det et designverktøy viser.
HSL and HEX explained
Hva er HSL?
HSL deler en farge i hue (0–360° på fargesirkelen), saturation (hvor fargerik, 0–100%) og lightness (hvor lys, 0–100%). Siden hver del matcher måten folk beskriver farge på, er HSL det enkleste formatet for å bygge nyanser, skygger og konsistente paletter — for hånd eller i kode.
- Syntaks:
- hsl(H, S%, L%)
- Område:
- 0–360°, 0–100%, 0–100%
- Best egnet for:
- paletter, nyanser og skygger, tematikk
Hva er HEX?
En HEX-kode er et seks-sifret heksadesimalt tall som lagrer fargens røde, grønne og blå kanal etter et innledende #. Hver paresiffer dekker én kanal, fra 00 (ingen) til FF (full), noe som gir de samme 16,7 millionene farger som RGB i en mye kortere notasjon. HEX er standard i CSS, designverktøy og merkevareretningslinjer.
- Syntaks:
- #RRGGBB
- Område:
- 00–FF per kanal
- Best egnet for:
- CSS, design-handoff, merkevareretningslinjer
Referansetabell fra HSL til HEX
De vanligste CSS-fargene, konvertert fra HSL til HEX.
| Farge | 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 |