Hva denne siden gjør
Denne siden lar deg taste inn en HSL-farge – hue i grader (0–360), saturation i prosent og lightness i prosent – og viser øyeblikkelig den tilsvarende heksadesimale fargekoden (HEX). HEX-koden er den sekssifrede (eller tresifrede forkortede) notasjonen som brukes overalt i CSS og designverktøy, for eksempel #1E90FF. Idet du skriver eller velger en farge, oppdateres HEX-verdien umiddelbart. Alle andre fargefelt – RGB, HSV, CMYK, LAB – oppdateres samtidig.
Inndataene er enkle: en hue-verdi mellom 0 og 360, en saturation-verdi i prosent (0–100 %) og en lightness-verdi i prosent (0–100 %). Et eksempel: 243, 75%, 59%. Utdataene er primært en HEX-fargekode, for eksempel #4f46e5. Hvis fargens RGB-kanaler hver kan representeres med et enkelt heksadesimalt siffer, viser verktøyet også den tresifrede forkortede formen (f.eks. #abc).
Hva skiller denne siden fra andre verktøy
Denne siden er dedikert til akkurat HSL-til-HEX-konvertering. HSL er en fargemodell designet for menneskelig resonnering om farger – endring av lightness alene holder hue intakt, noe som gjør den ideell for palett- og temagenerering. HEX er på sin side en sekssifret (eller tresifret forkortet) RGB-notasjon; den bærer ingen alfa med mindre den åttesifrede formen brukes.
Konverteringen er direkte og tapsfri innenfor sRGB-fargerommet. Dette står i kontrast til konverteringer som involverer LAB eller CMYK, som kan justere farger utenfor fargerommet. Her skjer ingen slik justering. Fordi HSL og RGB er lineært relatert (innenfor den samme fargemodellen), er overgangen matematisk enkel og gir alltid et gyldig resultat innenfor det synlige RGB-området.
Inndata og utdata – slik fungerer konverteringen
Verktøyet forventer at du skriver hue som et heltall eller desimaltall mellom 0 og 360, og saturation og lightness som prosenttall med prosenttegn. Eksempler på gyldige inndata:
243, 75%, 59%0, 0%, 100%(hvit)120, 100%, 50%(ren grønn)
Hvis fargens RGB-verdier alle er delelige med 17 (det vil si at hver kanal kan uttrykkes som 0x00, 0x11, 0x22 … 0xFF), vil verktøyet også vise den tresifrede forkortede formen – for eksempel #ff8800 blir #f80. Dette er en standard CSS-forkortelse som sparer plass, men som bare fungerer når hvert par med like sifre er identiske.
Alle andre fargefelt oppdateres samtidig. CMYK-utdataene som vises, er et estimat på skjerm og kan avvike fra profesjonelle trykkverdier. Bearbeidingen skjer utelukkende i nettleseren din; ingenting du skriver inn, blir lastet opp.
Regler og kanttilfeller
Redigering av et hvilket som helst felt oppdaterer umiddelbart alle andre felt. Dersom HSL-verdiene er utenfor de gyldige områdene (hue 0–360, saturation 0–100 %, lightness 0–100 %) eller ikke er formatert riktig, viser verktøyet følgende feilmelding:
«Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.»
Feilmeldingen er på engelsk, men den er lett å forstå: du må skrive hue etterfulgt av to prosentverdier. Husk at prosenttegnet (%) må være med – 50 er ikke det samme som 50%. Saturation og lightness er prosentandeler av maksimum; 100 % saturation betyr full metning, 0 % betyr gråtoner.
Konverteringen fra HSL til HEX holder seg alltid innenfor det synlige RGB-området. Ingen farger utenfor fargerommet forekommer for denne konverteringen, fordi HSL og RGB er definert over samme fargerom (sRGB). CMYK-utdataene er derimot en estimert omregning og kan avvike fra faktiske trykkprofiler.
Hvem trenger denne konverteringen
- Designere som bygger fargepaletter i HSL og trenger HEX-koder for implementering i kode eller designverktøy.
- Frontend-utviklere som mottar HSL-verdier fra designfiler (f.eks. Figma, Sketch) og må oversette dem til CSS-HEX-egenskaper.
- Alle som justerer temaer eller anvender tilgjengelighetskontrastforhold ved å modifisere lightness i HSL, og deretter konverterer resultatet til en HEX-verdi for produksjon.
Når du arbeider med WCAG-kontrastforhold, er HSL spesielt nyttig fordi du kan justere lightness uten å endre hue. Du kan for eksempel ta en primærfarge, senke lightness til 30 % for mørk tekst og øke til 70 % for lys bakgrunn – alt mens hue forblir konstant. HEX-koden gjør det deretter enkelt å implementere i CSS.
Forståelse av HSL og HEX
HSL står for Hue, Saturation, Lightness. Hue måles i grader på en fargesirkel: 0° (rød), 120° (grønn), 240° (blå), og tilbake til 360° (rød igjen). Saturation er intensiteten: 0 % gir gråtoner, 100 % gir ren farge. Lightness er lysstyrken: 0 % er svart, 100 % er hvit, 50 % er «normal» farge.
HEX er en heksadesimal representasjon av RGB. Hver av de tre kanalene (rød, grønn, blå) får en verdi fra 0 til 255, som konverteres til to heksadesimale sifre: 00 til FF. For eksempel er RGB(79, 70, 229) det samme som #4f46e5. Tresifret forkortelse brukes når hver kanalverdi er et multiplum av 17 (dvs. 0, 17, 34, 51, …, 255). Da skrives bare det første sifferet: #fff for hvit (255,255,255) eller #f80 for (255,136,0).
Den manuelle konverteringen fra HSL til HEX går via RGB. Trinnene er:
- Konverter HSL til RGB ved hjelp av standardalgoritmen (se f.eks. CSS Color Module Level 4).
- Multipliser hver RGB-kanal (0–1) med 255 og rund til nærmeste heltall.
- Konverter hver heltallsverdi til et tosifret heksadesimalt tall (med ledende null om nødvendig).
- Sett sammen med
#foran.
Siden alt skjer i nettleseren, er denne siden et nyttig verktøy for å unngå manuelle feil.
Vanlige feil og tips
Den vanligste feilen er å utelate prosenttegnet. 243, 75, 59 tolkes ikke som 75 % og 59 % – verktøyet viser da feilmeldingen. En annen feil er å skrive hue over 360 eller under 0. Selv om noen systemer tillater verdier utenfor dette området (ved å vikle rundt), holder dette verktøyet seg strengt til 0–360. Saturation og lightness må være mellom 0 % og 100 %.
En tredje feil er å forveksle saturation med chroma. I HSL er saturation relativ til lightness; ved høy eller lav lightness reduseres den opplevde metningen, men HSL-verdien forblir den samme. Dette er en kilde til forvirring, men konverteringen er matematisk korrekt.
For å få tresifret HEX må du ende opp med RGB-verdier som 0, 17, 34 …, 255. Dette forekommer oftest ved enkle farger som hvit (#fff), svart (#000) eller primærfarger som rød (#f00).
FAQ (ofte stilte spørsmål)
Hva skjer hvis jeg skriver inn ugyldige verdier?
Verktøyet viser feilmeldingen «Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%» inntil inndataene er korrekte.
Er konverteringen nøyaktig?
Ja, konverteringen fra HSL til HEX innenfor sRGB-fargerommet er tapsfri. Alle farger som kan uttrykkes i HSL innenfor gyldige områder, kan representeres nøyaktig i HEX.
Kan jeg bruke den tresifrede forkortede HEX-koden i CSS?
Ja. Tresifret HEX (#abc) er en gyldig CSS-fargeverdi, og nettleseren utvider den automatisk til seks sifre (#aabbcc). Du kan kopiere den direkte.
Hvorfor vises CMYK-verdier hvis dette er en HSL-til-HEX-side?
CMYK-utdataene er en ekstra tjeneste for å gi et inntrykk av hvordan fargen kan se ut i trykk. Verdiene er estimater og bør ikke brukes som eksakte trykkprofiler.
Lagres dataene mine når jeg skriver inn HSL-verdier?
Nei. All behandling skjer i nettleseren din. Ingenting du skriver inn, blir lastet opp eller lagret.
Hvordan konverterer jeg manuelt fra HSL til HEX?
Følg algoritmen: HSL → RGB (ved hjelp av formler for hue, saturation og lightness) → konverter hver RGB-kanal (0–255) til to heksadesimale sifre → sett sammen med #. For detaljer, se CSS Color Module Level 4 eller søk etter «HSL to RGB formula».