RGB sang HSL là gì?
RGB mô tả một màu bằng cách pha trộn ba ánh sáng Đỏ (Red), Lục (Green) và Lam (Blue), mỗi kênh có thang giá trị từ 0 đến 255. HSL cũng diễn tả cùng một màu đó nhưng bằng ba con số trực quan hơn: Sắc độ (Hue — vị trí của màu trên vòng tròn màu 0-360°), Độ bão hòa (Saturation — màu sống động đến đâu, 0-100%) và Độ sáng (Lightness — màu sáng hay tối, 0-100%). Nhà thiết kế thường thấy HSL dễ hình dung hơn, bởi khi chỉnh độ sáng hay độ bão hòa là bạn đang trực tiếp làm màu "sáng hơn", "tối hơn", "rực hơn" hay "xám hơn".
Cách dùng công cụ này
Bạn chỉ cần nhập giá trị Đỏ, Lục và Lam của màu, mỗi giá trị nằm trong khoảng 0 đến 255. Công cụ sẽ lập tức trả về bộ ba HSL tương ứng, sẵn sàng để dán vào CSS theo dạng hsl(H, S%, L%).
Giải thích công thức
Trước tiên, mỗi kênh được chuẩn hóa bằng cách chia cho 255 để đưa về khoảng từ 0 đến 1. Gọi max và min lần lượt là giá trị lớn nhất và nhỏ nhất trong ba kênh. Độ sáng được tính theo \(L = (C_{max} + C_{min}) / 2\). Nếu max bằng min thì màu là một sắc xám, khi đó độ bão hòa và sắc độ đều bằng 0. Ngược lại, độ bão hòa bằng \((C_{max} - C_{min}) / (2 - C_{max} - C_{min})\) khi \(L > 0{,}5\), và bằng \((C_{max} - C_{min}) / (C_{max} + C_{min})\) khi \(L \le 0{,}5\). Sắc độ được suy ra từ kênh nào đang giữ giá trị lớn nhất rồi quy đổi sang độ (0-360).
$$L = \frac{C_{max} + C_{min}}{2}, \quad S = \begin{cases} \dfrac{\Delta}{2 - C_{max} - C_{min}} & L > 0.5 \\[0.6em] \dfrac{\Delta}{C_{max} + C_{min}} & L \le 0.5 \end{cases}$$$$\text{where}\quad \left\{ \begin{aligned} R &= \frac{\text{Red}}{255}, \; G = \frac{\text{Green}}{255}, \; B = \frac{\text{Blue}}{255} \\ C_{max} &= \max(R,G,B), \; C_{min} = \min(R,G,B), \; \Delta = C_{max} - C_{min} \end{aligned} \right.$$$$H = 60^{\circ} \times \begin{cases} \left(\dfrac{G - B}{\Delta}\right) \bmod 6 & C_{max} = R \\[0.7em] \dfrac{B - R}{\Delta} + 2 & C_{max} = G \\[0.7em] \dfrac{R - G}{\Delta} + 4 & C_{max} = B \end{cases}$$
Ví dụ minh họa
Với màu đỏ cà chua RGB(255, 99, 71): chuẩn hóa = (1,0; 0,388; 0,278). max = 1,0, min = 0,278, nên \(L = 0{,}639 \to 63{,}9\%\). Vì \(L > 0{,}5\) nên $$S = (1{,}0 - 0{,}278) / (2 - 1{,}0 - 0{,}278) = 0{,}722 / 0{,}722 = 1{,}0 \to 100\%.$$ Kênh lớn nhất là đỏ, do đó $$H = 60 \times ((0{,}388 - 0{,}278) / 0{,}722) = 60 \times 0{,}1525 = 9{,}1^{\circ}.$$ Kết quả: hsl(9, 100%, 64%).
Câu hỏi thường gặp
Vì sao sắc độ bằng 0 với các màu xám? Khi đỏ, lục và lam bằng nhau thì không có màu nào chiếm ưu thế, nên sắc độ không xác định và theo quy ước được ghi là 0.
HSL có giống HSV/HSB không? Không. HSL và HSV dùng chung sắc độ nhưng cách tính độ bão hòa và giá trị thứ ba lại khác nhau; công cụ này xuất ra HSL.
Tôi có thể dán kết quả thẳng vào CSS không? Có — các trình duyệt hiện đại chấp nhận trực tiếp hsl(9, 100%, 64%) như một giá trị màu.
