Konverter HSLA til OKLab

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

Fra HSLA

Tolket som HSL

OKLab-verdioklab(68.036% 0.17473 0.1165 / 0.8)

OKLab til HSLA

Samme farge uten gjennomsiktighet, som dekkende OKLab

Juster fargen

Fargetone11°

Opasitet80 %

Lyshet68 %

Kroma0,210

Fargetone34°

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 %.

Opasitet	HEX-alfa	HEX	HSLA
100%	ff	#ff5733	hsla(10.59, 100%, 60%, 1)
95%	f2	#ff5733f2	hsla(10.59, 100%, 60%, 0.95)
90%	e6	#ff5733e6	hsla(10.59, 100%, 60%, 0.9)
85%	d9	#ff5733d9	hsla(10.59, 100%, 60%, 0.85)
80%	cc	#ff5733cc	hsla(10.59, 100%, 60%, 0.8)
75%	bf	#ff5733bf	hsla(10.59, 100%, 60%, 0.75)
70%	b3	#ff5733b3	hsla(10.59, 100%, 60%, 0.7)
65%	a6	#ff5733a6	hsla(10.59, 100%, 60%, 0.65)
60%	99	#ff573399	hsla(10.59, 100%, 60%, 0.6)
55%	8c	#ff57338c	hsla(10.59, 100%, 60%, 0.55)
50%	80	#ff573380	hsla(10.59, 100%, 60%, 0.5)
45%	73	#ff573373	hsla(10.59, 100%, 60%, 0.45)
40%	66	#ff573366	hsla(10.59, 100%, 60%, 0.4)
35%	59	#ff573359	hsla(10.59, 100%, 60%, 0.35)
30%	4d	#ff57334d	hsla(10.59, 100%, 60%, 0.3)
25%	40	#ff573340	hsla(10.59, 100%, 60%, 0.25)
20%	33	#ff573333	hsla(10.59, 100%, 60%, 0.2)
15%	26	#ff573326	hsla(10.59, 100%, 60%, 0.15)
10%	1a	#ff57331a	hsla(10.59, 100%, 60%, 0.1)
5%	0d	#ff57330d	hsla(10.59, 100%, 60%, 0.05)
0%	00	#ff573300	hsla(10.59, 100%, 60%, 0)

Eksempler: HSLA til OKLab

Farge	HSLA	OKLab
	hsla(0, 100%, 50%, 1)	oklab(62.796% 0.22486 0.12585)
	hsla(120, 100%, 50%, 1)	oklab(86.644% -0.23389 0.1795)
	hsla(240, 100%, 50%, 1)	oklab(45.201% -0.03246 -0.31153)
	hsla(0, 0%, 100%, 1)	oklab(100% 0 0)
	hsla(0, 0%, 0%, 1)	oklab(0% 0 0)
	hsla(0, 0%, 50.2%, 1)	oklab(59.987% 0 0)
	hsla(10.59, 100%, 60%, 1)	oklab(68.036% 0.17474 0.1165)
	hsla(217.22, 91.22%, 59.8%, 1)	oklab(62.308% -0.03325 -0.18505)
	hsla(160.12, 84.08%, 39.41%, 1)	oklab(69.587% -0.14216 0.04488)
	hsla(37.69, 92.13%, 50.2%, 1)	oklab(76.859% 0.0561 0.15481)
	hsla(258.31, 89.53%, 66.27%, 1)	oklab(60.563% 0.08454 -0.20193)
	hsla(330.37, 81.19%, 60.39%, 1)	oklab(65.592% 0.21073 -0.021)

Om HSLA og OKLab

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().

OKLab er et moderne perseptuelt fargerom fra 2020. Like steg ser like ut for øyet, så gradienter og blandinger blir renere enn i RGB eller HSL.

Slik fungerer konverteringen

Vi leser HSLA-verdien, regner den om til CIE XYZ med matrisene fra spesifikasjonen CSS Color 4 og deretter til OKLab. 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 OKLab?

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 OKLab-verdien.

Er konverteringen fra HSLA til OKLab 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.