Chuyển Đổi HEX Sang HSL

Công cụ chuyển HEX sang HSL biến mã thập lục phân như #3B82F6 thành giá trị HSL như hsl(217, 91%, 60%). HSL mô tả màu theo Sắc độ (chính màu đó, 0–360°), Độ bão hòa (mức độ rực rỡ, 0–100%) và Độ sáng (mức độ sáng, 0–100%) — một mô hình gần với cách con người tư duy về màu hơn nhiều so với các ký tự HEX thô.

Khi màu đã ở dạng HSL, việc dựng bảng màu trở nên trực quan: giữ nguyên sắc độ và chỉnh độ sáng để tạo màu nhạt và đậm, hoặc chỉ đổi độ bão hòa để màu nổi bật hơn hay dịu hơn.

Vì sao nên chuyển sang HSL

Màu nhạt & màu đậm

Tăng hoặc giảm độ sáng để tạo ra các biến thể sáng hơn và tối hơn nhất quán từ một màu gốc.

Điều chỉnh độ rực rỡ

Chỉ chỉnh độ bão hòa để màu nổi bật hơn hoặc làm dịu lại cho nền và các trạng thái giao diện.

Dựng bảng màu

Xoay sắc độ theo các bước đều nhau để tạo bảng màu hài hòa, cách đều.

Cách chuyển HEX sang HSL

Nhập mã HEX

Gõ hoặc dán một giá trị HEX — có hoặc không có dấu #. Hỗ trợ cả dạng viết tắt 3 ký tự (#F00) lẫn dạng 6 ký tự (#FF0000).

Xem kết quả HSL

Giá trị HSL hiện ra ngay khi bạn gõ, và ô màu trực tiếp cập nhật để bạn xác nhận màu bằng mắt.

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 màu bằng mắt — các ô HEX và HSL sẽ tự cập nhật.

Sao chép & dùng lại

Sao chép chuỗi hsl() cho CSS của bạn. Bảng bên dưới cũng hiển thị màu dưới dạng HEX, RGB, HSV và CMYK.

Tính năng

Hiểu các kênh HSL

Kênh	Phạm vi	Điều khiển gì
Sắc độ	0–360°	Vị trí màu trên bánh xe: 0° đỏ, 120° lục, 240° lam.
Độ bão hòa	0–100%	Độ rực: 0% là xám, 100% là phiên bản rực rỡ nhất.
Độ sáng	0–100%	Độ sáng: 0% là đen, 50% là sắc thuần, 100% là trắng.

Chuyển đổi tức thì

Kết quả trực tiếp trong trình duyệt, cập nhật ngay khi bạn gõ — không tải lại, không gửi lên máy chủ.

Viết tắt & chữ hoa/thường

HEX 3 ký tự được mở rộng tự động và bỏ qua chữ hoa, chữ thường.

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

Ô màu trực tiếp cùng bộ chọn màu tích hợp để chọn bằng mắt.

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

HEX, RGB, HSL, HSV và CMYK hiển thị cùng nhau cho mỗi màu.

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

HSL là gì?

HSL là viết tắt của Sắc độ, Độ bão hòa và Độ sáng. Sắc độ là loại màu (0–360°), độ bão hòa là mức độ rực rỡ (0–100%), và độ sáng là mức độ sáng (0–100%).

Vì sao dùng HSL thay vì HEX hay RGB?

HSL trực quan hơn với con người. Bạn có thể tạo sắc nhạt hơn hay đậm hơn chỉ bằng cách đổi độ sáng, và phiên bản rực hơn hay dịu hơn chỉ bằng cách đổi độ bão hòa — mà không phải đoán các ký tự HEX.

HSL có được CSS hỗ trợ không?

Có. Mọi trình duyệt hiện đại đều hỗ trợ đầy đủ các hàm màu hsl() và hsla(), nên bạn có thể dán đầu ra thẳng vào tệp style.

Chuyển HEX sang HSL có mất độ chính xác không?

Giá trị HSL được làm tròn về số nguyên cho dễ đọc, nên khi chuyển ngược lại có thể lệch một đơn vị mỗi kênh. Màu nhìn thấy gần như giống hệt.

Làm sao tạo phiên bản sáng hơn của màu?

Giữ nguyên sắc độ và độ bão hòa, rồi tăng phần trăm độ sáng. Muốn sắc tối hơn thì giảm xuống — đây chính là lý do HSL rất tiện cho bảng màu.