HSL là Hue (màu sắc), Saturation (độ bão hòa), Lightness (độ sáng). Hue là góc màu (0–360°), saturation là cường độ màu (0–100%), lightness là độ sáng (0–100%).

Tại sao dùng HSL thay vì HEX?

HSL trực quan hơn cho con người. Bạn có thể dễ dàng tạo màu sáng/tối hơn hoặc đậm/nhạt hơn bằng cách điều chỉnh một giá trị.

#ffffff trong HSL là gì?

#ffffff (trắng) là hsl(0, 0%, 100%). Bất kỳ màu nào với 0% saturation và 100% lightness đều là trắng.

Chuyển đổi Màu HEX sang HSL

Chuyển đổi mã màu HEX sang giá trị HSL ngay lập tức. Công cụ hex sang hsl miễn phí — hữu ích cho CSS và thiết kế màu sắc.

HEX

HSL

Formula: Convert HEX → RGB first, then RGB → HSL

HEX to HSL Conversion Table

HEX	HSL
#ff0000	hsl(0, 100%, 50%)
#00ff00	hsl(120, 100%, 50%)
#0000ff	hsl(240, 100%, 50%)

Formula

Convert HEX → RGB first, then RGB → HSL

Example: #ff0000 = hsl(0, 100%, 50%)

Frequently Asked Questions

Cần chiều ngược lại? HSL sang HEX Converter

Tổng quan về chuyển đổi đơn vị color

Chuyển đổi màu giữa HEX, RGB, HSL và HSV rất cần thiết cho phát triển web, thiết kế đồ họa và xuất bản số. Mã HEX như #FF5733 là viết tắt của giá trị RGB — mỗi cặp mã hóa cường độ đỏ, xanh lá, xanh lam từ 0 đến 255. HSL (Hue, Saturation, Lightness) và HSV (Hue, Saturation, Value) trực quan hơn cho nghệ sĩ vì chúng tách tông màu khỏi độ sáng, giúp điều chỉnh dễ hơn. Cả bốn hệ mô tả cùng không gian màu sRGB.

Cách hoạt động

HEX sang RGB trực tiếp: chia hex 6 ký tự thành ba cặp 2 ký tự, sau đó chuyển từ cơ số 16 sang cơ số 10. #FF5733 → R=255, G=87, B=51. Chuyển đổi HSL phức tạp hơn vì liên quan đến tìm kênh chủ đạo và tính chênh lệch tương đối. Converter xử lý phép toán, nhưng điểm chính là tất cả chuyển đổi đều không mất thông tin khi thực hiện chính xác.

Khi nào bạn cần phép chuyển đổi này

Thiết kế web và định nghĩa màu CSS
Thiết kế đồ họa (Photoshop, Figma, Sketch)
Tài liệu hệ thống màu thương hiệu
Bảng màu trực quan hóa dữ liệu
Kiểm tra khả năng tiếp cận (tỷ lệ tương phản cần giá trị RGB)
Khớp màu in-sang-số (dù in dùng CMYK, không RGB)

Lịch sử nhỏ

RGB làm mô hình màu có từ thí nghiệm 1861 của James Clerk Maxwell chứng minh mọi màu nhìn thấy có thể tạo bằng kết hợp ánh sáng đỏ, xanh lá, xanh lam. Rút gọn HEX cho RGB trở thành chuẩn với HTML 3.2 năm 1996 vì trình duyệt web cần cách compact chỉ định màu. HSL được chính thức hóa năm 1978 và trở thành chuẩn CSS trong CSS3 (2011) cho thao tác màu trực quan hơn.

Sai lầm thường gặp

Dùng hex 3 chữ số (như #F53) khi cần 6 chữ số — #F53 chỉ có 4.096 màu so với 16,7 triệu
Giả định góc hue của HSL là độ (0–360) khi công cụ mong giá trị chuẩn hóa 0–1
Trộn giá trị sRGB và linear-RGB — hầu hết công cụ dùng sRGB nhưng một số pipeline dùng linear
Quên rằng cảm nhận màu không đồng đều — khoảng cách RGB bằng nhau không đều nhìn thấy

Mẹo nhanh

Giải mã HEX nhẩm nhanh: F = 15 × 16 + F = 255; 80 = 128 (nửa độ sáng)
Đỏ thuần = #FF0000 = rgb(255, 0, 0) = hsl(0, 100%, 50%)
Cho accessibility: nhắm ít nhất tỷ lệ tương phản 4,5:1 giữa văn bản và nền