Công cụ chuyển HSL sang Hex là gì?
Công cụ này chuyển một màu được biểu diễn theo mô hình HSL — Hue (sắc độ), Saturation (độ bão hòa) và Lightness (độ sáng) — sang dạng mã thập lục phân (hex) thường dùng trong CSS, phần mềm thiết kế và lập trình web. HSL rất trực quan với con người: hue chọn màu trên vòng tròn màu, saturation quyết định màu rực hay nhạt, còn lightness điều chỉnh màu tối hay sáng. Trong khi đó, mã hex (ví dụ #3F7FBF) mới là định dạng mà trình duyệt và các công cụ thực sự đọc được.
Cách sử dụng
Bạn nhập hue từ 0 đến 360 độ, saturation từ 0 đến 100 phần trăm và lightness từ 0 đến 100 phần trăm, sau đó công cụ sẽ hiển thị ngay mã hex tương ứng, giá trị từng kênh RGB và một ô màu xem trực tiếp. Phép chuyển đổi này mang tính phổ quát, áp dụng cho mọi màu và không cần cài đặt bất kỳ phần mềm nào.
Giải thích công thức
Phép chuyển đổi trước tiên tính chroma \(C = (1 - |2L - 1|)\cdot S\), trong đó S và L là các phân số trong khoảng 0–1. Một biến phụ \(X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right)\) xử lý phần chuyển sắc giữa các màu cơ bản, còn độ lệch sáng \(m = L - \tfrac{C}{2}\) nâng kết quả lên đúng độ sáng cần có. Tùy theo hue rơi vào cung 60° nào, các kênh (R′,G′,B′) sẽ được gán từ C, X và 0. Mỗi kênh cuối cùng được tính bằng \(\text{round}((c^{\prime} + m)\cdot 255)\), và chuỗi hex chính là mã thập lục phân hai chữ số của R, G, B ghép lại với nhau.
$$\text{Hex} = \texttt{\#}\,\text{HH}_{R}\,\text{HH}_{G}\,\text{HH}_{B}$$
$$\text{where}\quad \left\{ \begin{aligned} C &= (1 - |2L - 1|)\cdot S \\ X &= C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right) \\ m &= L - \tfrac{C}{2} \\ (R,G,B) &= \text{round}\big((R^{\prime}+m,\,G^{\prime}+m,\,B^{\prime}+m)\cdot 255\big) \\ H &= \text{Hue},\quad S = \dfrac{\text{Sat}}{100},\quad L = \dfrac{\text{Light}}{100} \end{aligned} \right.$$
Ví dụ minh họa
Với HSL(210, 50%, 50%): S = 0,5, L = 0,5, nên \(C = (1 - |0|)\cdot 0{,}5 = 0{,}5\). \(H/60 = 3{,}5\), vậy \((3{,}5 \bmod 2) = 1{,}5\) và \(X = 0{,}5\cdot(1 - |0{,}5|) = 0{,}25\). \(m = 0{,}5 - 0{,}25 = 0{,}25\). Hue 210 nằm trong cung 3 (180–240), cho ra (R′,G′,B′) = (0, X, C). Vậy \(R = \text{round}(0{,}25 \cdot 255) = 64\), \(G = \text{round}(0{,}5 \cdot 255) = 128\), \(B = \text{round}(0{,}75 \cdot 255) = 191\) → #4080BF.
Câu hỏi thường gặp
Hue có lặp vòng không? Có — hue bằng 360 chính là màu đỏ giống như 0, và công cụ sẽ tự chuẩn hóa mọi giá trị về khoảng 0–360.
Vì sao các kênh màu của tôi đôi khi lệch một đơn vị? Việc làm tròn về số nguyên gần nhất có thể khiến một kênh chênh ±1 so với những công cụ khác dùng cách cắt bỏ phần thập phân; làm tròn là lựa chọn chính xác hơn.
Có tạo được màu xám không? Có — đặt saturation về 0 với bất kỳ hue nào, cả ba kênh sẽ bằng \(\text{round}(L \cdot 255)\), tạo ra một màu xám trung tính.
