Trong CSS, cùng một màu có thể được viết bằng ít nhất ba cách khác nhau, và mỗi cách tiện lợi cho một công việc khác nhau — từ thiết kế đến hoạt ảnh độ trong suốt.
HEX: ký hiệu gọn để sao chép dán
Ký hiệu thập lục phân như #FF5733 mã hóa ba kênh — đỏ, lục, lam — mỗi kênh hai ký tự. Đây là định dạng gọn nhất, tiện để sao chép từ bản thiết kế, nhưng gần như không thể đọc được với con người: khó mà biết ngay một chuỗi chữ số đại diện cho sắc độ nào.
RGB: truy cập trực tiếp từng kênh
rgb(255, 87, 51) viết cùng ba kênh đó dưới dạng số thập phân từ 0 đến 255. Điều này hữu ích khi cần thay đổi một kênh cụ thể bằng mã, ví dụ tăng dần màu đỏ trong một hoạt ảnh JavaScript.
HSL: chọn sắc độ trực quan
HSL mô tả một màu qua sắc độ (hue, 0–360°), độ bão hòa và độ sáng. Đây là định dạng tiện nhất để chọn màu bằng tay: để có phiên bản tối hơn của cùng sắc độ, chỉ cần giảm độ sáng, không cần tính lại cả ba kênh RGB từ đầu.
Kênh alpha cho độ trong suốt
Các định dạng rgba() và hsla() thêm tham số thứ tư — độ mờ đục từ 0 đến 1. CSS hiện đại cũng cho phép đặt độ trong suốt trong HEX bằng hai ký tự thêm ở cuối, ví dụ #FF573380.
Vì sao cần điều này
- Nhanh chóng chuyển đổi một màu từ bản thiết kế sang định dạng CSS cần dùng.
- Chọn phiên bản tối hơn hoặc sáng hơn của cùng một màu bằng HSL.
- Thêm độ trong suốt vào một màu mà không thay đổi sắc độ gốc của nó.
Vì sao "xanh" trong tiếng Việt không tách bạch như HSL
Thanh trượt hue trong công cụ này chia màu xanh lục và xanh lam thành hai vùng rõ rệt trên vòng tròn 360° — xanh lục quanh 120°, xanh lam quanh 240°. Nhưng tiếng Việt dùng chung một từ gốc "xanh" cho cả hai, và phải ghép thêm từ để phân biệt: "xanh lá" (xanh của lá cây) cho vùng xanh lục, "xanh dương" hay "xanh nước biển" cho vùng xanh lam. Đây là hiện tượng ngôn ngữ học gọi là "grue" — một từ vựng gộp chung hai phạm trù màu mà nhiều ngôn ngữ châu Âu tách riêng — và tiếng Việt chia sẻ đặc điểm này với một số ngôn ngữ Đông Á và Đông Nam Á khác. Vì vậy khi dịch một bảng màu HSL sang tiếng Việt, việc chỉ nói "xanh" mà không rõ lá hay dương thường gây hiểu nhầm về đúng sắc độ đang được nhắc đến.