Bắt đầu từ RGB thay vì hex
RGB thường là nơi một màu xuất hiện trong code — một API canvas, thanh trượt kênh của color picker, dữ liệu pixel của một ảnh — nên đổi thẳng RGB sang HSL, không qua chuỗi hex ở giữa, là đường đi phổ biến hơn trong thực tế. Phép tính vẫn y hệt, chỉ định dạng đầu vào là khác.
Tính tay với rgb(142, 68, 173)
Lấy ba kênh: 142 (đỏ), 68 (xanh lá), 173 (xanh dương). Lớn nhất là xanh dương với 173, nhỏ nhất là
xanh lá với 68. Độ sáng là trung bình cộng: (173 + 68) / 2 = 120,5, tính theo tỷ lệ của 255 là
khoảng 47% — số l trong hsl(282, 44%, 47%).
Độ bão hòa so sánh khoảng cách giữa kênh lớn nhất và nhỏ nhất (173 − 68 = 105) với việc độ sáng
đó cách giữa dải màu bao xa; tính ra khoảng 44%, một màu bão hòa vừa phải chứ không rực. Tông màu
nhìn vào xanh dương là kênh lớn nhất, rồi xem đỏ và xanh lá nằm ở đâu so với khoảng cách 105 đó, ra
282 độ — nằm hẳn trong vùng tím, giữa xanh dương (240°) và hồng cánh sen (300°).
Một ví dụ tối: rgb(0, 31, 63)
Các kênh đều nhỏ không cần xử lý riêng — vẫn theo đúng các bước trên. Kênh lớn nhất là xanh dương
(63), nhỏ nhất là đỏ (0), nên độ sáng là (63 + 0) / 2 = 31,5, khoảng 12% của 255. Độ sáng thấp đó
là lý do màu đọc như một xanh navy gần đen chứ không phải xanh dương trung bình, dù độ bão hòa vẫn
ra đúng 100% — bão hòa hoàn toàn chỉ có nghĩa là không pha xám, chứ không nói gì về việc màu đó
sáng hay tối.
Khi hai kênh cùng bằng nhau ở mức cao nhất
rgb(0, 200, 200) có xanh lá và xanh dương cùng bằng 200, cả hai đều cao hơn đỏ ở 0, đặt màu đó
đúng ngay ranh giới giữa phần ba xanh lá và xanh dương của bánh xe: hsl(180, 100%, 39%), một màu
lục lam. rgb(200, 0, 200), đỏ và xanh dương cùng bằng nhau và cao hơn xanh lá, ra
hsl(300, 100%, 39%), một màu hồng cánh sen. Không trường hợp nào cần xử lý đặc biệt — cùng quy
tắc "kênh lớn nhất" chọn ra 180 và 300 mà không cần lấy trung bình, vì một cặp bằng nhau ở mức cao
nhất vẫn để lại một kênh rõ ràng ở mức thấp nhất, đủ để công thức xác định tông màu chính xác.
Chỉnh một màu: RGB so với HSL
| Việc cần làm | Bằng RGB | Bằng HSL |
|---|---|---|
| Làm sáng hơn 20% | Tính lại cả ba kênh tiến về 255 | Cộng thêm khoảng 20 vào số l |
| Làm bớt rực | Trộn cả ba kênh về giá trị trung bình | Giảm số s |
| Chọn một màu liên quan | Không có cách trực tiếp | Cộng hoặc trừ độ vào h |
| Lưu chính xác | Ba số nguyên, 0–255 mỗi số | Ba số trên ba thang khác nhau |
RGB gọn và chính xác, đó là lý do các định dạng file và header lưu màu theo cách đó. HSL đánh đổi
một phần sự gọn gàng để lấy các kênh khớp thẳng với những câu hỏi người ta thật sự hỏi về một màu —
sáng cỡ nào, rực cỡ nào, tông gì — và đó cũng là lý do phần lớn hệ thống thiết kế xuất biến số theo
đúng dạng này: một token như --brand-l: 47% chỉnh được riêng lẻ mà không ai phải tính lại đỏ,
xanh lá, xanh dương bằng tay.