Công cụ chuyển đổi RGB sang HSL là gì?
Công cụ này giúp bạn chuyển một màu được biểu diễn theo hệ RGB (Đỏ, Xanh lá, Xanh dương, mỗi kênh từ 0–255) sang hệ HSL (Hue – màu sắc, Saturation – độ bão hòa, Lightness – độ sáng). HSL thường trực quan hơn với các nhà thiết kế vì nó tách riêng sắc thái của màu (hue) khỏi mức độ rực rỡ (saturation) và độ sáng tối (lightness). Phép chuyển đổi này mang tính phổ quát, không phụ thuộc vào thiết bị hay quốc gia nào.
Cách sử dụng
Nhập giá trị đỏ, xanh lá và xanh dương của màu bạn muốn chuyển, mỗi giá trị nằm trong khoảng 0 đến 255. Nhấn nút tính toán để nhận 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, chuẩn hóa từng kênh bằng cách chia cho 255 để giá trị nằm trong khoảng 0–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, và \(\Delta = \text{max} - \text{min}\). Độ sáng tính bằng độ sáng theo công thức sau, độ bão hòa là \(S = \Delta / (1 - \lvert 2L - 1 \rvert)\), hoặc bằng 0 khi \(\Delta = 0\) (màu xám). Màu sắc (hue) được tính dựa trên kênh nào có giá trị lớn nhất, nhân với \(60^{\circ}\), sau đó quy về khoảng 0–360°.
$$L = \frac{C_{\max} + C_{\min}}{2}, \quad S = \frac{C_{\max} - C_{\min}}{1 - \lvert 2L - 1 \rvert}$$$$\text{where}\quad \left\{ \begin{aligned} R^{\prime} &= \frac{\text{Red}}{255}, \;\; G^{\prime} = \frac{\text{Green}}{255}, \;\; B^{\prime} = \frac{\text{Blue}}{255} \\ C_{\max} &= \max(R^{\prime}, G^{\prime}, B^{\prime}), \;\; C_{\min} = \min(R^{\prime}, G^{\prime}, B^{\prime}) \end{aligned} \right.$$$$H = 60^{\circ} \times \begin{cases} \dfrac{G^{\prime} - B^{\prime}}{\Delta} \bmod 6 & C_{\max} = R^{\prime} \\[0.6em] \dfrac{B^{\prime} - R^{\prime}}{\Delta} + 2 & C_{\max} = G^{\prime} \\[0.6em] \dfrac{R^{\prime} - G^{\prime}}{\Delta} + 4 & C_{\max} = B^{\prime} \end{cases}$$
Ví dụ minh họa
Lấy màu đỏ cà chua RGB(255, 99, 71). Sau khi chuẩn hóa: \(R=1\), \(G=0.388\), \(B=0.278\). \(\text{max}=1\), \(\text{min}=0.278\), \(\Delta=0.722\).
$$L = \frac{1 + 0.278}{2} = 0.639 \rightarrow 63.9\%$$$$S = \frac{0.722}{1 - \lvert 2 \cdot 0.639 - 1 \rvert} = \frac{0.722}{0.722} = 1 \rightarrow 100\%$$Vì \(\text{max} = R\) nên:
$$H = 60 \times \left(\frac{0.388 - 0.278}{0.722}\right) = 60 \times 0.1525 \approx 9.13^{\circ}$$Kết quả: hsl(9.13, 100%, 63.92%).
Câu hỏi thường gặp
Vì sao độ bão hòa bằng 0 với màu xám? Khi cả ba kênh bằng nhau, \(\Delta = 0\), nghĩa là không có thông tin về màu sắc nên độ bão hòa không xác định — theo quy ước, nó được đặt bằng 0.
Các giá trị H, S, L có được làm tròn không? Kết quả hiển thị được làm tròn đến hai chữ số thập phân, nhưng giá trị tính toán gốc vẫn giữ độ chính xác đầy đủ.
Tôi có thể chuyển ngược lại không? Có — chuyển HSL sang RGB là quá trình ngược lại, dựa trên cung màu (hue sector) và độ chroma.
