Konvertera HSLA till OKLab

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

Från HSLA

Tolkad som HSL

OKLab-värdeoklab(68.036% 0.17473 0.1165 / 0.8)

OKLab till HSLA

Samma färg utan transparens, som heltäckande OKLab

Justera färgen

Färgton11°

Opacitet80 %

Ljushet68 %

Kroma0,210

Färgton34°

Alla andra format

Opacitetstabell: HEX-alfa och HSLA

I 8-siffrig HEX anger de två sista siffrorna opaciteten: FF är helt täckande, 80 är ungefär 50 % och 00 är helt genomskinlig. Tabellen visar exempelfärgen i steg om 5 %.

Opacitet	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)

Exempel: HSLA till OKLab

Färg	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 och OKLab

HSLA är HSL med en alfakanal för opacitet, skrivet som hsla(11, 100%, 60%, 0.5). Alfa går från 0 (helt genomskinlig) till 1 (helt täckande), och modern CSS accepterar det även i hsl().

OKLab är en modern perceptuell färgrymd från 2020. Lika steg ser lika ut för ögat, vilket gör gradienter och blandningar renare än i RGB eller HSL.

Så fungerar konverteringen

Vi läser HSLA-värdet, räknar om det till CIE XYZ med matriserna från specifikationen CSS Color 4 och sedan till OKLab. 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 HSLA till OKLab?

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

Är konverteringen från HSLA till OKLab 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.