Vad gör den här sidan?
Sidan omvandlar en HSL-färg (hue, saturation, lightness) till motsvarande hexadecimala (HEX) färgkod. Du anger färgens nyansvärde i grader (0–360), mättnad som procent (0–100 %) och ljushet som procent (0–100 %). Resultatet är en sexsiffrig HEX-kod som #1E90FF, eller om färgens röda, gröna och blå kanaler var och en kan uttryckas med en enda hex-siffra, även en trestegsförkortning som #abc. När du ändrar något fält uppdateras HEX-värdet omedelbart.
Det som gör sidan unik är att den är specialiserad på just HSL‑till‑HEX. HSL är en färgmodell konstruerad för mänskligt tänkande om färg – genom att bara ändra ljushet behåller man nyansen, vilket gör den användbar för palett- och temagenerering. HEX är däremot en sexsiffrig (eller trestegsförkortad) RGB-notation; den har ingen alfa förutom i den åttasiffriga formen. Konverteringen är direkt och förlustfri inom sRGB‑färgrymden, till skillnad från omvandlingar som involverar LAB eller CMYK där färger utanför färgrymden kan justeras.
All bearbetning sker i din webbläsare; ingenting du anger skickas upp till någon server.
Hur HSL och HEX hänger ihop – under huven
HSL (Hue, Saturation, Lightness) beskriver färg med tre parametrar. Nyans (H) är en cirkel från 0 till 360 grader, där 0/360 är rött, 120 är grönt och 240 är blått. Mättnad (S) anger färgmättnad i procent: 0 % = gråskala, 100 % = full färgdjup. Ljushet (L) anger hur ljus färgen är: 0 % = svart, 100 % = vitt.
HEX är en representation av RGB‑värden där varje kanal (röd, grön, blå) anges med två hexadecimala siffror (0–9 och A–F). Till exempel motsvarar #4f46e5 RGB(79, 70, 229). För trestegsförkortningen #abc är den fullständiga koden #aabbcc – varje siffra dubbleras.
Konverteringsalgoritmen från HSL till HEX går via RGB. Först beräknas RGB‑värdena från HSL enligt standardformeln (t.ex. från CSS Color Module Level 4). Därefter avrundas varje kanal till ett heltal mellan 0 och 255, och det heltalet översätts till två hex‑siffror. Om alla tre kanalernas hex‑par är identiska (t.ex. 11, 22, 33) kan man använda trestegsförkortningen.
Eftersom alla HSL‑värden som ligger inom de giltiga intervallen (hue 0–360, saturation 0–100 %, lightness 0–100 %) alltid faller inom sRGB‑färgrymden sker ingen klippning av färger utanför rymden. Detta skiljer HSL‑till‑HEX från exempelvis LAB‑till‑RGB, där vissa färger måste komprimeras.
Inmatning och utdata – exakt vad du får
Inmatning: Du anger en nyans (0–360), en mättnadsprocent och en ljushetsprocent. Exempel: 243, 75%, 59%. Verktyget accepterar inmatning i formatet hue, saturation%, lightness% – kommatecken och mellanslag är flexibla, men procenttecknen är obligatoriska.
Utdata: Huvudresultatet är en HEX‑kod, till exempel #4f46e5 för ovanstående HSL‑värde. Är alla tre RGB‑kanaler representerade av en dubblerad siffra visas även trestegsförkortningen, som #abc istället för #aabbcc. Samtidigt uppdateras alla andra färgfält: RGB, HSV, CMYK och LAB. Dessa fält är skrivskyddade i den meningen att de visar resultatet av omvandlingen, men du kan redigera dem för att se hur HSL‑värdena förändras (om du ändrar i något fält uppdateras alla andra omedelbart).
Felmeddelande: Om HSL‑värdena inte är giltiga – till exempel om nyansen är 400, eller om du skriver 75 utan procenttecken – visas meddelandet:
”Ange HSL som nyans 0–360 med två procenttal, t.ex. 243, 75%, 59%.”
Notera att CMYK‑värdet som visas är en estimering för skärmbruk och kan skilja sig från professionella tryckvärden på grund av skillnader i färgrymder och tryckprocesser.
Vanliga misstag och kantfall
Ett typiskt misstag är att utelämna procenttecknen. Mättnad och ljushet måste anges med % – annars tolkas de inte som procent utan som råa tal, vilket ger ett felmeddelande. Ett annat vanligt fel är att ange en nyans över 360 grader; hue är ett cirkulärt värde och värden som 400 är inte giltiga. Verktyget accepterar endast heltal eller decimaltal för nyans, men avrundar resultatet.
Eftersom omvandlingen alltid håller sig inom sRGB‑rymden finns inga scennarier där färgen faller utanför det synliga RGB‑området. Detta är en fördel jämfört med att konvertera från exempelvis LAB där gamut‑clipping kan ske.
En annan viktig detalj: trestegsförkortningen visas endast om varje RGB‑kanals hexvärde består av två identiska siffror. Det är en ren CSS‑konvention – #1E90FF kan till exempel inte förkortas eftersom 1E och 90 och FF inte är dubblerade.
Alla fält uppdateras omedelbart vid redigering. Detta kräver att JavaScript körs i webbläsaren; om JavaScript är inaktiverat fungerar inte verktyget. Sidan skickar dock ingen data till servern.
Vem har nytta av verktyget?
Grafiska formgivare som bygger färgpaletter i HSL och behöver HEX‑koder för implementering i kod eller designverktyg. I Figma och Sketch anges ofta färger i HSL, medan slutanvändarkoden kräver HEX.
Frontend‑utvecklare som får HSL‑värden från designfiler och måste översätta dem till CSS‑egenskaper som color: #4f46e5. Verktyget sparar tid och eliminerar risken för manuella omräkningsfel.
Personer som arbetar med tillgänglighet kan använda HSL för att enkelt justera ljushet medan nyansen behålls, för att uppnå WCAG‑kontrastkrav. Sedan konverteras resultatet till HEX för att användas i produktion. Till exempel kan man sänka ljusheten från 59 % till 40 % på samma nyans för att skapa en mörkare variant med bättre kontrast mot vit bakgrund.
Alla som justerar teman eller färgscheman och vill ha en direkt, förlustfri omvandling mellan det mänskligt intuitiva HSL‑formatet och det maskinläsbara HEX‑formatet.
Frågor och svar
Varför ska jag använda HSL istället för HEX direkt?
HSL är mer intuitivt för människor. Du kan enkelt göra en färg ljusare eller mörkare utan att ändra nyans, vilket är svårare med HEX eftersom du måste räkna om alla tre kanaler samtidigt.
Kan jag alltid få en trestegsförkortning?
Nej, bara om varje RGB‑kanal är en multipel av 17 (dvs. hexvärden som 00, 11, 22... FF). Exempel: RGB(255, 0, 0) ger #FF0000 -> #f00. Men RGB(255, 128, 0) är #FF8000 som inte kan förkortas eftersom 80 inte är ett dubblerat par.
Varför är CMYK‑värdet bara en uppskattning?
CMYK är en tryckfärgsmodell med ett mindre färgomfång än sRGB. En direkt omvandling från sRGB‑RGB till CMYK ger ett ungefärligt värde, eftersom exakta tryckprofiler beror på papper och bläck. Därför visas värdet som en estimering.
Sparar sidan mina färgvärden?
Nej, all bearbetning sker i din webbläsare. Ingenting skickas till servern, så dina färgval är privata.
Vad händer om jag skriver en nyans som 360?
360 grader är identiskt med 0 grader juridiskt sett, men verktyget accepterar 0–360. 360 är alltså giltigt. Däremot leder 361 till felmeddelande.
Finns det stöd för alfa (genomskinlighet) i HEX?
Sidans huvudoutput är sexsiffrig HEX (eller trestegs). Åttasiffrig HEX med alfa stöds inte direkt. Om du behöver genomskinlighet måste du lägga till alfa separat, t.ex. som rgba() i CSS.