Công cụ chuyển HSL sang RGB là gì?
HSL là viết tắt của Hue (sắc độ), Saturation (độ bão hòa) và Lightness (độ sáng) — một cách trực quan để mô tả màu sắc. Trong đó, hue là góc trên vòng tròn màu (0–360°), saturation là cường độ của màu (0–100%), còn lightness cho biết màu sáng hay tối (0–100%). RGB mô tả cùng một màu nhưng qua ba kênh — Đỏ (Red), Lục (Green) và Lam (Blue) — mỗi kênh có giá trị từ 0 đến 255, đây là định dạng được dùng trên màn hình, trong CSS và các tệp ảnh. Công cụ này giúp bạn chuyển một màu HSL sang giá trị RGB tương ứng chính xác.
Cách sử dụng
Nhập sắc độ (hue) theo độ, độ bão hòa (saturation) theo phần trăm và độ sáng (lightness) theo phần trăm. Công cụ sẽ lập tức trả về bộ ba rgb(r, g, b) tương ứng và hiển thị ô xem trước màu trực tiếp, giúp bạn kiểm tra màu sắc bằng mắt ngay tức thì.
Giải thích công thức
Trước tiên, hãy chuyển S và L về dạng phân số (0–1). Chroma thể hiện độ rực rỡ của màu: \( C = (1 - |2L - 1|)\cdot S \). Thành phần trung gian là \( X = C\,(1 - |(H/60 \bmod 2) - 1|) \), và giá trị bù \( m = L - C/2 \) dùng để điều chỉnh toàn bộ về đúng độ sáng. Sắc độ được chia thành sáu cung, mỗi cung rộng 60°; mỗi cung sẽ gán C, X và 0 vào ba vị trí R, G, B theo một thứ tự nhất định. Cuối cùng, cộng m vào từng thành phần rồi nhân với 255 (làm tròn về số nguyên gần nhất).
$$(R,G,B) = \big( (R_1+m)\cdot 255,\; (G_1+m)\cdot 255,\; (B_1+m)\cdot 255 \big)$$
$$\text{where}\quad \left\{ \begin{aligned} C &= (1 - |2L - 1|)\cdot S \\ X &= C\,(1 - |(H/60 \bmod 2) - 1|) \\ m &= L - \tfrac{C}{2} \\ S &= \frac{\text{Saturation }(\%)}{100},\quad L = \frac{\text{Lightness }(\%)}{100} \\ H &= \text{Hue }(^{\circ}) \end{aligned} \right.$$
Ví dụ minh họa
Với HSL(210°, 50%, 60%): \(S = 0{,}5\), \(L = 0{,}6\). $$C = (1 - |1{,}2 - 1|) \times 0{,}5 = (1 - 0{,}2) \times 0{,}5 = 0{,}4$$ \(H/60 = 3{,}5\), nên $$X = 0{,}4 \times (1 - |3{,}5 \bmod 2 - 1|) = 0{,}4 \times (1 - 0{,}5) = 0{,}2$$ \(m = 0{,}6 - 0{,}2 = 0{,}4\). Cung thứ 3 \((3 \le H/60 < 4)\) cho \((R',G',B') = (0, X, C) = (0;\, 0{,}2;\, 0{,}4)\). Cộng m: $$(0{,}4;\, 0{,}6;\, 0{,}8) \times 255 = (102, 153, 204)$$
Câu hỏi thường gặp
Vì sao các giá trị RGB của tôi bị làm tròn? Các kênh RGB là số nguyên từ 0 đến 255, nên giá trị sau khi nhân tỷ lệ sẽ được làm tròn về số nguyên gần nhất.
Độ bão hòa 0% sẽ cho màu gì? Màu hoàn toàn không bão hòa là một sắc xám, chỉ phụ thuộc vào độ sáng — cả ba kênh RGB đều bằng nhau.
Nếu tôi nhập sắc độ lớn hơn 360 thì sao? Có, sắc độ sẽ được lấy theo phép chia dư cho 360, nên 370° sẽ tương đương với 10°.
