Chuyển đổi HSLA sang HSL

Dán giá trị HSLA, nhận ngay HSL. Các định dạng khác cũng dùng được.

Từ HSLA

Nhận dạng: HSL

Giá trị HSLhsla(10.59, 100%, 60%, 0.8)

HSL sang HSLA

Cùng màu nhưng không trong suốt, dạng HSL đặc

Tinh chỉnh màu

Tông màu11°

Độ trong suốt80%

Độ sáng68%

Độ rực0,210

Tông màu34°

Mọi định dạng khác

Bảng độ mờ: alpha trong HEX và HSLA

Trong mã HEX 8 chữ số, hai chữ số cuối quy định độ mờ đục: FF là đục hoàn toàn, 80 khoảng 50%, 00 là trong suốt hoàn toàn. Bảng hiển thị màu ví dụ theo từng bước 5%.

Độ mờ đục	Alpha 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)

Ví dụ chuyển HSLA sang HSL

Màu	HSLA	HSL
	hsla(0, 100%, 50%, 1)	hsl(0, 100%, 50%)
	hsla(120, 100%, 50%, 1)	hsl(120, 100%, 50%)
	hsla(240, 100%, 50%, 1)	hsl(240, 100%, 50%)
	hsla(0, 0%, 100%, 1)	hsl(0, 0%, 100%)
	hsla(0, 0%, 0%, 1)	hsl(0, 0%, 0%)
	hsla(0, 0%, 50.2%, 1)	hsl(0, 0%, 50.2%)
	hsla(10.59, 100%, 60%, 1)	hsl(10.59, 100%, 60%)
	hsla(217.22, 91.22%, 59.8%, 1)	hsl(217.22, 91.22%, 59.8%)
	hsla(160.12, 84.08%, 39.41%, 1)	hsl(160.12, 84.08%, 39.41%)
	hsla(37.69, 92.13%, 50.2%, 1)	hsl(37.69, 92.13%, 50.2%)
	hsla(258.31, 89.53%, 66.27%, 1)	hsl(258.31, 89.53%, 66.27%)
	hsla(330.37, 81.19%, 60.39%, 1)	hsl(330.37, 81.19%, 60.39%)

Về HSLA và HSL

HSLA là HSL thêm kênh alpha cho độ mờ đục, viết là hsla(11, 100%, 60%, 0.5). Alpha từ 0 (trong suốt hoàn toàn) đến 1 (đục hoàn toàn), và CSS hiện đại cũng chấp nhận nó trong hsl().

HSL mô tả tông màu bằng độ, độ bão hòa và độ sáng bằng phần trăm. Định dạng này dễ đọc, nhưng độ sáng không đồng đều theo cảm nhận: vàng ở 50% trông sáng hơn nhiều so với xanh dương ở 50%.

Cách chuyển đổi hoạt động

PickShade đọc giá trị HSLA, chuyển sang CIE XYZ bằng các ma trận trong đặc tả CSS Color 4, rồi chuyển tiếp sang HSL. Giá trị nằm ngoài gam màu đích được ánh xạ theo thuật toán CSS Color 4: giữ độ sáng và tông màu, chỉ giảm độ rực.

Hỏi đáp

Làm sao chuyển HSLA sang HSL?

Dán hoặc nhập giá trị HSLA vào ô phía trên. PickShade chuyển đổi ngay khi bạn gõ theo công thức CSS Color 4, và chỉ cần một cú nhấp để sao chép giá trị HSL.

Chuyển HSLA sang HSL có chính xác không?

Phép tính là chính xác, kết quả chỉ được làm tròn khi hiển thị, với đủ chữ số để chuyển ngược lại vẫn ra đúng màu cũ. Nếu màu không nằm trong gam màu đích, PickShade sẽ cảnh báo và hiện màu gần nhất nằm trong gam.

Có lấy được các định dạng khác cùng lúc không?

Có. Mọi định dạng khác, gồm OKLCH, Display P3, Tailwind, SwiftUI, Flutter và Android, đều được liệt kê bên dưới kết quả và sao chép bằng một cú nhấp.

Công cụ chuyển đổi này có miễn phí không?

Có. Hoàn toàn miễn phí, không cần đăng ký và chạy hoàn toàn trong trình duyệt của bạn.