Att välja färg i HSL är bekvämt, men stylesheets, designleveranser och varumärkesdokument kör fortfarande på HEX. Den här omvandlaren stänger den klyftan och ger dig den sexsiffriga koden för vilken kombination av nyans, mättnad och ljusstyrka som helst.
Hur HSL till HEX-konvertering fungerar
- Gör om mättnad och ljusstyrka till bråkdelar: 60% blir 0.6.
- Beräkna kroman C = (1 − |2L − 1|) × S — det visar hur långt färgen ligger från grått.
- Använd nyansen för att placera den kroman på röd-, grön- och blåkanalerna, sedan förskjuter du alla tre med L − C/2.
- Multiplicera varje kanal med 255, avrunda och skriv som två hexadecimala siffror.
Exempel som fungerar
Avrundningen sker en gång, i sista steget, när varje kanal knäppts till ett helt 0–255-värde. Resultatet är den närmaste HEX-koden till din HSL-indata och normalt identisk med vad ett designverktyg visar.
HSL och HEX förklarat
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
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
HSL till HEX referenstabell
De vanligaste CSS-färgerna, konverterade från HSL till HEX.
| Färg | 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 |