Konvertera HEX till HSL

Grunderna i HEX och HSL

HEX-färgkoder är en kompakt representation av RGB-värden där sex hexadecimala siffror (0–9 och A–F) delas upp i tre par för röd, grön och blå komponent. Exempelvis står #1E90FF för röd = 0x1E (30), grön = 0x90 (144), blå = 0xFF (255). En treställig förkortning som #abc expanderas automatiskt till #aabbcc – dubblerad siffra per kanal. Denna notation är standard i CSS och designverktyg eftersom den är kort, exakt och direkt kopplad till hur skärmar bygger färg med additiv RGB.

HSL (Hue, Saturation, Lightness) bryter ner färgen på ett sätt som är konstruerat för mänsklig uppfattning. Nyans (hue) anges i grader på en färgcirkel (0–360), där 0/360 är röd, 120 grön och 240 blå. Mättnad (saturation) är en procentandel som anger färgens intensitet – 0 % är gråskala, 100 % är renaste nyansen. Ljushet (lightness) är också procent, där 0 % är svart, 100 % vitt och 50 % ger den mest ”rena” färgen (maximal mättnad vid full ljushet är omöjlig). Denna struktur gör att du kan ändra ljushet utan att påverka nyans, vilket är fundamentalt annorlunda från RGB/HEX.

Behovet av konvertering uppstår när en designer får en HEX-kod från en mockup men vill arbeta i HSL för att skapa tema-varianter eller kontrollera kontrastförhållanden. Verktygets existens bygger på att HSL är mer intuitivt för människor, medan HEX fortfarande är universell i kod.

Hur omvandlingen går till – från HEX till HSL

Stegen är enkla men kräver precision:

1. HEX till decimalt RGB – dela upp koden i tre par (eller expandera treställig), omvandla varje par till ett heltal 0–255.
2. Normalisera – dividera varje kanal med 255 så att värdena ligger mellan 0 och 1.
3. Beräkna HSL – använd standardalgoritmen från CSS-standarden. Först hittas max- och minvärde bland R, G, B. Ljushet beräknas som (max + min) / 2. Mättnad beror på ljushet och intervallet mellan max och min. Hue bestäms av vilken kanal som är max och skillnaderna mellan kanalerna, med en formel som ger ett gradtal.

Till exempel: #4f46e5 har RGB (79, 70, 229). Efter normalisering blir RGB (0.310, 0.275, 0.898). Max är B (0.898), min är G (0.275). Ljushet = (0.898+0.275)/2 ≈ 0.5865 → 58.65 %. Intervall = 0.898–0.275 = 0.623. Mättnad = intervall / (1 – |2*0.5865 – 1|) – exakt uträkning ger cirka 76 %. Hue = 60 · ( (0.275 – 0.310) / 0.623 + 4 ) eftersom max är B; resultat ≈ 241°. Slutligt HSL-värde: hsl(241°, 76%, 59%).

Verktyget gör detta automatiskt. Eftersom standard HEX saknar alfakanal hanteras bara helt opaka färger. HSL-formatet har inte heller någon alfakomponent, så konverteringen motsvarar alltid en heltäckande färg.

Vad gör den här sidan unik?

Det finns mängder av färgkonverterare, men den här sidan betonar skillnaden mellan HEX och HSL. HEX är en rå RGB-notation – den är kompakt och allestädes närvarande i CSS, men den är inte byggd för att människan ska kunna justera färger intuitivt. HSL å andra sidan är designat för just det: vill du göra en färg ljusare, höj bara lightnessen – nyansen förblir densamma. Denna egenskap gör HSL till förstahandsvalet för att generera färgpaletter, tema-system och anpassa hover-effekter.

Sidans unika säljpunkt är att den omedelbart visar HSL-värdet tillsammans med fem andra format: HEX, RGB, HSV, CMYK och LAB. Du behöver inte växla mellan olika verktyg för att få alla representationer på en gång. Dessutom accepteras både sexsiffrig HEX och treställig shorthand utan att du behöver tänka på att expandera den.

En annan viktig detalj: ingen alfakanal. Många moderna HEX-varianter inkluderar alfa (t.ex. #RRGGBBAA), men standard-HEX och HSL har ingen transparens. Om du behöver hantera genomskinlighet måste du använda RGBA eller HSLA. Det här verktyget håller sig strikt till opaka färger, vilket undviker förvirring och håller konverteringen enkel.

Regler och begränsningar

Indata måste vara en giltig sexsiffrig eller treställig hex-kod, med eller utan inledande #. All annan inmatning – bokstäver som inte är A–F, för många tecken eller mellanslag – ger felmeddelandet: ”Ange en hex-färg som #4f46e5 eller #abc.” Detta meddelande visas på svenska precis så.

Ett tekniskt kantfall uppstår om du använder sidans andra konverteringsfunktioner (exempelvis om du matar in ett LAB- eller CMYK-värde som ligger utanför den synliga RGB-gamuten). Då justerar verktyget färgen till närmast visningsbara färg, vilket innebär att om du konverterar tillbaka till HEX kan du få en liten färgförskjutning. Det är en oundviklig konsekvens av att RGB har en mindre färgrymd än LAB.

CMYK-värdena som visas är en uppskattning för skärm – de bygger på en enkel konverteringsalgoritm utan hänsyn till profiler som tryckerier använder. Använd dem inte för professionellt tryck utan kalibrering.

All konvertering sker i din webbläsare med JavaScript. Ingen data skickas till någon server, vilket innebär att dina färger förblir privata och sidan fungerar även offline.

Användningsområden för verktyget

• Frontend-utvecklare som skriver CSS och får en HEX-färg från en designfil. Genom att konvertera till HSL kan de enkelt skapa hover-varianter genom att ändra lightness (t.ex. hsl(240°, 70%, 45%) från en basfärg). HSL är idealiskt för CSS custom properties eftersom du kan exempelvis justera --color-primary-light genom att bara ändra en komponent.
• UI/UX-designers som tänker i nyans, mättnad och ljushet måste ofta matcha en varumärkesfärg som levereras i HEX. Verktyget ger omedelbart HSL-värdet, vilket gör det lätt att bygga harmoniska paletter enligt färgteori (komplement, analog, triad).
• Tillgänglighetsgranskare som kontrollerar kontrastförhållanden enligt WCAG. HSL gör det intuitivt att höja ljushet för text mot ljus bakgrund eller sänka för mörk bakgrund, utan att tumma på nyans och mättnad som skulle förändra det visuella intrycket.
• Alla som bygger färgpaletter – monokromatiska scheman blir triviala: behåll samma hue och variera bara saturation och lightness. Analoga scheman kräver bara ett plus/minus på huen. Verktyget sparar tid eftersom du i samma vy ser också RGB, HSV och LAB, vilket ger dig flexibilitet att kopiera det format som ditt projekt kräver.

Vanliga frågor

Kan jag använda treställig HEX som #abc?
Ja, verktyget expanderar automatiskt till sexsiffrig form (#abc → #aabbcc). Exempel: #f80 blir #ff8800.

Vad händer om jag matar in en ogiltig kod som ”#12” eller ”#xyz”?
Du får felmeddelandet: ”Ange en hex-färg som #4f46e5 eller #abc.” Inga ofullständiga eller felaktiga tecken accepteras.

Stöds färger med alfakanal som #4f46e580?
Nej. Standard HEX har ingen alfa, och HSL-formatet saknar alfa. För transparens, använd ett verktyg som hanterar RGBA eller HSLA.

Kan jag konvertera tillbaka från HSL till HEX med samma verktyg?
Eftersom sidan visar alla format samtidigt ser du HEX-värdet direkt när du matar in en HEX. Om du vill gå från HSL till HEX måste du mata in ett HSL-värde på den sida som är avsedd för det (t.ex. hsl-to-hex). Den här sidan tar enbart HEX som indata.

Stämmer CMYK-värdena för tryck?
Nej, de är en uppskattning för skärm. För professionellt offset- eller digitaltryck måste du använda profilkonvertering (t.ex. i Adobe-program) med rätt ICC-profiler.

Sparas mina inmatningar på servern?
Nej. All konvertering sker lokalt i din webbläsare. Ingen data skickas, lagras eller loggas. Du kan använda sidan även när du är frånkopplad.