Hur omvandlingen fungerar – bakgrund och metod
HSL (hue, saturation, lightness) är en färgmodell utformad för att efterlikna hur människor naturligt beskriver färger: vi tänker på nyans, mättnad och ljushet. RGB (röd, grön, blå) är däremot den modell som bildskärmar använder för att blanda ljus. När du matar in ett HSL‑värde på den här sidan – till exempel 243°, 75%, 59% – utförs en matematisk omvandling i webbläsaren som översätter dessa tre parametrar till ett RGB‑triplett (0–255). Omvandlingen följer en standardiserad algoritm som garanterar att varje giltigt HSL‑värde har exakt ett RGB‑värde. Det finns inga godtyckliga avrundningar som kan ge olika resultat mellan olika verktyg, så länge de följer samma konvention.
Den underliggande metoden bygger på att HSL‑modellen är en de facto‑standard som specificerats i CSS‑specifikationen (Cascading Style Sheets). För att konvertera från HSL till RGB räknar man först ut en mellanliggande färg baserad på hue, sedan appliceras mättnad och ljushet med hjälp av en formel som kallas ”HSL‑to‑RGB”. Ljushetsvärdet (L) avgör en basnivå: om L ≤ 50 % är basen L/(50%) gånger 255, annars är basen (1 – L/100%) gånger 255. Mättnaden (S) bestämmer hur mycket den slutliga färgen avviker från gråskalan. Huvudsaken är att dynamiken är linjär i HSL‑rymden, vilket gör att en förändring av ljusheten enbart påverkar ljusheten – nyansen förblir densamma. Detta är en avgörande skillnad jämfört med exempelvis RGB, där en ändring av en komponent oundvikligen påverkar den upplevda färgtonen.
Vad som gör den här sidan unik
Många färgomvandlare på nätet visar bara en enkel konvertering från HSL till HEX eller RGB. Den här sidan går längre. Förutom RGB visas omedelbart motsvarande HEX, HSV, CMYK och LAB. Det är den fullständiga uppsättningen av färgmodeller som en designer eller utvecklare kan behöva i ett arbetsflöde. Den största fördelen är att allt sker i webbläsaren – inga data skickas till en server. Det innebär att integriteten är total och att inga fördröjningar uppstår.
En annan viktig egenskap är att konverteringen är förlustfri. Det finns inga oåterkalleliga avrundningsfel som i vissa andra omvandlingar, till exempel från LAB eller CMYK till RGB. När du går från HSL till RGB, och sedan tillbaka till HSL, får du tillbaka exakt samma värden (förutsatt att du inte avrundar mellanliggande resultat). Detta beror på att HSL‑rymden är en affin transformation av RGB‑rymden. Däremot kan inte CMYK omvandlas förlustfritt till RGB: sidan varnar uttryckligen för att CMYK‑utdata är en uppskattning på skärmen och skiljer sig från professionella tryckprofiler på grund av papper, bläck och skrivarprofiler.
Indata, utdata och omedelbar uppdatering
Sidans indata är enkel: ett enda textfält där du skriver ett HSL‑värde i formatet hue, saturation%, lightness% – till exempel 243, 75%, 59%. Hue måste vara ett heltal eller decimaltal mellan 0 och 360, medan mättnad och ljushet anges som procenttal (0%–100%). Så snart du redigerar fältet – varje enskilt tangenttryck – uppdateras alla fem utdatafälten i realtid:
- HEX – en sexsiffrig hexadecimal sträng, t.ex.
#4F46E5 - RGB – tre heltal 0–255, t.ex.
79, 70, 229 - HSL – samma värde som du matade in, för bekräftelse
- HSV – nyans, mättnad och värde (i procent)
- CMYK – cyan, magenta, gul och svart (i procent, uppskattat)
- LAB – L* (ljushet 0–100), a* och b* (färgkoordinater)
Ingen knapptryckning krävs. Detta är avgörande för ett snabbt arbetsflöde: du provar en ny HSL‑nyans och ser omedelbart hur den ser ut i de andra modellerna. För att förstå hur RGB‑tripletten förhåller sig till HSL kan man räkna med exemplet ovan: hue 243° ligger i blåviolettområdet, mättnad 75 % ger ett tydligt färgstarkt uttryck, och ljushet 59 % ger en relativt ljus ton. RGB‑värdet (79, 70, 229) visar att blåkomponenten dominerar (229), medan röd och grön ligger lågt – precis som förväntat.
Regler och gränsfall – hur felhantering fungerar
Om du matar in ett ogiltigt värde, till exempel 300, 150%, 50% (mättnad över 100 %) eller 361°, 50%, 50% (hue > 360), visas felmeddelandet: "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%." Notera att meddelandet är på engelska, men det är tydligt och informativt. Alla andra fält förblir oförändrade tills felet rättas. Det finns ingen automatisk korrigering eller avrundning – du måste ange ett matematiskt giltigt värde.
En annan regel som inte är omedelbart uppenbar är att HSL‑värden med mättnad 0 % alltid ger en gråskala, oavsett hue. Om du anger 0°, 0%, 50% blir RGB (128, 128, 128). Om du anger 120°, 0%, 50% blir resultatet exakt samma gråton. Det är en direkt följd av definitionen: mättnad = 0 innebär att färgen är akromatisk.
Ett vanligt misstag är att skriva in HSL‑värdet utan procenttecken, exempelvis 243, 75, 59. Då tolkas 75 och 59 som heltal, men de måste vara procentsatser. Formeln kräver att mättnad och ljushet anges i procent – annars blir RGB‑tripletten fel. Sidan hanterar detta genom att visa felmeddelandet ovan, vilket tvingar användaren att använda rätt format.
Varför HSL är bättre för mänskligt tänkande och RGB för skärmen
Färgmodeller kan delas in i två huvudkategorier: de som är byggda för människor och de som är byggda för maskiner. RGB är den senare: varje pixel på skärmen består av tre ljuskällor som var och en kan ha en styrka mellan 0 och 255. Detta är utmärkt för hårdvara, men svårt för en människa att resonera kring. Om du vill skapa ett färgschema där du successivt ökar ljusheten i en färg, måste du i RGB‑rymden justera alla tre komponenter samtidigt, och det är lätt att tappa bort nyansen.
HSL löser detta genom att separera ljusheten som en oberoende axel. Genom att ändra L från 10 % till 90 % med samma H‑ och S‑värde får du en ren ljushetsgradient utan att nyansen förskjuts. Det är därför HSL är standardvalet för att generera färgpaletter, teman och gradienter i moderna designverktyg som Figma, Sketch och Adobe XD. När du sedan ska implementera paletten i CSS eller annan kod krävs ofta RGB‑värden (eller HEX, som är en hexadecimal representation av RGB). Det är precis här sidans funktion kommer in.
Ett konkret exempel: en designer vill ha en blåviolett nyans med hög mättnad och medelljushet för en primär knapp. De anger 243°, 75%, 59% och får omedelbart RGB = (79, 70, 229). Denna triplet kan sedan kopieras direkt in i en CSS‑deklaration som background-color: rgb(79, 70, 229);. Inga extra beräkningar eller gissningar.
Användningsområden och målgrupp
Sidan riktar sig främst till tre grupper:
- Designers som bygger färgpaletter och teman och behöver motsvarande RGB‑värden för att implementera i kod. Eftersom designverktyg ofta arbetar i HSL är konverteringen vardaglig.
- Frontend‑utvecklare som får färgvärden från designers i HSL‑format och måste översätta dem till CSS‑egenskaper som förväntar sig RGB eller HEX.
- Alla som vill resonera om färg i mänskliga termer men ändå behöver veta exakt vad skärmen ska visa – exempelvis webbredaktörer eller tillgänglighetsspecialister som kontrollerar kontrastförhållanden.
En vanlig missuppfattning är att omvandling mellan HSL och RGB alltid är ofarlig. Det stämmer, men det är inte alla färgmodeller som har samma egenskaper. När du går från LAB till RGB kan många färger hamna utanför skärmens färgomfång (out‑of‑gamut) och måste ”klippas”, vilket ändrar nyansen. Den här begränsningen finns inte för HSL till RGB – varje HSL‑värde ligger inom RGB‑rymden och omvandlingen är exakt och omedelbar. Därför är den här sidan särskilt användbar för arbete där noggrannhet är viktig.
Vanliga frågor (FAQ)
1. Varför får jag samma RGB‑värde för olika HSL‑värden?
Om mättnaden är 0 % är alla nyanser lika – färgen är grå. Därför ger 0°, 0%, 50% samma resultat som 120°, 0%, 50% (båda blir 128,128,128). Det är ett tecken på att HSL fungerar korrekt.
2. Kan jag använda decimaltal för hue?
Ja, hue kan vara ett decimaltal, t.ex. 243.5°, 75%, 59%. Detta ger ett exakt RGB‑värde som ligger mellan heltalsnyanserna. RGB‑komponenterna avrundas inte förrän de visas som heltal (0–255).
3. Varför stämmer inte CMYK‑värdet överens med tryckresultat? CMYK‑utdata på sidan är en matematisk uppskattning baserad på konvertering från RGB. Professionella tryckprofiler (t.ex. FOGRA eller SWOP) använder egna färgrymder, papperstyper och bläck. Därför kan skillnader uppstå. Sidan är avsedd för skärmvisning, inte för tryckproduktion.
4. Vad betyder formatet 243, 75%, 59% – måste kommatecken finnas?
Ja, formatet kräver ett kommatecken mellan hue och mättnad, samt mellan mättnad och ljushet. Mellanslag efter kommatecken är valfria, men rekommenderas för läsbarhet. Utan kommatecken, t.ex. 243 75% 59%, tolkas det inte som ett giltigt HSL‑värde.
5. Finns det någon risk att mina data skickas till en server? Nej. All omvandling sker i din webbläsare med JavaScript. Ingenting du skriver överförs. Du kan verifiera detta genom att slå av nätverksåtkomst i webbläsarens utvecklingsverktyg – sidan fungerar fortfarande.
6. Varför visas inte HEX‑koden med hashtagg?
HEX‑fältet visar koden utan # för att underlätta kopiering i de flesta sammanhang (t.ex. i CSS där du måste lägga till # själv). Om du föredrar formatet #4F46E5 lägger du bara till # innan du använder det.