Mã hex thật ra mã hóa điều gì
Một mã hex sáu chữ số là ba byte viết liền nhau, mỗi byte một kênh, theo thứ tự đỏ, xanh lá, xanh
dương. Mỗi byte được viết bằng hai chữ số hệ 16 thay vì số hệ 10, vì hai chữ số hex khớp đúng với
một byte: khoảng 00–ff phủ trọn 0–255, không thừa không thiếu. RGB chính là ba con số đó viết
lại bằng hệ 10 — nên chuyển hex sang RGB không hẳn là một phép "biến đổi màu", mà chỉ là đổi hệ
đếm, từng cặp chữ số một.
Đọc từng cặp bằng tay
Lấy #ff6347 làm ví dụ. Tách thành ff, 63 và 47. Mỗi chữ số hex có giá trị theo lũy thừa của
16, nên một cặp đọc theo công thức (chữ số đầu × 16) + chữ số sau. Với ff là (15 × 16) + 15 = 255. Với 63 là (6 × 16) + 3 = 99, và 47 là (4 × 16) + 7 = 71. Ghép ba số lại được
rgb(255, 99, 71) — một màu đỏ cam ấm.
Làm y hệt với #1e90ff: 1e = 30, 90 = 144, ff = 255, ra rgb(30, 144, 255), một màu xanh
dương đậm. Để ý quy luật: ff luôn là 255 và 00 luôn là 0, vì f là chữ số hex lớn nhất (15) và
hai chữ số đó ghép lại là giá trị tối đa của một byte.
Viết tắt và kênh alpha
CSS cho phép viết tắt 3 chữ số khi mỗi cặp có hai chữ số trùng nhau. #333 giải ra #333333,
tức rgb(51, 51, 51) — một màu xám trung tính khá tối. #08f giải ra #0088ff, tức
rgb(0, 136, 255). Quy tắc này máy móc: mỗi chữ số được lặp lại đúng hai lần, nên #08f chỉ có
thể là một màu cụ thể duy nhất, không phải một phiên bản gần đúng.
Mã hex 8 ký tự thêm một cặp thứ tư cho alpha. #ff634780 là màu đỏ cam ở trên cộng thêm 80 —
80 trong hex là 128 trong hệ 10, mà 128 trên 255 là hơn một nửa một chút, nên trình duyệt hiển
thị ở độ đục xấp xỉ 50%: rgba(255, 99, 71, 0.5). Mã hex 6 ký tự thường không mang cặp alpha nào
và luôn được xem là đục hoàn toàn.
Hex, RGB và HSL đặt cạnh nhau
Cả ba đều mô tả cùng một không gian màu, chỉ khác ở chỗ mỗi cái làm nổi bật thông tin gì.
| Định dạng | Trông như | Dễ đọc nhất ở |
|---|---|---|
| Hex | #ff6347 | Chuỗi ngắn để dán vào CSS hay công cụ thiết kế |
| RGB | rgb(255, 99, 71) | Cường độ từng kênh, 0–255 mỗi kênh |
| HSL | hsl(9, 100%, 64%) | Tông màu, và độ sáng hay độ bão hòa |
Khi nào bạn thật sự cần RGB
Hex là thứ bạn dán vào CSS; RGB là thứ code thường cần để tính toán. Một API canvas, một uniform trong shader, hay một hàm trộn màu thường nhận vào ba con số chứ không phải một chuỗi sáu ký tự, nên chuyển đổi là bước đầu tiên trước khi màu có thể dùng được trong chương trình chứ không chỉ trong stylesheet. Các công cụ thiết kế cũng hay hiển thị RGB trong bảng thuộc tính dù màu được chọn bằng hex, nên phép chuyển này là thứ bạn sẽ làm theo cả hai chiều liên tục một khi làm việc xuyên suốt giữa CSS và code.