HSL là cách thân thiện để chọn màu, còn RGB là thứ màn hình, API canvas và mã ảnh thực sự tiêu thụ. Bộ chuyển này biến bất kỳ bộ H, S, L nào thành các kênh chính xác 0–255.
Cách chuyển HSL sang RGB hoạt động
- Chuyển S và L thành phân số và tính chroma C = (1 − |2L − 1|) × S.
- Chia hue cho 60 để tìm đoạn trên bánh xe màu và tính giá trị trung gian X = C × (1 − |(H/60 mod 2) − 1|).
- Gán C, X và 0 vào các vị trí R, G và B theo đoạn đó.
- Thêm bù sáng L − C/2 cho cả ba kênh và nhân với 255.
Ví dụ minh hoạ
Kết quả chính xác cho tới khi làm tròn cuối cùng về các kênh nguyên. Các giá trị sắc độ hoặc độ bão hòa lẻ cũng được hỗ trợ và sẽ được làm tròn tới bộ RGB gần nhất.
HSL và RGB giải thích
HSL là gì?
HSL tách màu thành hue (0–360° trên vòng màu), saturation (mức độ màu, 0–100%) và lightness (độ sáng, 0–100%). Vì từng phần khớp với cách người ta mô tả màu, HSL là định dạng dễ nhất để tạo tints, shades và palette nhất quán — bằng tay hoặc trong code.
- Cú pháp:
- hsl(H, S%, L%)
- Phạm vi:
- 0–360°, 0–100%, 0–100%
- Phù hợp cho:
- palette, tints và shades, theming
RGB là gì?
RGB mô tả màu bằng ba kênh ánh sáng — đỏ, xanh lá và xanh dương — mỗi kênh từ 0 đến 255. Nó phản ánh cách màn hình hoạt động: cả ba cùng 255 cho màu trắng, cả ba 0 cho màu đen. RGB là lựa chọn đúng khi bạn cần tính toán với màu, và rgba() bổ sung độ trong suốt.
- Cú pháp:
- rgb(R, G, B)
- Phạm vi:
- 0–255 mỗi kênh
- Phù hợp cho:
- code, canvas, độ trong suốt với rgba()
Bảng tham chiếu HSL sang RGB
Các màu CSS phổ biến nhất, đã chuyển từ HSL sang RGB.
| Màu | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |