HEX og HSL – to forskellige måder at beskrive samme farve
Siden her tager en hex-farvekode – enten den fulde sekscifrede form som #1E90FF eller den forkortede trecifrede som #abc – og returnerer øjeblikkeligt den tilsvarende HSL-værdi (farvenuance i grader, mætning og lyshed i procent). HSL-repræsentationen er designet til menneskelig ræsonnering, hvilket gør det ligetil at justere lyshed eller mætning, mens samme nuance bevares. Samtidig viser siden farven i alle andre understøttede formater (HEX, RGB, HSV, CMYK, LAB), så du kan kopiere det format, du har brug for.
Det afgørende er forskellen mellem de to farvemodeller. HEX er en rå RGB-notation – seks hexadecimale cifre (eller trecifret stenografi), der direkte indkoder rød-, grøn- og blåværdier. Det er kompakt og udbredt i CSS og designværktøjer, men ikke intuitivt, når du skal foretage menneskeligt forståelige justeringer. HSL er bygget til menneskelig ræsonnering: farvenuance måles i grader (0–360), mens mætning og lyshed angives i procent. Ændrer du kun lysheden, forbliver nuancen uændret – derfor er HSL det foretrukne format til at generere farvepaletter og temasystemer.
Standard HEX (sekscifret eller trecifret) indeholder ingen gennemsigtighedsinformation, og HSL inkluderer heller ikke en alfakanal. Konverteringen beskæftiger sig altid med helt opaque farver.
Hvorfor HEX er kompakt, men HSL er intuitiv
HEX-koden #1E90FF består af tre par hexadecimale cifre: 1E (30 decimalt) for rød, 90 (144 decimalt) for grøn og FF (255 decimalt) for blå. Det er en direkte maskinlæsbar repræsentation af RGB-værdier i base-16. Trecifret stenografi som #abc udvides automatisk til #aabbcc – hvert ciffer fordobles. Denne kompakthed gør HEX ideelt til at skrive farver direkte i kode, men når du skal forstå farvens karakter eller foretage justeringer, er det besværligt.
HSL strukturerer informationen anderledes. Farvenuancen (hue) placerer farven på et 360-graders farvehjul: 0° er rød, 120° er grøn, 240° er blå. Mætning (saturation) angiver farvens intensitet fra 0% (grå) til 100% (fuld farveintensitet). Lyshed (lightness) går fra 0% (sort) over 50% (ren farve) til 100% (hvid). For #1E90FF bliver HSL-værdien hsl(210, 100%, 56%) – en klar blå med fuld mætning og medium lyshed. Denne opdeling gør det umiddelbart forståeligt, hvordan farven opfører sig, og hvordan du kan modificere den.
HEX er en rå RGB-notation. HSL er bygget til menneskelig ræsonnering. Det er den essentielle forskel, der driver behovet for konverteringen.
Sådan foregår konverteringen – fra hex-cifre til HSL-værdier
Konverteringen fra HEX til HSL foregår i to trin. Først oversættes hex-koden til RGB-værdier. For en sekscifret kode som #4f46e5 trækkes de tre par cifre ud: 4f (79 decimalt), 46 (70 decimalt) og e5 (229 decimalt). For trecifret stenografi som #abc gentages hvert ciffer: a → aa (170 decimalt), b → bb (187 decimalt), c → cc (204 decimalt). Resultatet er altid en triplet af heltal mellem 0 og 255.
Derefter konverteres RGB til HSL. Formlen normaliserer først hver RGB-kanal til intervallet 0–1 ved at dividere med 255. Derefter beregnes farvenuancen ud fra den dominerende og næstdominerende kanal. Mætningen udledes af forskellen mellem den højeste og laveste kanal divideret med lysheden. Lysheden er gennemsnittet af den højeste og laveste kanal. Den præcise matematik involverer betingede udtryk afhængigt af, hvilken kanal der er maksimum, men resultatet er en entydig HSL-værdi.
For #4f46e5 bliver RGB (79, 70, 229). Efter normalisering og konvertering fås hsl(243, 75%, 58%). Nuancen 243° ligger i det blåviolette område, mætningen 75% indikerer en stærk farve, og lysheden 58% placerer den lige over midten af lyshedsskalaen.
HEX indeholder ingen alfakanal, og HSL gør det heller ikke. Din farve er altid 100% opaque.
Input, output og samtidig visning på siden
Inputtet er en hex-farvekode. Du kan skrive den med eller uden det førende #. Siden accepterer både den fulde sekscifrede form (f.eks. #4f46e5 eller 4f46e5) og den forkortede trecifrede form (f.eks. #abc eller abc). Det eneste krav er, at inputtet er en gyldig hex-kode.
Outputtet er først og fremmest HSL-værdien: farvenuance i grader (0–360), mætning i procent (0–100%) og lyshed i procent (0–100%). Derudover viser siden farven i alle andre understøttede formater: HEX (genudskrevet som sekscifret), RGB (heltal 0–255), HSV (farvenuance, mætning, værdi – alle i procent eller grader), CMYK (procentvise værdier for cyan, magenta, gul og sort) og LAB (CIELAB med L*, a* og b*). Alle felter opdateres samtidigt, når du redigerer inputtet.
Hvis du indtaster #4f46e5, får du straks hsl(243, 75%, 58%) plus HEX, RGB, HSV, CMYK og LAB for samme farve. Du kan derefter kopiere det format, du har brug for, uden at skulle konvertere igen.
Regler, kanttilfælde og hvad du skal være opmærksom på
Siden accepterer kun gyldige sekscifrede eller trecifrede hex-koder. Indtaster du noget ugyldigt – for få cifre, ugyldige tegn eller et forkert antal tegn – vises fejlmeddelelsen: "Enter a hex color like #4f46e5 or #abc." Der er ingen støtte for firecifrede eller ottecifrede hex-koder, da disse inkluderer en alfakanal, som hverken HEX eller HSL på denne side håndterer.
Hvis du skifter til et andet farverum (f.eks. LAB eller CMYK) og indtaster en værdi uden for det synlige RGB-gamut, justeres farven til den nærmeste visbare farve. Konverterer du denne farve tilbage til hex, kan der opstå en lille forskydning. Dette sker, fordi nogle farver i LAB- og CMYK-rummet ikke kan gengives på en RGB-skærm. Værktøjet gør sit bedste for at holde farven så tæt på din oprindelige input som muligt, men en perfekt gengivelse er ikke altid mulig uden for RGB-gamut.
CMYK-værdierne er et estimat til skærmbrug. De bør ikke anvendes til professionel print uden forudgående kalibrering. Trykfarver opfører sig anderledes end skærmfarver på grund af subtraktiv farveblanding, papirtyper og trykprocesser.
Alle konverteringer foregår inde i din browser. Intet af det, du indtaster, uploades eller gemmes. Der er ingen serverkald, ingen cookies og ingen logning af farveværdier.
Hvem får mest ud af denne side?
Frontend-udviklere, der skriver CSS, kan konvertere en hex-farve fra et designmockup til HSL og derefter justere lysheden for hover-states eller temavarianter uden at skulle gætte sig frem. #4f46e5 bliver til hsl(243, 75%, 58%), og en lysere variant kan være hsl(243, 75%, 68%) eller hsl(243, 50%, 68%).
UI/UX-designere, der tænker i farvenuance, mætning og lyshed, kan matche en brand-farve givet i hex og straks se dens HSL-profil. Det gør det muligt at arbejde videre med farven i et designværktøj eller i kode på en måde, der føles naturlig.
Alle, der bygger en farvepalet, får glæde af HSL-strukturen. Komplementære farver findes ved at lægge 180° til nuancen. Analoge farver findes ved at justere nuancen med 30–60°. Monokromatiske skemaer laves ved at holde nuancen fast og variere mætning og lyshed. Det er enkelt og forudsigeligt.
Webaccessibility-auditorer, der skal verificere kontrastforhold i henhold til WCAG, finder HSL lettere at ræsonnere om end rå hex- eller RGB-værdier. Ved at justere lysheden kan de hurtigt finde en variant, der opfylder kontrastkravene, mens brandets farvenuance bevares.
Ofte stillede spørgsmål
Hvad sker der, hvis jeg indtaster en ugyldig hex-kode? Du får vist fejlmeddelelsen: "Enter a hex color like #4f46e5 or #abc." Værktøjet validerer inputtet og giver ingen konvertering, før koden er gyldig.
Hvorfor vises CMYK-værdier, hvis de kun er estimater? CMYK-værdierne er en simpel matematisk konvertering fra RGB, som fungerer som et udgangspunkt. Til professionel trykproduktion skal du altid kalibrere mod en specifik trykproces og papirtype. Brug værdierne som en orientering, ikke som en endelig specifikation.
Hvad er forskellen på HSL og HSV?
Begge modeller bruger farvenuance (hue), men behandler den anden og tredje dimension forskelligt. HSL har lyshed (lightness), hvor 100% altid giver hvid. HSV har værdi (value), hvor 100% giver den rene farve uden tilsat sort. En farve som hsl(0, 100%, 50%) er ren rød, mens hsv(0, 100%, 100%) også er ren rød, men for lysere eller mørkere varianter opfører de to modeller sig forskelligt. Siden viser begge formater, så du kan se forskellen direkte.
Kan jeg konvertere farver med en alfakanal (gennemsigtighed)? Nej. Standard HEX (sekscifret eller trecifret) indeholder ingen alfakanal, og HSL inkluderer heller ikke en. Alle konverteringer på denne side beskæftiger sig udelukkende med opaque farver. Hvis du har brug for at håndtere gennemsigtighed, skal du bruge et format som RGBA eller HSLA, som ikke understøttes her.
Hvad sker der, hvis en farve ligger uden for det synlige RGB-gamut? Farven justeres til den nærmeste visbare farve i RGB-rummet. Når du konverterer denne justerede farve tilbage til hex, kan den afvige en smule fra din oprindelige input. Dette sker typisk, når du arbejder med LAB- eller CMYK-værdier, der beskriver farver uden for en skærms gengivelsesområde.
Bliver mine data sendt til en server? Nej. Alle beregninger foregår udelukkende i din browser. Intet af det, du indtaster, uploades, gemmes eller deles. Du kan bruge værktøjet uden bekymring om privatlivets fred.