Introduktion till RGB och HSL
Den här sidan omvandlar en färg angiven i RGB (röd, grön, blå) till motsvarande HSL (färgton, mättnad, ljushet). Istället för att hantera tre heltalsvärden mellan 0 och 255 får du en vinkel på 0–360 grader för färgtonen samt två procentvärden för mättnad och ljushet. Samtidigt visas samma färg i HEX, HSV, CMYK och LAB, så att du kan kopiera den representation som passar ditt projekt bäst.
All konvertering sker i din webbläsare. Inga färgvärden skickas till någon server – du kan arbeta med känsliga profiler utan oro. Om du redigerar något fält uppdateras alla andra fält omedelbart. Det gör verktyget användbart både för snabba kontroller och för att experimentera med färgvarianter.
Hur RGB representerar färg på skärmar
RGB bygger på additiv färgblandning. En skärm avger ljus från röda, gröna och blåa subpixlar, och styrkan på varje kanal anges som ett heltal 0–255 (8 bitar per kanal). Värdet 0 innebär att den kanalen är avstängd (inget ljus), 255 innebär maximal intensitet. Tillsammans kan de tre kanalerna skapa 256³ = 16,7 miljoner olika färger.
Denna arbetsrymd följer vanligtvis sRGB‑standarden, som definierar en specifik färgrymd och gammakurva. När en designer anger RGB(79, 70, 229) i ett verktyg som Adobe XD eller Figma används just denna standard. Omvandlingen till HSL på den här sidan utgår från samma sRGB‑värden, så resultatet blir konsekvent med andra professionella verktyg.
En vanlig missuppfattning är att RGB direkt motsvarar hur ögat uppfattar färg. Det gör det inte: att öka alla tre kanaler proportionellt gör färgen ljusare, men att ändra enbart den gröna kanalen påverkar både färgton, mättnad och ljushet samtidigt. Det är här HSL kommer in.
Vad HSL gör annorlunda – och varför det är användbart
HSL står för hue, saturation, lightness – på svenska färgton, mättnad och ljushet. Till skillnad från RGB, där en förändring av en kanal ofta ändrar den upplevda färgtonen, låter HSL dig justera ljusheten oberoende medan färgtonen hålls konstant. Det gör HSL till den föredragna modellen för att generera färgpaletter, teman och tillgängliga kontrastvariationer.
- Färgton (H) mäts i grader på en färgcirkel: 0° rött, 60° gult, 120° grönt, 180° cyan, 240° blått, 300° magenta och tillbaka till 0°.
- Mättnad (S) anges i procent: 0 % är gråskala (ingen färg), 100 % är maximal renhet.
- Ljushet (L) anges i procent: 0 % är svart, 100 % är vitt, 50 % är ”normal” ljushet för den givna färgtonen och mättnaden.
Exempel: RGB(79, 70, 229) motsvarar HSL(243°, 75 %, 59 %). Om du vill göra färgen ljusare för en bakgrund, ökar du L-värdet (t.ex. 243°, 75 %, 80 %) och får en pastellvariant av samma blåton. Minskar du i stället mättnaden (t.ex. 243°, 30 %, 59 %) får du en dämpad version. I RGB skulle samma operation kräva att du manuellt räknar ut nya proportioner mellan kanalerna – och riskera att färgtonen glider iväg.
För UI/UX‑designers som skapar tillgängliga färgskalor är HSL ovärderligt. WCAG 2.1 kräver specifika kontrastförhållanden mellan text och bakgrund. Genom att justera ljusheten medan färgtonen och mättnaden bevaras kan du enkelt ta fram en mörkare variant av en knappfärg eller en ljusare bakgrundston utan att förlora varumärkets identitet.
Matematiken bakom omvandlingen från RGB till HSL
Konverteringen följer en väletablerad algoritm som normalt finns implementerad i de flesta bildbehandlingsbibliotek. Här är stegen, beskrivna med RGB(79, 70, 229) som exempel.
-
Normalisera RGB‑värdena till intervallet 0–1:
R' = 79/255 ≈ 0,310
G' = 70/255 ≈ 0,275
B' = 229/255 ≈ 0,898 -
Bestäm max och min samt skillnaden (delta):
Cmax = 0,898 (blå kanal)
Cmin = 0,275 (grön kanal)
Δ = Cmax – Cmin = 0,623 -
Beräkna ljushet (L):
L = (Cmax + Cmin) / 2 = (0,898 + 0,275) / 2 ≈ 0,586
I procent: 58,6 % → avrundat till 59 %. -
Beräkna mättnad (S):
Om Δ = 0 är mättnaden 0 %. Annars:
S = Δ / (1 – |2L – 1|) = 0,623 / (1 – |1,172 – 1|) = 0,623 / (1 – 0,172) = 0,623 / 0,828 ≈ 0,752
I procent: 75,2 % → avrundat till 75 %. -
Beräkna färgton (H):
Här används en villkorsstyrd formel baserad på vilken kanal som är Cmax. I exemplet är blå kanal högst:
H = 60 × ((G' – R') / Δ + 4) – notera att formeln justeras för att hamna inom 0–360.
Steg för steg: (G' – R') / Δ = (0,275 – 0,310) / 0,623 ≈ –0,056.
+4 ger 3,944. Multiplicerat med 60: 3,944 × 60 ≈ 236,6°.
Men eftersom blå är Cmax och röd < grön, ligger färgtonen i intervallet 180–240? Här ser vi att det blev ~237°, vilket stämmer med 243°? Nej, en kontroll: verktyget visar 243°. Låt oss räkna om exakt.För Cmax = B:
H = 60 × ((R' – G') / Δ + 4) – men den exakta formeln enligt standarden:
Om Cmax = R: H = 60 * ((G' – B') / Δ mod 6)
Om Cmax = G: H = 60 * ((B' – R') / Δ + 2)
Om Cmax = B: H = 60 * ((R' – G') / Δ + 4)Med R'=0,310, G'=0,275, Δ=0,623:
(R' – G') / Δ = (0,310 – 0,275) / 0,623 = 0,035 / 0,623 ≈ 0,0562
+4 ger 4,0562. Multiplicerat med 60: 4,0562 × 60 ≈ 243,37° → avrundat till 243°.Stämmer! Skillnaden uppstod för att jag tidigare bytte tecken. Den korrekta algoritmen ger 243°, precis som verktyget visar.
Denna algebra utförs av konverteringskoden på sidan. Du behöver inte kunna den – men förståelsen hjälper dig att felsöka om resultaten verkar oväntade.
Praktisk användning av HSL i webbutveckling och design
CSS har stöd för hsl() och hsla() sedan länge. Genom att ange bakgrundsfärg som background: hsl(243, 75%, 59%); får du samma färg som RGB(79,70,229). Fördelen är att du sedan enkelt kan skapa varianter med hjälp av CSS‑variabler:
:root {
–primary-h: 243;
–primary-s: 75%;
–primary-l: 59%;
}
.btn {
background: hsl(var(–primary-h), var(–primary-s), var(–primary-l));
}
.btn:hover {
background: hsl(var(–primary-h), var(–primary-s), calc(var(–primary-l) + 10%));
}
Detta låter dig justera färgen på hela temat genom att ändra en enda variabel – något som är betydligt krångligare med RGB-notation.
Frontend‑utvecklare kan även manipulera HSL dynamiskt i JavaScript. Genom att hämta ett elements nuvarande HSL (via window.getComputedStyle eller en färgkonvertering) kan du öka ljusheten stegvis för att animera övergångar. Verktyg som den här sidan gör att du snabbt kan testa vilka HSL‑värden du ska använda i koden.
För temabyggare (light/dark mode) är HSL särskilt praktiskt. Ett varumärke har en specifik färgton (t.ex. 243°), och för ett mörkt tema vill du sänka ljusheten från 59 % till 30 % och minska mättnaden något. Med RGB måste du manuellt justera alla tre kanaler och riskera att färgtonen förskjuts. Med HSL gör du justeringen på två ställen.
Begränsningar och kantfall
HSL är en bekväm modell för mänskligt resonemang, men den inte perceptuellt enhetlig. En gul färg (H=60°, S=100%, L=50%) upplevs som mycket ljusare än en blå färg med samma ljushetsprocent. Ögat är känsligare för grönt, och HSL tar inte hänsyn till detta. Om du behöver en perceptuellt linjär färgskala, till exempel för datavisualisering med successiva steg, är LAB‑modellen bättre – och finns som utdata på samma sida.
Kantfall i inmatningen:
- Om du skriver in RGB som andra än tre heltal 0–255 separerade med komma eller mellanslag visas felmeddelandet: "Ange RGB som tre siffror 0–255, t.ex. 79, 70, 229."
- Om du skriver in HSL direkt för att konvertera tillbaka till RGB, måste formatet vara t.ex.
243, 75%, 59%. Felaktig syntax ger: "Ange HSL som färgton 0–360 med två procenttal, t.ex. 243, 75%, 59%."
CMYK som skärmuppskattning:
CMYK‑värdet som visas är en on‑screen‑uppskattning. Det kan användas för att få en ungefärlig känsla, men ska inte användas för professionell tryckproduktion utan att verifieras mot en ICC‑profil och en tryckpress.
LAB och CMYK utanför RGB‑gamutet:
Om du anger ett LAB‑ eller CMYK‑värde som ligger utanför det synliga RGB‑omfånget (t.ex. en extremt mättnad färg som inte kan återges på en skärm), justerar verktyget det till närmaste visningsbara färgen. Om du sedan konverterar tillbaka den justerade färgen kan en liten förskjutning uppstå. Detta är en förväntad egenskap hos alla färgrymdsomvandlingar – ingen data går förlorad, men färgen blir en approximation.
Ingen uppladdning:
All kod körs i din webbläsare. Inga värden skickas till en server. Du kan därför använda verktyget även med konfidentiella färgscheman utan säkerhetsrisk.
FAQ
1. Varför ska jag använda HSL istället för RGB i CSS?
HSL ger dig möjlighet att ändra ljushet och mättnad oberoende av färgtonen, vilket gör det enklare att skapa färgvarianter och teman. RGB kräver att du räknar om alla tre kanaler manuellt.
2. Kan jag konvertera tillbaka från HSL till RGB på samma sida?
Ja. Om du redigerar HSL‑fälten (t.ex. ändrar ljusheten) uppdateras RGB‑, HEX‑ och övriga fält automatiskt. Du kan alltså använda sidan i båda riktningarna.
3. Varför skiljer sig CMYK‑värdet från vad en tryckeri‑programvara visar?
Den här sidan gör en enkel omvandling från sRGB till CMYK med en standardalgoritm. Professionella tryckerier använder specifika ICC‑profiler som tar hänsyn till papper, bläck och tryckpress. Använd därför CMYK‑värdet här endast som en grov riktlinje.
4. Blir färgerna exakt samma på alla skärmar?
Nej. Skärmar är inte kalibrerade likadant. RGB‑värdena tolkas mot sRGB‑standarden, men om din skärm har en annan färgrymd (t.ex. DCI‑P3 eller Adobe RGB) kan representationen avvika. HSL‑värdena på sidan baseras på samma sRGB‑standard, så de är konsekventa inom den ramen.
5. Vad händer om jag anger ett HSL‑värde med ljushet 0 % eller 100 %?
Om ljushet är 0 % blir färgen svart oavsett färgton och mättnad. Vid ljushet 100 % blir färgen vit. I båda fallen är mättnaden definitionsmässigt 0 % (svart och vitt har ingen färgton). Detta är korrekt enligt HSL‑modellen.
6. Kan jag använda HSL för att skapa tillgängliga färger enligt WCAG?
Ja, men du måste ändå kontrollera kontrastförhållandet med ett verktyg. HSL gör det lättare att skapa varianter med rätt ljushetsskillnad, men det garanterar inte automatiskt att kontrasten räcker till. Använd gärna verktyget på den här sidan för att hitta en ljushetsnivå som uppfyller 4,5:1 för normal text.