RGB nói với màn hình lượng ánh sáng phải phát; HSL cho bạn biết màu trông thế nào. Chuyển ba kênh thành hue, saturation và lightness giúp dễ điều chỉnh màu bằng tay.
Cách chuyển RGB sang HSL hoạt động
- Chia R, G và B cho 255 để mỗi giá trị nằm trong khoảng 0 đến 1.
- Lấy giá trị lớn nhất và nhỏ nhất trong ba giá trị — trung bình của chúng là độ sáng L.
- Nếu giá trị lớn nhất và nhỏ nhất bằng nhau, màu là xám: hue và saturation đều là 0.
- Ngược lại, suy ra S từ độ chênh giữa lớn nhất và nhỏ nhất, và đọc H từ kênh đang có giá trị lớn nhất.
Ví dụ minh hoạ
Về nguyên tắc là chính xác. Vì H, S và L thường được hiển thị dưới dạng số nguyên đã làm tròn, việc chuyển ngược có thể dịch một kênh đi một hai bước.
RGB và HSL giải thích
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()
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
Bảng tham chiếu RGB sang HSL
Các màu CSS phổ biến nhất, đã chuyển từ RGB sang HSL.
| Màu | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |