HEX, RGB, HSL: Hiểu mã màu web
Bạn đang chỉnh sửa website và thấy #FF5733 trong CSS. Hoặc bạn làm việc với designer gửi rgb(255, 87, 51). Hoặc công cụ thiết kế hiển thị màu là hsl(11, 100%, 60%). Tất cả đều mô tả cùng một màu, cam đỏ rực rỡ, nhưng ở ba định dạng khác nhau.
Nếu bạn từng bối rối với mã màu web, hướng dẫn này sẽ làm rõ mọi thứ trong năm phút.
Cách màu kỹ thuật số hoạt động
Mỗi màu trên màn hình được tạo bằng cách pha ba màu cơ bản của ánh sáng: Đỏ, Xanh lục và Xanh lam. Đây là mô hình màu RGB. Bằng cách thay đổi cường độ mỗi kênh từ không (tắt) đến tối đa (sáng nhất), bạn có thể tạo bất kỳ màu nào trong khoảng 16,7 triệu màu mà màn hình chuẩn hiển thị được.
- Đỏ 255, Xanh lục 0, Xanh lam 0 = đỏ thuần
- Đỏ 0, Xanh lục 255, Xanh lam 0 = xanh lục thuần
- Đỏ 0, Xanh lục 0, Xanh lam 255 = xanh lam thuần
- Đỏ 255, Xanh lục 255, Xanh lam 255 = trắng (tất cả kênh đầy)
- Đỏ 0, Xanh lục 0, Xanh lam 0 = đen (tất cả kênh tắt)
- Đỏ 255, Xanh lục 255, Xanh lam 0 = vàng (đỏ + xanh lục)
Mọi định dạng màu trên web chỉ đơn giản là cách khác nhau để biểu diễn các giá trị kênh này.
Bạn có biết? Con số 16,7 triệu màu đến từ 256 mức mỗi kênh (0-255) qua ba kênh: 256 x 256 x 256 = 16.777.216 màu có thể.
Màu HEX
Trông như thế nào
#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF
Cách hoạt động
Mã màu HEX là chuỗi sáu ký tự đứng trước dấu thăng. Sáu ký tự chia thành ba cặp, mỗi cặp đại diện kênh màu trong hệ thập lục phân (cơ số 16):
| Cặp | Kênh | Phạm vi |
|---|---|---|
| Hai ký tự đầu | Đỏ | 00 đến FF |
| Hai ký tự giữa | Xanh lục | 00 đến FF |
| Hai ký tự cuối | Xanh lam | 00 đến FF |
Hệ thập lục phân dùng chữ số 0-9 và chữ cái A-F, trong đó A=10, B=11, C=12, D=13, E=14, F=15. Vậy FF thập lục phân bằng 255 thập phân (15 x 16 + 15 = 255).
Phân tích #FF5733:
- FF = Đỏ ở 255 (tối đa)
- 57 = Xanh lục ở 87
- 33 = Xanh lam ở 51
Tạo ra cam đỏ rực rỡ.
Viết tắt
Khi mỗi cặp có hai ký tự giống nhau, bạn có thể dùng viết tắt ba ký tự:
#FF0000viết tắt thành#F00#3366FFviết tắt thành#36F#000000viết tắt thành#000
Mẹo Mã HEX là định dạng được sử dụng rộng rãi nhất trong phát triển web. Nếu chỉ học một định dạng, hãy học cái này.
Màu RGB
Trông như thế nào
rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)
Cách hoạt động
Ký hiệu RGB trực tiếp nêu giá trị kênh đỏ, xanh lục và xanh lam dạng số thập phân từ 0 đến 255. Đây là định dạng trực quan nhất vì số tương ứng trực tiếp với cường độ mỗi kênh ánh sáng.
RGBA: Thêm trong suốt
RGBA thêm giá trị thứ tư cho độ mờ (alpha), từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn đặc):
rgba(255, 87, 51, 0.5) /* 50% trong suốt */
rgba(0, 0, 0, 0.8) /* 80% đặc, đen */
Màu HSL
Trông như thế nào
hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
Cách hoạt động
HSL viết tắt của Hue (Sắc), Saturation (Độ bão hòa), Lightness (Độ sáng). Thay vì nghĩ theo pha kênh đỏ/xanh lục/xanh lam, HSL mô tả màu theo cách con người nghĩ tự nhiên.
Hue là chính màu đó, biểu diễn bằng độ trên vòng tròn màu (0-360):
- 0°/360° = Đỏ, 60° = Vàng, 120° = Xanh lục, 180° = Lục lam, 240° = Xanh lam, 300° = Hồng tím
Saturation là độ rực rỡ, từ 0% (xám) đến 100% (bão hòa hoàn toàn).
Lightness là độ sáng tối, từ 0% (đen) đến 100% (trắng). 50% là độ sáng "bình thường."
Bạn có biết? HSL được coi là định dạng thân thiện nhất với designer vì ánh xạ cách chúng ta mô tả màu tự nhiên. "Làm sáng hơn một chút" nghĩa là tăng giá trị L. "Bớt rực" nghĩa là giảm giá trị S. Với HEX hoặc RGB, các điều chỉnh này đòi hỏi thay đổi nhiều giá trị cùng lúc.
Khi nào dùng định dạng nào
| Định dạng | Tốt nhất cho | Ưu điểm |
|---|---|---|
| HEX | Stylesheet CSS, đặc tả thiết kế | Gọn, phổ biến |
| RGB | Thao tác màu lập trình | Giá trị kênh trực quan |
| HSL | Thiết kế, tạo bảng màu | Khớp nhận thức màu con người |
Chuyển đổi giữa các định dạng
Bạn sẽ thường xuyên cần chuyển đổi giữa các định dạng. Designer gửi giá trị HSL nhưng codebase dùng HEX. Brand guide chỉ định RGB nhưng bạn cần HSL để tạo biến thể.
Phép toán đơn giản nhưng nhàm chán khi làm thủ công. Công cụ chuyển đổi xử lý ngay lập tức.
Mẹo Chuyển đổi giữa HEX, RGB, HSL và nhiều hơn: Cách chuyển đổi mã màu. Nhập bất kỳ màu nào ở bất kỳ định dạng nào và nhận tất cả định dạng khác ngay lập tức.
Bắt đầu làm việc với màu sắc:
Tất cả công cụ đều miễn phí và hoạt động trực tiếp trong trình duyệt.