Hva verktøyet gjør
Denne siden konverterer en RGB-farge – tre tall fra 0 til 255 som beskriver hvor mye rødt, grønt og blått lys en skjerm skal blande – til HSL-formatet (hue i grader, saturation og lightness i prosent). Samtidig vises fargen i HEX, HSV, CMYK (et estimat for skjerm) og LAB. Hvis du redigerer ett av feltene, oppdateres samtlige andre øyeblikkelig. All omregning skjer i nettleseren din; ingenting du skriver inn blir lastet opp til noen tjener.
Det som gjør denne siden annerledes, er at den bytter ut det skjermnære RGB-rommet med HSL, et fargerom laget for menneskelig resonnement om farge. Der RGB krever at du endrer alle tre kanalene for å justere lysheten uten å endre fargetonen, lar HSL deg endre lightness uavhengig mens hue holder seg konstant. Derfor er HSL det foretrukne verktøyet for å lage fargepaletter, temaer og tilgjengelige kontrastvariasjoner.
RGB – hvordan skjermer blander lys
RGB er en additiv fargemodell basert på hvordan katodestrålerør og senere LCD- og OLED-skjermer fungerer: tre lyspunkter (rød, grønn, blå) skilles ut på subpiksel-nivå, og intensiteten av hver bestemmes av et tall fra 0 til 255. På digitalt nivå tilsvarer dette 8 bits per kanal, totalt 24 bits per piksel – 16,7 millioner mulige farger.
Når alle tre kanalene er 0, får vi svart. Når alle er 255, får vi hvitt (i den forstand at skjermens hvite punkt bestemmes av hvitbalansen). Selve tallene er lineariserte i forhold til spenning i eldre systemer, men i praksis arbeider de fleste verktøy med sRGB-rommet, der en gamma-kurve er påført for å kompensere for katodestrålerørets ikke-lineære respons. Når du skriver inn 79, 70, 229 i RGB-feltene, beskriver du altså en bestemt blanding av lyspikslers intensitet som skjermen skal vise.
HSL – et menneskelig fargespråk
HSL står for Hue, Saturation, Lightness. Hue plasseres på en fargesirkel med 0° for rødt, 120° for grønt, 240° for blått og 360° tilbake til rødt. Saturation angir fargens renhet som en prosentandel: 0 % er grått (ingen fargetone), 100 % er den mest mettede versjonen. Lightness forteller hvor lys fargen er: 0 % er svart, 100 % er hvitt, 50 % er den «rene» fargen med full metning.
Modellen ble utviklet på 1970-tallet for å gjøre fargespesifikasjon mer intuitiv for grafiske designere. I motsetning til RGB, der en endring i én kanal ofte uforvarende endrer opplevd hue og metning, kan du i HSL justere lightness opp og ned mens hue forblir identisk. Saturation kan tones ned uten at fargetonen skifter. Dette gjør HSL ideelt for å generere farger som skal oppleves som «samme farge, bare lysere/mørkere».
Hvorfor HSL brukes til paletter og temaer
UI/UX-designere trenger ofte å lage et helt fargehierarki fra én basefarge: en lys bakgrunn, en mørk overskrift, en dempet hover-tilstand. I HSL gjøres dette ved å holde hue konstant, justere lightness opp og ned, og eventuelt redusere saturation for dempede varianter. For eksempel: basefargen #4F46E5 – en blålilla – har HSL-verdiene 243°, 75%, 59%. En lys bakgrunn kan være 243°, 75%, 95%, en mørk overskrift 243°, 75%, 20%. Hue er uendret.
Frontend-utviklere som oversetter design-tokens til CSS kan bruke hsl()-funksjonen direkte:
--primary: hsl(243, 75%, 59%);
--primary-light: hsl(243, 75%, 95%);
--primary-dark: hsl(243, 75%, 20%);
Dette er mye lettere å lese og vedlikeholde enn å regne på HEX-verdier. JavaScript-kode som dynamisk endrer tema, kan justere lightness-trinnet uten å måtte konvertere tilbake til RGB.
Datavisualiseringsdesignere setter pris på HSLs lightness-kanal fordi den gir en intuitiv rekkefølge for sekvensielle fargeskalaer – men merk at HSL ikke er perceptuelt uniformt (se under begrensninger), så for helt nøyaktige graderinger kan LAB eller OKLAB være bedre.
Matematikken bak RGB→HSL
Konverteringen foregår i flere steg. Først normaliseres RGB-verdiene til intervallet ved å dele hver av dem på 255. Deretter finner vi maksimum (M) og minimum (m) av de tre normaliserte verdiene, og beregner differansen Δ = M – m.
Lightness (L) er (M + m) / 2, oppgitt som prosent (multipliser med 100).
Saturation (S) avhenger av lightness:
- Hvis Δ = 0 er fargen grå og saturation = 0 %.
- Hvis L ≤ 0,5: S = Δ / (M + m).
- Hvis L > 0,5: S = Δ / (2 – M – m). Multipliser med 100 for prosent.
Hue (H) beregnes avhengig av hvilken kanal som er M:
- Hvis M = R: H = ((G – B) / Δ) mod 6.
- Hvis M = G: H = ((B – R) / Δ) + 2.
- Hvis M = B: H = ((R – G) / Δ) + 4.
Deretter konverteres H til grader: multipliser med 60, og juster eventuelt til [0, 360). Eksempel med 79, 70, 229 – etter normalisering: R ≈ 0,310, G ≈ 0,275, B ≈ 0,898. M = 0,898 (blå), m = 0,275, Δ = 0,623. L = (0,898+0,275)/2 = 0,5865 → 58,65 %. Siden L > 0,5: S = 0,623/(2–0,898–0,275) = 0,623/0,827 ≈ 0,753 → 75,3 %. For hue: M = B, så H = ((0,310–0,275)/0,623) + 4 = 0,056 + 4 = 4,056. Multipliser med 60 = 243,36°. Altså hsl(243°, 75%, 59%).
HSL for tilgjengelighet og kontrast
WCAG 2.1 krever et kontrastforhold på minst 4,5:1 for normal tekst og 3:1 for stor tekst. Lightness i HSL korrelerer omtrent med luminans, men ikke perfekt. Likevel er det en praktisk snarvei: du kan beholde en basis-hue og justere lightness opp/ned til kontrasttesten bestås.
For eksempel: Hvis en knapp har hsl(243, 75%, 59%) og bakgrunnen er hvit (lightness 100 %), er kontrastforholdet ca. 3,5:1. Ved å mørkne til hsl(243, 75%, 40%) øker kontrasten til over 5:1. Fordi hue holdes konstant, beholder fargen sin identitet.
Pass likevel på at WCAG-relativ luminans beregnes fra lineære RGB-verdier (etter gamma-dekoding), ikke direkte fra HSL-lightness. Bruk HSL som et grovt estimat og verifiser med et kontrastverktøy.
Begrensninger ved HSL og alternativer
Selv om HSL er intuitivt, er det ikke perceptuelt uniformt. To farger med samme lightness (f.eks. gul og blå) kan oppleves svært forskjellig i lysstyrke. Gult ved 50 % lightness ser mye lysere ut enn blått ved 50 % lightness. Dette skyldes at menneskets følsomhet for grønnaktige bølgelengder er høyere enn for blå.
For vitenskapelig nøyaktige graderinger benyttes CIELAB (LAB på denne siden) eller OKLAB. LAB er designet for å være perceptuelt uniformt, men er ikke rettlinjet i forhold til RGB-gamut. Derfor oppstår kantsituasjonen nevnt i faktaarket: hvis du skriver inn en LAB- eller CMYK-verdi som ligger utenfor RGB-skjermens fargerom (f.eks. en svært mettet neonfarge), vil verktøyet justere den til nærmeste visbare RGB-farge. Når du deretter konverterer den fargen tilbake til LAB får du en litt annen verdi.
CMYK-estimatet på siden er kun veiledende. Ekte CMYK-trykk krever profiler (ICC) og papirhåndtering; denne omregningen forutsetter sRGB som utgangspunkt og en generisk separasjon. Ikke bruk utskriften direkte i grafisk produksjon.
Ofte stilte spørsmål
Hvordan skriver jeg inn RGB-verdiene?
Tre tall fra 0 til 255, separert med komma eller mellomrom – for eksempel 79, 70, 229. Mellomrom før og etter komma er valgfritt. Feil inndata gir feilmeldingen «Enter RGB as three numbers 0–255, like 79, 70, 229.»
Kan jeg skrive inn HSL og få RGB?
Ja. Skriv inn hue som tall 0–360, saturation og lightness med prosenttegn (f.eks. 243, 75%, 59%). Ugyldig format gir «Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.»
Hvorfor er CMYK-verdien bare et estimat?
Fordi CMYK-omregning avhenger av trykkprosess, papir og blekk. Verktøyet antar sRGB-kildeprofil og en enkel separasjon uten svartkanalstyring (GCR). For nøyaktig CMYK må du bruke profesjonell programvare med ICC-profiler.
Hva skjer hvis jeg skriver inn en LAB-farge som ikke finnes på skjerm?
LAB-rommet er større enn RGB-gamut. Hvis du oppgir en LAB-verdi utenfor sRGB, blir den justert til nærmeste mulige RGB-farge. Tilbakekonvertering av den justerte fargen til LAB gir en litt annen LAB-verdi – det er forventet, fordi informasjon gikk tapt.
Kan jeg bruke HSL til å lage mørk modus automatisk?
Ja, en vanlig teknikk er å redusere lightness på bakgrunner og øke den på tekst, mens hue forblir uendret. Men pass på at mettede farger kan se annerledes ut i mørk modus – test alltid visuelt.
Hvorfor føles gul og blå med samme HSL-lightness så ulike?
Fordi HSL er en forenkling av menneskelig fargesyn som ikke tar hensyn til at øyet er mer følsomt for gult-grønt lys. Fargen med høyere opplevd lysstyrke (gul) føles lysere, selv om den har samme numeriske lightness. For bedre perceptuell uniformitet bør du bruke LAB eller OKLAB.