Hvad gør denne side unik
De fleste farvekonverteringsværktøjer oversætter blot tal fra én model til en anden uden at forklare, hvorfor den ene model foretrækkes frem for den anden. HSL til RGB er bygget på en grundlæggende indsigt: HSL er designet til menneskelig ræsonnering om farver, mens RGB er det arbejdssprog, en skærm bruger til at udsende lys.
Når du justerer lysstyrken (lightness) i HSL, forbliver selve nuancen (hue) fuldstændig intakt. Det er umuligt i RGB, hvor en ændring af én kanal altid påvirker den opfattede nuance. Derfor bruges HSL systematisk til palette- og temagenerering – du kan mørkne en farve uden at den skifter til en anden nuance, hvilket er afgørende for konsistente design systemer.
Konverteringen er tabsløs. Hver gyldig HSL-værdi (hue 0–360, saturation og lightness 0–100%) afbildes entydigt til én RGB-tripel inden for skærmens visbare område. Der forekommer ingen out-of-gamut-klipping, som man ser ved konverteringer fra LAB eller CMYK til RGB. Det betyder, at hvis du konverterer en farve fra HSL til RGB og tilbage igen, får du præcis den samme HSL-værdi. Der er intet farveskift, ingen afrundingsfejl, der akkumuleres.
En anden vigtig detalje: værktøjet kører udelukkende i din browser. Alle beregninger foregår lokalt – intet du indtaster uploades til nogen server. Det gør det sikkert at bruge selv med fortrolige designfiler.
Sådan fungerer HSL til RGB-konverteringen
HSL-modellen opdeler farven i tre uafhængige dimensioner:
- Hue (0–360°) angiver placeringen på farvecirklen. 0° = rød, 120° = grøn, 240° = blå.
- Saturation (0–100%) bestemmer farvens renhed. 0% er gråtoner, 100% er fuld mætning.
- Lightness (0–100%) styrer hvor lys farven er. 0% = sort, 100% = hvid, 50% = ren nuance.
RGB (rød, grøn, blå) bruger derimod tre kanaler, hver fra 0 til 255, som direkte styrer intensiteten af de tre farver i skærmens lysudsendelse.
Konverteringen følger en veletableret algoritme. Først beregnes en mellemrepræsentation baseret på relative kromatiske komponenter. For eksempel: indtast 243, 75%, 59%. Hue 243° ligger i det blåviolette spektrum. Saturation 75% og lightness 59% giver en middellys, mættet nuance. Algoritmen omregner dette til RGB-værdierne 79, 70, 229 – en dyb blåviolet. Prøv selv: du kan verificere resultatet ved at indtaste RGB-værdierne i ethvert standard farvevælger-værktøj og se, at du får samme HSL tilbage.
Matematisk set er konverteringen baseret på stykvis lineære funktioner, der afhænger af hvilket segment af farvecirklen H befinder sig i. Der er ingen ikke-lineære transformationer som gamma-korrektion involveret (det er først senere i display-kæden). Algoritmen er defineret i CSS Color Module Level 4 og er identisk med den, der bruges i HTML Canvas og alle moderne browsere.
Inputs og outputs – alle felter opdateres samtidig
Værktøjets interface er enkelt: du indtaster en HSL-værdi i feltet, og samtidig opdateres alle seks output-felter øjeblikkeligt:
| Output | Format | Eksempel (for HSL 243, 75%, 59%) |
|---|---|---|
| HEX | # + 6 hex-cifre |
#4F46E5 |
| RGB | tre tal 0–255 | 79, 70, 229 |
| HSL | hue, saturation%, lightness% | 243, 75%, 59% |
| HSV | hue, saturation%, value% | 243, 69%, 90% |
| CMYK | fire procentværdier | 65%, 69%, 0%, 10% |
| LAB | L*, a*, b* med decimaler | 34, 16, -42 |
Alle felter opdateres i realtid. Hvis du redigerer HSL-feltet, genberegnes resten straks uden at du skal trykke på en knap. Det gør værktøjet brugbart som en live-oversætter mellem farvemodeller.
Det er værd at bemærke, at CMYK-outputtet er en on-screen-estimat. Professionel trykning bruger specifikke ICC-profiler, papirtyper og printeropsætning, som ændrer den faktiske blækblanding. Derfor bør du ikke bruge dette værktøjs CMYK-værdier direkte i et trykproduktions workflow – anvend i stedet en korrekt profileret konvertering i Adobe Color eller lignende.
Hvem har brug for dette værktøj
- Designere, der bygger farvepaletter eller temaer. Når du arbejder i HSL, kan du systematisk variere lightness for at skabe skygger og highlights uden at miste nuancen. Derefter skal du bruge RGB-værdierne til at implementere paletten i kode.
- Frontend-udviklere. De fleste designværktøjer (Figma, Sketch, Adobe XD) viser farver som HSL, men CSS og JavaScript forventer ofte RGB eller HEX. I stedet for manuelt at omregne eller slå op i en konverter, kan du indtaste HSL direkte og få den nøjagtige RGB-tripel.
- Alle, der foretrækker at tænke i farver på en menneskelig måde. HSL er intuitiv: “gør den lidt mørkere” = sænk lightness. “Gør den mindre skrigende” = sænk saturation. Når du har fundet den perfekte farve, giver værktøjet dig de skærmklare tal.
Værktøjet er ikke kun til CSS. Du kan bruge RGB-værdierne i SVG, Canvas, WebGL, Python-biblioteker som PIL/Pillow, eller ethvert andet sted, hvor farver angives som 8-bit per kanal.
Edge cases og begrænsninger
Hvis du indtaster en ugyldig HSL-værdi – for eksempel 500, 100%, 50% (hue over 360) eller 200, 150%, 50% (saturation over 100%) – viser værktøjet fejlmeddelelsen:
"Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."
Formatet kræves med komma mellem tallene og procenttegn på de to sidste. Mellëmrum er valgfrie, men anbefales for læsbarhed.
Da konverteringen er tabsløs, er der ingen begrænsning i antallet af konverteringer. Du kan gentagne gange skifte mellem HSL og RGB uden at farven ændrer sig. Det modsatte gælder dog ikke for CMYK: på grund af den ikke-lineære konvertering fra RGB til CMYK (og tilbage) kan der opstå små afvigelser, især for farver uden for trykfarvernes gamut. Derfor vises CMYK som et estimat.
En anden praktisk begrænsning: hsl-værdier med lightness 0% eller 100% giver altid henholdsvis sort (RGB 0,0,0) og hvid (255,255,255), uanset hue og saturation. Det er korrekt adfærd – på det punkt er der intet at konvertere.
Ofte stillede spørgsmål
Hvad sker der hvis jeg indtaster en ugyldig HSL-værdi?
Værktøjet viser straks en fejlmeddelelse med det korrekte format. Felterne nulstilles ikke – du kan rette indtastningen og fortsætte.
Er konverteringen præcis nok til brug i produktion?
Ja. Algoritmen er standardiseret i CSS Color Module Level 4 og bruger flydende komma-præcision. For almindelig webbrug er den tilstrækkelig. Hvis du har brug for højere præcision (f.eks. 16-bit per kanal), skal du benytte specialiseret software.
Hvorfor vises CMYK som et estimat og ikke en præcis værdi?
CMYK-konvertering afhænger af specifikke ICC-profiler, papirtype og printeropsætning. Den simple algoritme, der bruges her, antager en idealiseret farverum. I professionel trykning skal du altid benytte en profileret konvertering.
Kan jeg konvertere tilbage fra RGB til HSL i samme værktøj?
Nej, denne side konverterer kun fra HSL til RGB (og de andre modeller). Men da konverteringen er tabsløs, kan du indtaste en RGB-værdi i et andet værktøj og få HSL tilbage – forudsat at RGB-værdien er opnået fra dette værktøj, vil den matche præcist.
Hvad er forskellen på HSL og HSV?
Begge bruger hue, saturation og en tredje dimension. I HSL er den tredje dimension lightness (0% = sort, 100% = hvid, 50% = ren nuance). I HSV er det value (0% = sort, 100% = maksimal lysstyrke). HSV giver ofte mere levende farver ved høj saturation, mens HSL er mere intuitiv til at variere lyshed uden at ændre nuance. Værktøjet viser begge, så du kan vælge den model, der passer til dit arbejde.
Kan jeg bruge værktøjet offline?
Ja. Siden kører udelukkende i din browser med JavaScript. Ingen data sendes til nogen server. Så længe du har loadet siden én gang, kan du arbejde offline.