Công cụ nhận mọi kiểu hex mà CSS hỗ trợ: dạng 6 ký tự #3366cc, dạng rút gọn 3 ký tự #36c, và dạng 4 hoặc 8 ký tự có thêm kênh alpha, có hay không có dấu # đều được. Kết quả hiển thị chuỗi hsl() hoặc hsla(), từng giá trị riêng lẻ và cách quy đổi theo từng thành phần - kèm một dòng chuyển ngược từ HSL sang HEX khi cần. Mọi thứ chạy ngay trên trình duyệt - không tải lên, không cần tài khoản, không giới hạn số lần dùng.
Chuyển đổi màu HEX sang HSL
Chạy hoàn toàn trên trình duyệt của bạn - không tải lên, không cần đăng ký.
CSS
hsl(220, 60%, 50%)Cách quy đổi
Hue220
Saturation60%
Lightness50%
Chiều ngược lại? HSL sang HEX
#3366ccLàm sao để chuyển mã màu HEX sang HSL?
Trước tiên đọc mã hex thành đỏ, xanh lá, xanh dương (0-255), sau đó diễn giải lại màu đó theo hue (vòng màu), saturation (độ bão hòa) và lightness (độ sáng). Hue là góc trên vòng màu (0-360), saturation cho biết màu rực rỡ đến đâu (0-100%) và lightness cho biết độ sáng (0-100%). #3366cc trở thành hsl(220, 60%, 50%). Công cụ này thực hiện phép chuyển đó ngay khi bạn gõ.
Cách dùng
- 1Nhập mã HEX. Gõ hoặc dán mã màu hex như #3366cc (hoặc #36c), hoặc chọn màu bằng bảng màu. Dấu # không bắt buộc.
- 2Đọc giá trị HSL. Chuỗi hsl(), các giá trị và bản xem trước màu cập nhật ngay khi bạn gõ, kèm cách quy đổi riêng cho hue, saturation và lightness.
- 3Sao chép định dạng cần dùng. Nhấn Copy bên cạnh chuỗi hsl() hoặc các giá trị thô. Cần chiều ngược lại? Nhập hue, saturation và lightness bên dưới để lấy lại mã hex.
Dành cho ai
- Lập trình viên front-end đổi mã hex sang hsl() để chỉnh độ sáng cho trạng thái hover và focus mà không cần chọn hẳn một màu mới.
- Nhà thiết kế xây bảng màu giữ nguyên hue rồi tăng giảm saturation và lightness để tạo các sắc thái đậm nhạt từ một màu thương hiệu duy nhất.
- Người viết design token hay theme lưu màu dưới dạng HSL vì dễ đọc và dễ chỉnh tay hơn nhiều so với một chuỗi hex.
- Bất kỳ ai cần khớp màu giữa các công cụ khác nhau, nơi một bên dùng hex (Figma, phần lớn CSS) còn bên kia cần HSL (SCSS helper, một số hệ màu).
Câu hỏi thường gặp
Công cụ chuyển HEX sang HSL này có miễn phí không?
Có, hoàn toàn miễn phí, không cần đăng ký và không giới hạn số lần dùng. Mọi thứ chạy ngay trên trình duyệt.
Màu tôi nhập có bị tải lên đâu không?
Không. Phép chuyển đổi chỉ là JavaScript chạy trên thiết bị của bạn - không có gì được gửi lên máy chủ, và công cụ vẫn hoạt động khi mất mạng sau khi trang đã tải xong.
HSL là gì?
HSL là viết tắt của hue (vòng màu), saturation (độ bão hòa) và lightness (độ sáng). Hue là một góc từ 0 đến 360 độ trên vòng màu, saturation cho biết màu rực rỡ đến đâu từ 0 đến 100%, còn lightness chạy từ 0% (đen) qua màu thuần ở 50% đến 100% (trắng).
Làm sao để tự tay chuyển hex sang HSL?
Chuyển mã hex thành đỏ, xanh lá, xanh dương rồi chia mỗi giá trị cho 255. Lấy giá trị lớn nhất và nhỏ nhất trong ba số đó: lightness là trung bình cộng của chúng, saturation bằng (max - min) chia cho (1 - |2L - 1|), còn hue được tính từ kênh nào là lớn nhất, quy đổi về thang 0-360 độ.
Có hỗ trợ dạng rút gọn 3 ký tự như #36c không?
Có. Trong dạng rút gọn của CSS, mỗi chữ số được nhân đôi, nên #36c mở rộng thành #3366cc và cho ra hsl(220, 60%, 50%). Dạng 4 ký tự hoạt động tương tự, với chữ số cuối là alpha.
Công cụ xử lý độ trong suốt (HSLA) thế nào?
Mã hex 8 ký tự mang giá trị alpha ở cặp cuối. Byte đó (0-255) được chia cho 255 để ra giá trị alpha 0-1 mà hsla() cần, làm tròn ba chữ số thập phân - nên #3366cc80 trở thành hsla(220, 60%, 50%, 0.502).
Có thể chuyển ngược HSL về HEX không?
Có. Dùng dòng HSL sang HEX bên dưới kết quả: nhập hue (0-360) cùng saturation và lightness (0-100%) là nhận lại mã hex ngay lập tức. Giá trị vượt phạm vi sẽ được giới hạn lại.
Vì sao nên dùng HSL thay vì hex?
HSL dễ đọc hơn nhiều: bạn có thể làm màu sáng lên bằng cách tăng L, làm nhạt đi bằng cách giảm S, hoặc đổi hẳn tông màu bằng cách chỉnh H - mà không cần đoán mò từng ký tự hex. Nhờ vậy HSL rất hợp để xây bảng màu nhất quán, trạng thái hover và design token.