Công cụ chuyển Hex sang HSL là gì?
Công cụ này chuyển một mã màu thập lục phân (ký hiệu #RRGGBB quen thuộc dùng trong CSS và phần mềm thiết kế) sang mô hình màu HSL — gồm Sắc độ (Hue), Độ bão hòa (Saturation) và Độ sáng (Lightness). HSL thường trực quan hơn hex hay RGB vì nó mô tả màu theo đúng cách con người cảm nhận: đó là màu gì (sắc độ), màu rực rỡ đến đâu (độ bão hòa) và sáng hay tối thế nào (độ sáng). Công cụ hoạt động với mọi màu dựa trên RGB và không bị giới hạn bởi quốc gia hay tiêu chuẩn nào ngoài ký hiệu hex sRGB chuẩn.
Cách sử dụng
Nhập một giá trị màu hex, ví dụ #3498DB. Bạn có thể thêm hoặc bỏ dấu # ở đầu, và mã rút gọn ba ký tự như #0AF sẽ tự động được mở rộng thành #00AAFF. Công cụ trả về bộ ba giá trị HSL tương ứng cùng các giá trị kênh đỏ, xanh lá và xanh dương đã giải mã (từ 0 đến 255).
Giải thích công thức
Trước tiên, mã hex được tách thành ba byte đỏ, xanh lá và xanh dương; mỗi byte được chia cho 255 để chuẩn hóa về khoảng từ 0 đến 1. Gọi max và min là giá trị lớn nhất và nhỏ nhất trong ba giá trị này. Độ sáng đơn giản là trung bình cộng của chúng: \(L = \frac{\max + \min}{2}\). Độ bão hòa bằng 0 khi max bằng min (màu xám). Ngược lại, nếu \(L > 0.5\) thì \(S = \frac{\max - \min}{2 - \max - \min}\), nếu không thì \(S = \frac{\max - \min}{\max + \min}\). Sắc độ phụ thuộc vào kênh nào đạt giá trị lớn nhất và được quy đổi sang đơn vị độ bằng cách nhân với 60.
$$L = \frac{\max + \min}{2}, \quad S = \begin{cases} \dfrac{\max - \min}{2 - \max - \min}, & L > 0.5 \\[0.6em] \dfrac{\max - \min}{\max + \min}, & L \le 0.5 \end{cases}$$$$\text{where}\quad \left\{ \begin{aligned} (R,G,B) &= \frac{\text{RGB from }\text{Hex Color}}{255} \\ \max &= \operatorname{max}(R,G,B),\ \min = \operatorname{min}(R,G,B) \end{aligned} \right.$$$$H = 60^{\circ} \times \begin{cases} \dfrac{G - B}{d} \bmod 6, & \max = R \\[0.6em] \dfrac{B - R}{d} + 2, & \max = G \\[0.6em] \dfrac{R - G}{d} + 4, & \max = B \end{cases} \qquad d = \max - \min$$
Ví dụ minh họa
Lấy #3498DB: R = 52, G = 152, B = 219. Sau chuẩn hóa: \(r \approx 0.2039\), \(g \approx 0.5961\), \(b \approx 0.8588\). \(\max = b = 0.8588\), \(\min = r = 0.2039\), nên \(L = 0.5314\) (53.14%). Vì \(L > 0.5\) nên $$S = \frac{0.6549}{2 - 1.0627} = 0.6987\ (69.87\%).$$ Xanh dương là giá trị lớn nhất, nên $$H = 60 \times \left(4 + \frac{0.2039 - 0.5961}{0.6549}\right) = 60 \times 3.4011 \approx 204.07^{\circ}.$$ Kết quả: hsl(204, 70%, 53%).
Câu hỏi thường gặp
Công cụ có chấp nhận mã hex rút gọn không? Có — các mã ba ký tự như #F0C sẽ được mở rộng tự động.
Các giá trị HSL có chính xác không? Sắc độ, độ bão hòa và độ sáng đều được tính ở độ chính xác đầy đủ, chỉ làm tròn khi hiển thị; bạn vẫn xem được giá trị gốc.
Có bắt buộc nhập dấu thăng không? Không, công cụ xử lý được giá trị có hoặc không có dấu # ở đầu.
