Tông màu, độ bão hòa, độ sáng — vắn tắt
HSL mô tả một màu theo đúng cách người ta nói ngoài đời: màu gì, rực cỡ nào, sáng hay tối ra sao. Tông màu là số độ quanh một bánh xe màu — 0 là đỏ, 120 là xanh lá, 240 là xanh dương, và quay lại đỏ ở 360. Độ bão hòa là màu đó cách một màu xám trung tính bao xa ở cùng độ sáng, từ 0% (xám) đến 100% (rực rỡ hoàn toàn). Độ sáng chạy từ 0% (đen) qua 50% (bản thuần khiết của tông màu) đến 100% (trắng). Hex và RGB lưu cùng một thông tin dưới dạng ba cường độ kênh; HSL lưu nó dưới dạng ba ý niệm tách biệt, mỗi ý niệm chỉnh được độc lập. Chính sự tách biệt đó là lý do người ta đổi sang HSL: hex và RGB là thứ một color picker đưa cho bạn, còn HSL là thứ bạn cần khi việc cần làm chuyển từ "ghi lại màu này" sang "làm một phiên bản tối hơn của màu này" hoặc "chọn một màu cách 30 độ trên bánh xe so với màu này".
Đổi #ff6347 bằng tay
Hex sang HSL đi qua RGB trước. #ff6347 là rgb(255, 99, 71). Độ sáng là trung bình cộng của
kênh lớn nhất và nhỏ nhất: lớn nhất là 255, nhỏ nhất là 71, (255 + 71) / 2 là 163, tính theo tỷ
lệ của 255 là khoảng 64% — số l trong hsl(9, 100%, 64%). Độ bão hòa so sánh khoảng cách giữa
các kênh (184, từ 71 đến 255) với độ sáng đó gần trung tâm ra sao; ở đây hai con số này khớp nhau
vừa đủ, cho ra 100%. Tông màu nhìn vào kênh nào lớn nhất — ở đây là đỏ — rồi xem xanh lá cách xanh
dương bao xa so với khoảng cách đó, ra 9 độ, ngay sát đỏ thuần, nghiêng nhẹ về cam.
Vì sao nên dùng HSL thay vì hex
Lợi ích rõ nhất khi bạn cần chỉnh một màu chứ không chỉ lưu lại nó. Lấy hsl(9, 100%, 64%), màu đỏ
cam ở trên, rồi chỉ đổi độ sáng:
| Độ sáng | Ra hex | Trông như |
|---|---|---|
| 20% | #660f00 | Đỏ mận gần đen |
| 40% | #cc1f00 | Đỏ gạch đậm |
| 64% | #ff6347 | Màu gốc |
| 80% | #ffa899 | Hồng cam nhạt |
| 95% | #ffe9e5 | Trắng phớt hồng |
Mọi dòng đều cùng tông màu, cùng độ bão hòa — chỉ độ sáng đổi. Muốn ra năm sắc độ y hệt từ hex thì phải tính lại cả ba kênh năm lần riêng biệt, vì hex không có kênh nào tách riêng được ý niệm "sáng hơn" khỏi "một màu hoàn toàn khác".
Một ví dụ khác, và khi độ bão hòa về 0
#2ecc71, một màu xanh lá hay gặp trong giao diện, đổi ra hsl(145, 63%, 49%) — tông màu nằm ở
phần ba xanh lá của bánh xe, khá bão hòa, gần mức giữa nơi tông màu trông rực nhất. So với
#333333, đổi ra hsl(0, 0%, 20%): độ bão hòa là 0%, vì đỏ, xanh lá, xanh dương bằng nhau (đều
51), nên chẳng có màu nào để tông màu trỏ tới. Công cụ này báo 0 cho tông màu trong trường hợp đó
theo quy ước — số nào cũng được, vì ở 0% bão hòa thì kênh tông màu chẳng còn gì để ảnh hưởng nữa.