Konverter HSL til HEX

Hvad HSL-til-HEX-værktøjet gør

Siden omdanner en HSL-farve (hue, saturation, lightness) til en hexadecimal farvekode (HEX). Brugeren indtaster en farvetone (0–360 °), en mætningsprocent (0–100 %) og en lyshedsprocent (0–100 %). Straks vises den tilsvarende HEX-kode i både sekscifret form (f.eks. #4f46e5) og – hvis hver RGB-kanal kan repræsenteres med et enkelt hex-ciffer – den forkortede trecifrete form (f.eks. #abc). Alle øvrige farvefelter (RGB, HSV, CMYK, LAB) opdateres samtidigt, så man får et komplet sæt af farveværdier i én arbejdsgang.

Værktøjet kræver ingen installation eller dataoverførsel; al beregning foregår i browseren. Det er en dedikeret konverter, ikke en generel farvevælger. Det eneste formål er at oversætte mellem to farvemodeller, der bruges i vidt forskellige sammenhænge.

Hvad gør denne side unik

Mange farveværktøjer tilbyder konvertering mellem formater, men denne side er specifikt bygget til HSL-til-HEX. HSL er en farvemodel, der er designet til menneskelig ræsonnering om farve: ved at ændre lysheden alene bevares farvetonen, hvilket gør modellen ideel til palet- og temagenerering. HEX derimod er en sekscifret (eller trecifret forkortet) RGB-notation; den indeholder ingen alfakanal, medmindre man bruger den ottecifrede udgave.

Fordi HSL og HEX begge opererer inden for sRGB-gamut, er konverteringen direkte og tabsløs. Det adskiller sig fra konverteringer, der involverer LAB eller CMYK, hvor farver uden for gamut kan blive justeret. Her sker der ingen beskæring: enhver gyldig HSL-farve giver en gyldig HEX-kode inden for det synlige sRGB-område.

En anden pointe: siden opdaterer alle felter i realtid, mens brugeren skriver. Det er nyttigt, når man eksperimenterer med farver og vil se konsekvensen af små justeringer i mætning eller lyshed. Samtidig vises CMYK-værdien, men den er kun et skærmestimat og bør ikke forveksles med professionelle trykværdier.

Input og output: hvordan konverteringen foregår

Inputformat: Brugeren angiver tre værdier:

• Farvetone (0–360), typisk uden enhed
• Mætning (0–100 %) med procenttegn
• Lyshed (0–100 %) med procenttegn

Eksempel: 243, 75%, 59%

Outputformat: Primært en HEX-kode på formen #RRGGBB (store eller små bogstaver – begge accepteres, men værktøjet returnerer typisk små bogstaver). Hvis hver RGB-kanal består af samme cifferpar (f.eks. #aabbcc → #abc), vises den trecifrete forkortelse som ekstra information.

Hvordan konverteringen virker bag kulisserne:
HSL konverteres først til RGB ved hjælp af standardformler (se nedenfor). Derefter oversættes hver RGB-kanal (heltal 0–255) til to hex-cifre. F.eks.:

• HSL (243, 75%, 59%) → RGB (79, 70, 229)
• 79 → 4F, 70 → 46, 229 → E5 → #4f46e5

Den matematiske algoritme for HSL→RGB er velkendt og implementeret i de fleste browsere. Der er ingen afvigelser; værktøjet følger CSS Color Module Level 4-specifikationen.

Samtidig opdatering: Når brugeren ændrer HSL, opdateres HEX, RGB, HSV, CMYK og LAB samtidigt. Det gør det muligt at sammenligne farveværdier på tværs af modeller uden at skulle genindlæse eller klikke.

Regler og kanttilfælde

Værktøjet kontrollerer, at input er gyldigt. Hvis farvetonen er uden for 0–360, eller hvis mætning eller lyshed mangler procenttegn eller er uden for 0–100, vises fejlmeddelelsen:

"Indtast HSL som farvetone 0–360 med to procenter, f.eks. 243, 75 %, 59 %."

Dette er den eneste fejlmeddelelse – den dækker både forkert format, manglende procenttegn og værdier uden for området.

Kanttilfælde og deres håndtering:

Hvad sker der med indtastning uden procenttegn?
Hvis brugeren skriver 50 i stedet for 50%, opfatter værktøjet det som ugyldigt og viser fejlbeskeden. Procenttegnet er obligatorisk, fordi CSS og de fleste farveværktøjer kræver det.

CMYK-estimat: Værdien for CMYK er en simpel omregning og tager ikke hensyn til trykprofil eller papirtype. Den er kun vejledende.

Hvem har brug for dette værktøj

• Designere, der arbejder med farvepaletter i HSL (f.eks. i Figma, Sketch eller Adobe XD) og har brug for HEX-koder til implementering i kode eller designfiler.
• Frontend-udviklere, der modtager HSL-værdier fra designere og skal omdanne dem til CSS-egenskaber som color eller background-color.
• Accessibility-specialister, der justerer lysheden i HSL for at opnå WCAG-kontrastforhold og samtidig bevare farvetonen – den resulterende HEX-kode kan så bruges i produktion.
• Temabyggere, som genererer farveskemaer ved at manipulere saturation og lightness i HSL og har brug for at eksportere et sæt HEX-værdier.

Siden er særligt nyttig, når man arbejder med designhåndoveringer, hvor HSL ofte bruges i de tidlige faser, mens HEX forventes i slutproduktet.

Forståelse af HSL og HEX – dybere indblik

HSL (Hue, Saturation, Lightness) er en farvemodel, der bygger på RGB, men præsenterer farver på en måde, der er intuitiv for mennesker. Hue er placeringen på farvecirklen (0° = rød, 120° = grøn, 240° = blå). Saturation angiver farvens renhed (0% = grå, 100% = fuld mætning). Lightness styrer, hvor lys eller mørk farven er (0% = sort, 100% = hvid).

HEX (hexadecimal) er en kompakt repræsentation af RGB, hvor hver kanal angives med to hex-cifre (0–255 → 00–FF). Formatet #RRGGBB er standard i CSS og HTML. Den trecifrede forkortelse #RGB er en shorthand, der fordobler hvert ciffer (f.eks. #F0A → #FF00AA). Forkortelsen bruges kun, når det er muligt, og kun værktøjet viser den som supplement.

Relationen mellem HSL og RGB:
HSL er en matematisk transformation af RGB. Formlerne involverer en hjælpevariabel, der afhænger af, hvilken RGB-kanal der er maksimum/minimum. Den præcise algoritme findes i CSS-specifikationen og er grundlaget for konverteringen. Fordi begge modeller opererer i lineært sRGB (efter gamma-dekodning), er konverteringen entydig og tabsløs.

Almindelige fejl, brugere begår:

• Glemmer procenttegn på mætning og lyshed.
• Indtaster hue uden for 0–360 (f.eks. 400).
• Forveksler hue-enheder (radianer eller grader – her bruges grader).
• Tror, at HEX altid har otte cifre (alfa) – men på denne side bruges kun seks eller tre.

Ofte stillede spørgsmål (FAQ)

1. Hvorfor får jeg fejlmeddelelsen "Indtast HSL som farvetone 0–360 med to procenter"?
Værktøjet kræver, at du indtaster alle tre værdier korrekt: hue som et tal mellem 0 og 360, saturation og lightness som tal efterfulgt af procenttegn (f.eks. 50%). Mangler procenttegnet, eller er hue uden for intervallet, vises fejlen.

2. Kan jeg bruge decimaltal i HSL?
Ja. Hue kan angives med decimaler (f.eks. 243,5°), og saturation/lightness kan have decimaler (f.eks. 75,3%). Værktøjet accepterer komma eller punktum som decimalseparator, men CSS bruger punktum.

3. Hvad betyder den trecifrede HEX-kode, der vises nogle gange?
Hvis hver af de tre RGB-kanaler kan repræsenteres med ét hex-ciffer, fordi de er identiske par (f.eks. #aabbcc → #abc), vises forkortelsen som ekstra oplysning. Du kan bruge begge former i CSS; de er ækvivalente.

4. Er CMYK-værdien præcis nok til tryk?
Nej. CMYK er kun et skærmestimat og tager ikke højde for trykkarakteristika, ICC-profiler eller papirtype. Brug den kun som grov retningslinje; professionel trykforberedelse kræver dedikerede værktøjer.

5. Bliver mine data uploadet til en server?
Nej. Al konvertering foregår i din browser. Intet, du indtaster, sendes til nogen server. Det er en rent klientbaseret funktion.

6. Kan jeg konvertere HEX til HSL på samme side?
Nej. Denne side er udelukkende til HSL-til-HEX. Der findes separate sider på værktøjssitet til den omvendte konvertering.

7. Hvorfor vises HEX-koden nogle gange med store bogstaver og nogle gange med små?
Værktøjet returnerer HEX med små bogstaver som standard. Men CSS accepterer både store og små bogstaver, så du kan selv vælge. Værktøjet gør ingen forskel.

8. Hvad sker der, hvis jeg indtaster hue = 360?
360° svarer til 0° på farvecirklen. Værktøjet behandler 360 som 0 og giver den samme farve som hue = 0 (rød). Det er i overensstemmelse med standarden.