Chuyển Đổi HSL Sang HEX

Công cụ chuyển HSL sang HEX biến các giá trị HSL như hsl(217, 91%, 60%) thành mã thập lục phân như #3B82F6. HSL là mô hình thân thiện nhất để thiết kế màu theo sắc độ, độ bão hòa và độ sáng — nhưng phần lớn tệp style, design token và HTML vẫn cần mã HEX, nên phép chuyển đổi này nối liền hai bên.

Mẹo quy trình: tinh chỉnh màu chính xác bằng HSL — dễ hình dung — rồi chuyển sang HEX để lấy giá trị thật sự dùng trong code.

Khi nào bạn cần

Từ thiết kế sang code

Bạn đã dựng bảng màu bằng HSL và giờ cần mã HEX cho tệp chủ đề hay cẩm nang thương hiệu.

Chia sẻ gọn gàng

Một chuỗi HEX duy nhất dễ sao chép và dán hơn ba con số HSL kèm dấu phần trăm.

Hỗ trợ hệ thống cũ

Một số công cụ và đoạn code cũ vẫn cần HEX thay vì hàm hsl().

Cách chuyển HSL sang HEX

Nhập giá trị HSL

Gõ giá trị dạng 217, 91%, 60% hoặc hsl(217, 91%, 60%). Ký hiệu độ ở sắc độ là tùy chọn, và các dấu % được chấp nhận nhưng không bắt buộc.

Xem kết quả HEX

Mã HEX được tạo ngay lập tức, và ô màu trực tiếp cập nhật để bạn xác nhận màu đúng như ý.

Hoặc chọn màu

Bấm vào ô màu để mở bộ chọn màu của trình duyệt và chọn bằng mắt — các ô HSL và HEX sẽ tự điền.

Sao chép & dùng lại

Sao chép mã HEX cho tệp style của bạn. Bảng bên dưới cũng liệt kê RGB, HSL, HSV và CMYK của cùng màu đó.

Tính năng

Chuyển đổi tức thì

HEX hiện ngay khi bạn gõ, hoàn toàn ở phía trình duyệt, không gửi gì lên máy chủ.

Nhập liệu linh hoạt

Hoạt động dù có hay không các dấu %, ký hiệu độ và vỏ bọc hsl().

Xem trước & bộ chọn màu

Ô màu trực tiếp xác nhận màu, và bộ chọn tích hợp cho phép chọn màu bằng mắt.

Tất cả định dạng cùng lúc

Mỗi kết quả đều hiển thị HEX, RGB, HSL, HSV và CMYK.

Giữ trong phạm vi: sắc độ phải từ 0–360 và cả độ bão hòa lẫn độ sáng từ 0–100. Giá trị ngoài các giới hạn này sẽ bị báo lỗi vì không tương ứng với màu hợp lệ.

Câu hỏi thường gặp

Giá trị HSL nào là hợp lệ?

Sắc độ nằm trong khoảng 0 đến 360 (độ), còn Độ bão hòa và Độ sáng nằm trong khoảng 0 đến 100 phần trăm. Giá trị ngoài các khoảng này không phải là màu hợp lệ.

Tôi có cần ghi dấu % không?

Không. Công cụ chấp nhận độ bão hòa và độ sáng có hoặc không có dấu % — 91% và 91 được xử lý như nhau.

Nếu giá trị vượt phạm vi thì sao?

Công cụ sẽ báo lỗi nếu có giá trị nằm ngoài phạm vi hợp lệ, để bạn sửa lại đầu vào thay vì nhận một màu sai lệch.

Tôi có thể dán cả chuỗi hsl() đầy đủ không?

Có. Cả hsl(217, 91%, 60%) lẫn dạng đơn giản 217, 91%, 60% đều dùng được — vỏ bọc và ký hiệu độ được phân tích và bỏ qua khi cần.

Đầu ra HEX có viết hoa không?

Có, HEX được trả về dạng chữ hoa (ví dụ #3B82F6), theo quy ước thông thường. CSS coi HEX chữ hoa và chữ thường là như nhau.