Gå til fargevelgeren

Konverter HSLA til HEX

Lim inn en HSLA-verdi og få HEX med en gang. Andre formater virker også.

Tolket som HSL

HEX-verdi#ff5733cc
HEX til HSLA

Samme farge uten gjennomsiktighet, som dekkende HEX

Juster fargen

11°
80 %

68 %
0,210
34°

Alle andre formater

Opasitetstabell: HEX-alfa og HSLA

I 8-sifret HEX bestemmer de to siste sifrene opasiteten: FF er helt dekkende, 80 er rundt 50 %, og 00 er helt gjennomsiktig. Tabellen viser eksempelfargen i trinn på 5 %.

OpasitetHEX-alfaHEXHSLA
100%ff#ff5733hsla(10.59, 100%, 60%, 1)
95%f2#ff5733f2hsla(10.59, 100%, 60%, 0.95)
90%e6#ff5733e6hsla(10.59, 100%, 60%, 0.9)
85%d9#ff5733d9hsla(10.59, 100%, 60%, 0.85)
80%cc#ff5733cchsla(10.59, 100%, 60%, 0.8)
75%bf#ff5733bfhsla(10.59, 100%, 60%, 0.75)
70%b3#ff5733b3hsla(10.59, 100%, 60%, 0.7)
65%a6#ff5733a6hsla(10.59, 100%, 60%, 0.65)
60%99#ff573399hsla(10.59, 100%, 60%, 0.6)
55%8c#ff57338chsla(10.59, 100%, 60%, 0.55)
50%80#ff573380hsla(10.59, 100%, 60%, 0.5)
45%73#ff573373hsla(10.59, 100%, 60%, 0.45)
40%66#ff573366hsla(10.59, 100%, 60%, 0.4)
35%59#ff573359hsla(10.59, 100%, 60%, 0.35)
30%4d#ff57334dhsla(10.59, 100%, 60%, 0.3)
25%40#ff573340hsla(10.59, 100%, 60%, 0.25)
20%33#ff573333hsla(10.59, 100%, 60%, 0.2)
15%26#ff573326hsla(10.59, 100%, 60%, 0.15)
10%1a#ff57331ahsla(10.59, 100%, 60%, 0.1)
5%0d#ff57330dhsla(10.59, 100%, 60%, 0.05)
0%00#ff573300hsla(10.59, 100%, 60%, 0)

Eksempler: HSLA til HEX

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

Om HSLA og HEX

HSLA er HSL med en alfakanal for opasitet, skrevet som hsla(11, 100%, 60%, 0.5). Alfa går fra 0 (helt gjennomsiktig) til 1 (helt dekkende), og moderne CSS godtar det også i hsl().

HEX skriver rødt, grønt og blått som to heksadesimale sifre hver, for eksempel #ff5733. Det er den vanligste måten å skrive farger på nettet og i designverktøy.

Slik fungerer konverteringen

Vi leser HSLA-verdien, regner den om til CIE XYZ med matrisene fra spesifikasjonen CSS Color 4 og deretter til HEX. Verdier utenfor målformatets fargeomfang tilpasses med algoritmen i CSS Color 4, som beholder lyshet og fargetone og reduserer kroma.

Spørsmål og svar

Hvordan konverterer jeg HSLA til HEX?

Lim inn eller skriv en HSLA-verdi i feltet ovenfor. PickShade konverterer den med formlene i CSS Color 4 mens du skriver, og med ett klikk kopierer du HEX-verdien.

Er konverteringen fra HSLA til HEX nøyaktig?

Beregningen er nøyaktig, og resultatet rundes bare av for visning, med nok sifre til å regne tilbake til samme farge. Hvis fargen ikke får plass i målformatets fargeomfang, varsler PickShade deg og viser nærmeste farge som får plass.

Kan jeg få andre formater samtidig?

Ja. Alle andre formater, blant annet OKLCH, Display P3, Tailwind, SwiftUI, Flutter og Android, står under resultatet og kopieres med ett klikk.

Er denne konvertereren gratis?

Ja. Den er gratis, krever ingen registrering og kjører helt i nettleseren din.