Конвертер HSLA в HEX

Вставте значення HSLA і одразу отримайте HEX. Будь-який інший формат теж підійде.

З HSLA

Розпізнано: HSL

Значення HEX#ff5733cc

HEX в HSLA

Той самий колір без прозорості, суцільний HEX

Налаштувати колір

Тон11°

Непрозорість80%

Світлота68%

Хрома0,210

Тон34°

Усі інші формати

Таблиця прозорості: альфа в HEX і HSLA

У 8-значному HEX останні дві цифри задають прозорість: FF — повністю непрозорий, 80 — близько 50%, 00 — повністю прозорий. У таблиці колір із прикладу з кроком 5%.

Непрозорість	Альфа в HEX	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)

Приклади конвертації HSLA в HEX

Колір	HSLA	HEX
	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

Про формати HSLA і HEX

HSLA — це HSL з альфа-каналом прозорості: hsla(11, 100%, 60%, 0.5). Альфа змінюється від 0 (повністю прозорий) до 1 (непрозорий), сучасний CSS приймає її і всередині hsl().

HEX записує червоний, зелений і синій двома шістнадцятковими цифрами кожен, наприклад #ff5733. Це найпоширеніший спосіб записати колір у вебі та дизайнерських інструментах.

Як працює конвертація

Ми зчитуємо значення HSLA, переводимо його в CIE XYZ за матрицями зі специфікації CSS Color 4, а потім у HEX. Якщо колір не вміщується в цільове охоплення, він підганяється за алгоритмом CSS Color 4: світлота і тон зберігаються, зменшується лише хрома.

Запитання і відповіді

Як конвертувати HSLA в HEX?

Вставте або введіть значення HSLA у поле вище. PickShade конвертує його за формулами CSS Color 4 просто під час введення, а HEX копіюється одним кліком.

Чи точна конвертація HSLA в HEX?

Обчислення точні, результат округлюється лише для показу і з такою кількістю знаків, щоб зворотна конвертація давала той самий колір. Якщо колір не вміщується в охоплення цільового формату, PickShade попередить і покаже найближчий відповідний колір.

Чи можна одразу отримати інші формати?

Так. Усі інші формати, зокрема OKLCH, Display P3, Tailwind, SwiftUI, Flutter і Android, наведені під результатом і копіюються одним кліком.

Конвертер безкоштовний?

Так. Безкоштовно, без реєстрації, усе обчислюється просто у вашому браузері.