Konverter RGB til HSL

Hvordan RGB repræsenterer farver på skærme

RGB står for rød, grøn og blå og er den farvemodel, som næsten alle skærme bruger. Modellen bygger på additiv farveblanding: jo mere lys du tilfører fra hver kanal, jo lysere bliver farven. Når alle tre kanaler er på maksimum (255, 255, 255), får du hvidt; når alle er på 0, får du sort.

Hver kanal angives som et heltal mellem 0 og 255. Det giver 256 × 256 × 256 = 16,7 millioner mulige farver. Skalaen er valgt, fordi 8 bit pr. kanal (i alt 24 bit) længe har været standarden for digital farvegengivelse.

Værktøjet arbejder inden for sRGB-farverummet, som er den mest udbredte reference for skærme på internettet. Det betyder, at både RGB-inddata og de konverterede HSL-værdier er knyttet til samme farverum. Hvis du indtaster RGB-værdier, der ligger uden for sRGB-gamut (hvilket kun kan ske, hvis du skriver dem ind manuelt, da almindelige skærme ikke kan vise dem), justerer værktøjet dem til nærmeste visbare farve. Det sker især, hvis du kommer fra en CMYK- eller LAB-indtastning.

Hvordan HSL modellerer menneskelig farveopfattelse

HSL står for hue (farvenuance), saturation (mætning) og lightness (lyshed). I modsætning til RGB, hvor du skal ændre flere kanaler samtidig for at gøre en farve lysere eller mørkere, adskiller HSL de tre aspekter af en farve:

Fordelen ved HSL er intuitiv: du kan tage en brandfarve, sænke lysheden for at få en mørkere variant og beholde nøjagtig samme nuance. I RGB ville du skulle gætte, hvilke kombinationer af tal der gav en mørkere, men stadig genkendelig farve.

Værktøjet viser HSL som en vinkel i grader og to procenter. Hvis du indtaster en HSL-værdi direkte, konverterer værktøjet den tilbage til RGB. Formatet skal være præcist: "243, 75%, 59%". Ugyldig indtastning giver fejlmeddelelsen: "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."

Hvorfor HSL er foretrukket til paletter og temaer

UI/UX-designere og frontend-udviklere bruger HSL, fordi modellen gør det let at skabe farvesystemer, der er sammenhængende og tilgængelige. Du kan generere en hel palet fra én grundfarve ved kun at justere lyshed og mætning:

• Tints – tilføj hvid: øg lysheden, sænk mætningen.
• Shades – tilføj sort: sænk lysheden.
• Tones – tilføj grå: sænk mætningen uden at ændre lyshed.

I praksis betyder det, at en designer kan vælge en primær farve (f.eks. hue 243°) og med det samme beregne 10 varianter til knapper, baggrunde, overskrifter og kantlinjer. CSS understøtter dette direkte med funktionerne hsl() og hsla().

Data-visualiseringsdesignere bruger også lyshedskanalen til at lave sekventielle farveskalaer, fordi lyshed intuitivt opfattes som en orden fra lys til mørk. En stigende lyshed kan repræsentere stigende værdier i et diagram, uden at betragteren bliver forvirret af farveskift.

Værktøjet opdaterer alle felter samtidig, når du redigerer ét. Hvis du ændrer HSL-lysheden, ser du straks den nye HEX-, HSV- og CMYK-værdi. Alle konverteringer sker i din browser; intet sendes til en server.

Konverteringen mellem RGB og HSL

Algoritmen bag konverteringen er ligetil, men kræver et par trin. Først normaliseres RGB-værdierne til decimaltal mellem 0 og 1 ved at dividere med 255. For en farve som (79, 70, 229) får vi:

• R' = 79/255 ≈ 0,310
• G' = 70/255 ≈ 0,275
• B' = 229/255 ≈ 0,898

Derefter finder man minimum og maksimum af de tre værdier. Her er maks = 0,898 (blå) og min = 0,275 (grøn). Forskellen delta = maks - min.

Hvis delta er 0, er farven grå, og hue sættes til 0. Ellers beregnes hue ud fra, hvilken kanal der er maks:

• Hvis R er maks: hue = 60° × ((G - B) / delta mod 6)
• Hvis G er maks: hue = 60° × ((B - R) / delta + 2)
• Hvis B er maks: hue = 60° × ((R - G) / delta + 4)

For vores blå-dominerede farve bliver hue ca. 243°.

Lyshed beregnes som (maks + min) / 2, og mætning afhænger af lysheden: hvis lysheden er 0 eller 1, er mætning 0; ellers er mætning = delta / (1 - |2 × lyshed - 1|).

Værktøjet håndterer alle kanttilfælde korrekt. Indtaster du ugyldig RGB som "79, 70" eller "79, 70, 300", får du advarslen: "Enter RGB as three numbers 0–255, like 79, 70, 229." Der er ingen afrundingsfejl, der kan få en farve til at hoppe til en anden nuance.

HSL til tilgængelighed og kontrast

WCAG 2.1 kræver et kontrastforhold på mindst 4,5:1 for normal tekst og 3:1 for stor tekst. HSL gør det nemt at justere en farves lyshed, indtil den opfylder kravet, uden at ændre dens identitet.

Hvis din primære blå (hue 243°, mætning 75%, lyshed 59%) ikke har tilstrækkelig kontrast mod hvid baggrund, kan du sænke lysheden til 40% eller 30%. Farven forbliver genkendelig blå, men bliver mørk nok til at bestå kontrasttesten. I RGB ville det kræve gætværk eller et separat værktøj.

Tema-byggere udnytter denne egenskab til at generere lyse og mørke tilstande af en grænseflade. En brandfarve bevares som hue, mens lysheden justeres globalt. Resultatet er et sammenhængende design, hvor brugeren let kan skifte mellem tilstande uden at miste farvegenkendelse.

Begrænsninger ved HSL-modellen

HSL er ikke perceptuelt uniform. Det betyder, at to farver med samme lyshedsprocent kan opleves som værende forskelligt lyse. Gul ved lyshed 50% virker meget lysere end blå ved samme lyshed. Det skyldes menneskets øjnes forskellige følsomhed over for bølgelængder.

Hvis du har brug for farveskalaer, hvor afstanden mellem farver opfattes ens, er LAB eller LCh et bedre valg. LAB-modellen er designet til at være perceptuelt uniform, hvilket er grunden til, at værktøjet også viser LAB-værdier. Vær forsigtig: Hvis du indtaster en LAB- eller CMYK-værdi, der ligger uden for det synlige RGB-område, justerer værktøjet den til nærmeste visbare farve. Konverterer du den farve tilbage, kan der opstå en lille forskydning.

CMYK-outputtet er et skærmestimat. Modellen er beregnet til tryk, og de viste procenter bør ikke bruges til professionel tryksag uden verifikation. CMYK-til-RGB-konvertering er altid en tilnærmelse, fordi de to farverum har forskellige gamut.

Praktisk brug i webudvikling

I CSS kan du skrive color: hsl(243, 75%, 59%) i stedet for color: rgb(79, 70, 229). Fordelen opstår, når du manipulerer farver dynamisk med JavaScript. Du kan læse HSL-værdien, ændre lysheden og sætte den tilbage, uden at skulle konvertere mellem formater.

.btn-primary {
  background: hsl(243, 75%, 59%);
}
.btn-primary:hover {
  background: hsl(243, 75%, 45%);
}

Mange designsystemer og CSS-rammeværker (som Tailwind, Material UI) definerer farvepaletter i HSL eller i det beslægtede HWB. Det gør det muligt at generere alle varianter af en farve med én enkelt funktion.

Værktøjet viser også HSV (hue, saturation, value) – en model, der ligner HSL, men hvor lyshed erstattes af "value" (max RGB-værdi). HSV bruges ofte i billedredigeringssoftware som Photoshop, mens HSL er mere almindelig i webbaserede grænseflader.

Ofte stillede spørgsmål

Hvordan indtaster jeg RGB korrekt? Skriv tre heltal mellem 0 og 255 adskilt af komma eller mellemrum. For eksempel 79, 70, 229 eller 79 70 229. Værktøjet accepterer ikke decimaler.

Hvad sker der, hvis jeg indtaster ugyldig RGB? Du får vist fejlmeddelelsen: "Enter RGB as three numbers 0–255, like 79, 70, 229." Ingen konvertering finder sted.

Hvad er forskellen på HSL og HSV? HSL har en lyshedskanal, der går fra sort til hvid, og mætning falder mod grå. HSV har en værdikanal, der går fra sort til fuld farve, og mætning falder mod sort. HSL er mere intuitiv til paletter, HSV bruges ofte i farvevælgere.

Hvordan kan jeg stole på CMYK-værdierne? De er et skærmestimat. Brug dem til at få en idé om farvens trykresultat, men få altid en trykprøve, før du sender til produktion.

Hvorfor justerer værktøjet mine LAB- eller CMYK-værdier? Fordi de kan ligge uden for det farverum, som din skærm kan vise. Værktøjet klemmer dem ind i sRGB-gamut. Den justerede farve kan afvige lidt, hvis du konverterer den tilbage til LAB eller CMYK.

Hvordan bruger jeg HSL til at forbedre tilgængelighed? Juster lysheden, indtil kontrastforholdet er mindst 4,5:1 mod baggrunden. Du kan bevare hue, så farven stadig genkendes af brugerne. Værktøjet opdaterer alle felter i realtid, så du straks ser resultatet.