Hur konverterar man HEX till HSL?

Först läses hex-koden av som rött, grönt och blått (0-255), sedan skrivs samma färg om som nyans, mättnad och ljushet. Nyans (hue) är vinkeln på färghjulet (0-360), mättnad hur levande färgen är (0-100 %) och ljushet hur ljus den är (0-100 %). #3366cc blir hsl(220, 60%, 50%). Verktyget räknar ut det direkt medan du skriver.

Så använder du verktyget

1Ange en hexkod. Skriv eller klistra in en hexfärg som #3366cc (eller #36c), eller välj en med färgrutan. Tecknet # är valfritt.

2Läs av HSL-värdet. Strängen hsl(), de rena värdena och en live förhandsgranskning uppdateras medan du skriver, med en nedbrytning för nyans, mättnad och ljushet.

3Kopiera det format du behöver. Klicka på Kopiera bredvid hsl()-strängen eller de råa värdena. Behöver du gå tillbaka? Ange nyans, mättnad och ljushet nedan för att få hexkoden igen.

Vem passar det för

Frontend-utvecklare som gör om en hexkod till hsl() för att justera ljusheten i hover- och fokuslägen utan att välja en helt ny färg.

Designers som bygger paletter och håller nyansen fast medan de stegar mättnad och ljushet för att ta fram toner och nyanser från en enda varumärkesfärg.

De som skriver teman och design-tokens och sparar färger som HSL eftersom det är mycket lättare att läsa och justera för hand än en hexsträng.

Alla som ska matcha färger mellan verktyg där det ena vill ha hex (Figma, det mesta av CSS) och det andra HSL (SCSS-hjälpare, vissa färgsystem).

Konverteraren tar emot alla CSS-hexformat: 6-siffrig #3366cc, 3-siffrig kortform #36c, samt 4- och 8-siffriga varianter med alfakanal, med eller utan #. Den visar strängen hsl() eller hsla(), de rena värdena och en nedbrytning per komponent - plus en omvänd rad från HSL till HEX när du behöver gå åt andra hållet. Allt körs i din webbläsare - ingen uppladdning, inget konto, inga gränser.

Vanliga frågor

Är den här HEX till HSL-konverteraren gratis?

Ja - den är 100 % gratis utan registrering och utan gränser. Den körs helt i din webbläsare.

Laddas mina färger upp någonstans?

Nej. Konverteringen sker med vanlig JavaScript på din enhet - inget skickas till någon server, och den fortsätter fungera offline när sidan väl har laddats.

Vad är HSL?

HSL står för hue, saturation och lightness - nyans, mättnad och ljushet. Nyans är en vinkel från 0 till 360 grader på färghjulet, mättnad visar hur levande färgen är från 0 till 100 procent, och ljushet går från 0 procent (svart) via den rena färgen vid 50 procent till 100 procent (vitt).

Hur konverterar man hex till HSL för hand?

Gör om hexkoden till rött, grönt och blått och dela varje värde med 255. Ta max och min av de tre: ljushet är deras medelvärde, mättnad är (max - min) delat med (1 - |2L - 1|), och nyansen kommer från vilken kanal som är störst, skalad till 0-360 grader.

Fungerar det med kortformen #36c?

Ja. I CSS-kortform dubbleras varje siffra, så #36c expanderas till #3366cc och blir hsl(220, 60%, 50%). Den 4-siffriga formen fungerar likadant, med sista siffran som alfa.

Hur hanteras genomskinlighet (HSLA)?

En 8-siffrig hexkod bär alfavärdet i sista paret. Den byten (0-255) delas med 255 för att ge det alfavärde mellan 0 och 1 som hsla() förväntar sig, avrundat till tre decimaler - så #3366cc80 blir hsla(220, 60%, 50%, 0.502).

Kan den konvertera HSL tillbaka till HEX?

Ja. Använd raden HSL till HEX under resultatet: ange nyans (0-360) samt mättnad och ljushet (0-100 %) så får du hexkoden direkt. Värden utanför intervallet klipps till giltiga gränser.

Varför är HSL bättre än hex?

HSL går att läsa rakt av: du gör en färg ljusare genom att höja L, tonar ner den genom att sänka S, eller byter färgfamilj genom att ändra H - allt utan att gissa hexsiffror. Det gör det perfekt för att bygga enhetliga paletter, hover-lägen och design-tokens.