HSLA HWB 변환기

HSLA 값을 붙여넣으면 바로 HWB 값이 나옵니다. 다른 형식을 입력해도 됩니다.

HSLA에서

인식된 형식: HSL

HWB 값hwb(10.59 20% 0% / 0.8)

투명도 없는 같은 색, 불투명 HWB

색 조정

색조11°

불투명도80%

명도68%

크로마0.210

색조34°

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는 HSL에 불투명도를 위한 알파 채널을 더한 형식으로 hsla(11, 100%, 60%, 0.5)처럼 씁니다. 알파는 0(완전 투명)부터 1(완전 불투명)까지이며, 최신 CSS에서는 hsl() 안에서도 쓸 수 있습니다.

HWB는 색조와 여기에 섞인 흰색, 검은색의 양으로 색상을 나타냅니다. CSS Color 4에 포함되어 있으며 더 밝거나 어두운 변형을 만들 때 편리합니다.

HSLA 값을 읽어 CSS Color 4 명세의 행렬로 CIE XYZ로 바꾼 뒤 다시 HWB 값으로 변환합니다. 대상 색역을 벗어난 값은 CSS Color 4 알고리즘으로 매핑하며, 이때 명도와 색조는 유지하고 크로마만 줄입니다.

HSLA 값을 HWB 값으로 어떻게 변환하나요?

위 입력란에 HSLA 값을 붙여넣거나 입력하세요. PickShade가 입력하는 즉시 CSS Color 4 공식으로 변환하며, 클릭 한 번으로 HWB 값을 복사할 수 있습니다.

HSLA HWB 변환은 정확한가요?

계산은 정확하며, 결과는 화면에 표시할 때만 반올림합니다. 자릿수는 다시 변환해도 같은 색상이 나올 만큼 충분합니다. 색상이 대상 색역에 맞지 않으면 PickShade가 알려 주고 범위 안의 가장 가까운 색상을 보여 줍니다.

다른 형식도 한 번에 얻을 수 있나요?

네. OKLCH, Display P3, Tailwind, SwiftUI, Flutter, Android를 포함한 다른 모든 형식이 결과 아래에 표시되며 클릭 한 번으로 복사됩니다.

이 변환기는 무료인가요?

네. 무료이고 가입이 필요 없으며 모든 처리가 브라우저 안에서 이루어집니다.