Hvorfor verktøyet finnes: HSL er menneskelig, RGB er maskinelt
Mennesker tenker på farge i termer som fargetone, metning og lyshet – ikke som blandingsforhold mellom rødt, grønt og blått lys. Derfor ble HSL-modellen (Hue, Saturation, Lightness) utviklet. I HSL er hue vinkelen på fargehjulet (0–360°), saturation prosentandelen av renhet (0% = grå, 100% = full metning), og lightness prosentandelen av lyshet (0% = svart, 100% = hvit). Det sentrale poenget er at når du endrer lightness alene, forblir hue uendret. Dette gjør HSL ideell for å generere fargepaletter og temaer – du kan justere lyshet uten å endre fargetonen.
Skjermer derimot arbeider med RGB (Red, Green, Blue). Hver piksel styres av tre tall mellom 0 og 255 som angir intensiteten av rødt, grønt og blått lys. CSS, canvas, WebGL og alle grafiske API-er forventer RGB-verdier (eller HEX, som er en heksadesimal representasjon av RGB). Derfor må en designer som har valgt en HSL-farge, oversette den til RGB for å bruke den i kode.
HSL-til-RGB-konverteringen er matematisk eksakt og tapasfri. Hver gyldig HSL-trio (hue 0–360, saturation 0–100%, lightness 0–100%) gir en unik RGB-trio (0–255). Det oppstår aldri utenfor-gamut-situasjoner slik som ved konvertering fra LAB eller CMYK til RGB, der farger kan ligge utenfor skjermens fargerom og må klippes. Derfor er fargen du får tilbake når du konverterer fra HSL til RGB og tilbake, identisk med originalen. Dette er en avgjørende forskjell fra konverteringer som involverer LAB eller CMYK, der klipping fører til fargeskift.
Slik fungerer omformeren
Verktøyet på denne siden tar én HSL-verdi som inndata og viser umiddelbart sju forskjellige fargerepresentasjoner:
- HEX – seks heksadesimale siffer, f.eks.
#4F46E5 - RGB – tre desimale tall 0–255, f.eks.
79, 70, 229 - HSL – den opprinnelige inndata
- HSV – Hue, Saturation, Value (en annen variant der Value erstatter Lightness)
- CMYK – Cyan, Magenta, Yellow, Key (svart) – estimert for skjerm
- LAB – CIE Lab* – et standardisert fargerom uavhengig av enhet
Inndatafeltet forventer formatet hue, saturation%, lightness% – for eksempel 243, 75%, 59%. Hvis du skriver inn ugyldige verdier, viser verktøyet meldingen:
«Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.»
Alle oppdateringer skjer umiddelbart uten sideinnlasting. Beregningene utføres i nettleseren din – ingen data sendes til noen server. Dette betyr at du kan jobbe trygt med designfiler uten å bekymre deg for personvern.
RGB, HEX og skjermens fargerom
RGB er en additiv fargemodell: jo høyere tall, jo mer lys. Svart er rgb(0,0,0), hvitt er rgb(255,255,255). HEX er en base-16-forkortelse: #RRGGBB, der hver kanal går fra 00 til FF. HEX-koden #4F46E5 tilsvarer R=79, G=70, B=229. Forholdet er lineært – #FFFFFF er rgb(255,255,255).
Det er viktig å forstå at CMYK-verdiene som vises, er estimater for på-skjerm-bruk. Profesjonell trykking krever ICC-profiler som tar hensyn til papirtype, blekk og printerkalibrering. Derfor bør du ikke stole blindt på CMYK-tallene fra verktøyet for endelig trykk – bruk dem som utgangspunkt og verifiser med en trykkprofil.
Verktøyet konverterer til standard sRGB-fargerommet, som er det vanligste for web og skjerm. Dette er også grunnlaget for LAB-verdiene, som beregnes via en mellomkonvertering til XYZ. Fordi HSL og RGB opererer innenfor samme sRGB-fargerom, er konverteringen fri for klipping og tap.
Hvem har nytte av dette verktøyet?
- Designere som bygger fargepaletter i HSL fordi det er intuitivt – de kan eksperimentere med ulike lyshetsnivåer uten å miste fargetonen. Når paletten er klar, trenger de RGB-verdier for å implementere i CSS eller i designverktøy som Figma.
- Frontend-utviklere som overfører fargeverdier fra et designdokument (ofte oppgitt i HSL) til kode. CSS støtter riktignok
hsl()direkte, men eldre systemer eller WebGL krever RGB. I tillegg gir HEX den mest kompakte representasjonen for statiske verdier. - Alle som foretrekker HSL for å resonnere om farge, men må oppgi RGB til kolleger eller verktøy som ikke støtter HSL.
Verktøyet sparer tid og eliminerer hoderegning eller manuell oppslag av konverteringstabeller. Siden konverteringen er tapasfri, kan du være trygg på at RGB-verdiene er korrekte.
Vanlige feil og forbehold
Den vanligste feilen er å skrive inn HSL uten prosenttegn eller med feil rekkefølge. Formatet må være hue, saturation%, lightness%. Hue er et heltall eller desimaltall (0–360), saturation og lightness må ha %-tegn. Mellomrom er valgfrie, men anbefales for lesbarhet.
CMYK-utdataene er kun estimater. Papir, blekk og printere har hver sin fargegjengivelse, så verdiene kan avvike vesentlig i trykk. Bruk CMYK-delen som veiledning, ikke som fasit.
Alle beregninger skjer lokalt – ingen data sendes over nettet. Dette er viktig for designere som arbeider med konfidensielle fargepaletter.
En annen styrke: det er ingen utenfor-gamut-klipping. Når du konverterer fra for eksempel LAB eller CMYK til RGB, kan farger ligge utenfor det RGB kan vise, og da må de "klippes" – noe som endrer fargen. HSL-til-RGB har ikke dette problemet fordi HSL og RGB opererer innenfor samme sRGB-fargerom. Derfor kan du trygt konvertere frem og tilbake uten å miste informasjon.
Ofte stilte spørsmål (FAQ)
Hvordan skriver jeg inn HSL i verktøyet?
Bruk formatet hue, saturation%, lightness%. Eksempel: 243, 75%, 59%. Hue kan være et tall eller desimaltall. Saturation og lightness må ha prosenttegn.
Hva betyr de forskjellige fargemodellene?
- RGB: additiv modell for skjerm. Rødt, grønt, blått lys.
- HSL: fargetone, metning, lyshet – intuitivt for mennesker.
- HSV: som HSL men med Value (lysstyrke) i stedet for Lightness.
- CMYK: subtraktiv modell for trykk. Cyan, Magenta, Yellow, Key (svart).
- LAB: CIE Lab*, en enhetsoppløst modell som er uavhengig av enhet.
Hvorfor er CMYK-verdiene bare estimater?
Profesjonell fargestyring avhenger av spesifikke ICC-profiler for papir, blekk og printer. Verktøyet bruker en standardformel for å estimere CMYK, men dette kan avvike fra faktisk trykkresultat.
Kan jeg konvertere tilbake fra RGB til HSL?
Ja, konverteringen er tapasfri og reversibel innenfor sRGB. Verktøyet viser både HSL og RGB samtidig, så du kan se at de matcher.
Hvorfor endrer lyshet i HSL ikke fargetonen?
Fordi HSL-modellen er konstruert slik at lyshet (lightness) er uavhengig av hue. Når du øker lyshet mot 100%, nærmer du deg hvitt, men fargetonen (hue) forblir den samme inntil du når 0% (svart) eller 100% (hvit), der fargen forsvinner. Dette er en stor fordel for palettgenerering.
Er konverteringen nøyaktig?
Ja, for alle gyldige HSL-verdier innenfor 0–360 hue og 0–100% saturation/lightness. Siden konverteringen er matematisk eksakt, får du alltid samme RGB-trio for samme HSL. Det er ingen avrundingsfeil av betydning.