Hoppa till färgväljaren

Konvertera HSL till HEX

Klistra in ett HSL-värde och få HEX direkt. Andra format fungerar också.

Tolkad som HSL

HEX-värde#ff5733
HEX till HSL

Justera färgen

11°
100 %

68 %
0,210
34°

Alla andra format

Exempel: HSL till HEX

FärgHSLHEX
hsl(0, 100%, 50%)#ff0000
hsl(120, 100%, 50%)#00ff00
hsl(240, 100%, 50%)#0000ff
hsl(0, 0%, 100%)#ffffff
hsl(0, 0%, 0%)#000000
hsl(0, 0%, 50.2%)#808080
hsl(10.59, 100%, 60%)#ff5733
hsl(217.22, 91.22%, 59.8%)#3b82f6
hsl(160.12, 84.08%, 39.41%)#10b981
hsl(37.69, 92.13%, 50.2%)#f59e0b
hsl(258.31, 89.53%, 66.27%)#8b5cf6
hsl(330.37, 81.19%, 60.39%)#ec4899

Om HSL och HEX

HSL anger färgton i grader samt mättnad och ljushet i procent. Det är lätt att läsa, men ljusheten är inte jämn för ögat: gult på 50 % ser mycket ljusare ut än blått på 50 %.

HEX skriver rött, grönt och blått som två hexadecimala siffror vardera, till exempel #ff5733. Det är det vanligaste sättet att skriva färger på webben och i designverktyg.

Så fungerar konverteringen

Vi läser HSL-värdet, räknar om det till CIE XYZ med matriserna från specifikationen CSS Color 4 och sedan till HEX. Värden utanför målformatets färgomfång anpassas med algoritmen i CSS Color 4, som behåller ljushet och färgton och minskar kroma.

Frågor och svar

Hur konverterar jag HSL till HEX?

Klistra in eller skriv ett HSL-värde i fältet ovan. PickShade konverterar det med formlerna i CSS Color 4 medan du skriver, och ett klick kopierar HEX-värdet.

Är konverteringen från HSL till HEX exakt?

Beräkningen är exakt och resultatet avrundas bara för visning, med tillräckligt många siffror för att räkna tillbaka till samma färg. Om färgen inte ryms i målformatets färgomfång varnar PickShade och visar närmaste färg som ryms.

Kan jag få andra format samtidigt?

Ja. Alla andra format, bland annat OKLCH, Display P3, Tailwind, SwiftUI, Flutter och Android, listas under resultatet och kopieras med ett klick.

Är konverteraren gratis?

Ja. Den är gratis, kräver inget konto och körs helt i din webbläsare.