RGB cho bạn ba kênh thập phân từ 0 đến 255. Chuyển sang HEX biến mỗi kênh thành một số thập lục phân hai chữ số, vậy cả màu gói gọn trong một token ngắn mà mọi trình duyệt, công cụ thiết kế và style guide đều hiểu.
Cách chuyển RGB sang HEX hoạt động
- Lấy kênh đỏ và chia cho 16: thương là chữ số đầu, phần dư là chữ số thứ hai.
- Viết các giá trị 10 đến 15 thành chữ cái A đến F — 255 sẽ thành FF.
- Lặp lại cho xanh lá và xanh dương, thêm số 0 bên trước nếu chỉ có một chữ số: 5 sẽ thành 05.
- Ghép ba cặp lại và đặt một dấu # ở đằng trước.
Ví dụ minh hoạ
Chính xác, miễn là các kênh là số nguyên từ 0 đến 255. Các giá trị phân số như rgb(79.5, 70, 229) sẽ được làm tròn về số nguyên gần nhất trước vì HEX không thể lưu giá trị ở giữa.
RGB và HEX giải thích
RGB là gì?
RGB mô tả màu bằng ba kênh ánh sáng — đỏ, xanh lá và xanh dương — mỗi kênh từ 0 đến 255. Nó phản ánh cách màn hình hoạt động: cả ba cùng 255 cho màu trắng, cả ba 0 cho màu đen. RGB là lựa chọn đúng khi bạn cần tính toán với màu, và rgba() bổ sung độ trong suốt.
- Cú pháp:
- rgb(R, G, B)
- Phạm vi:
- 0–255 mỗi kênh
- Phù hợp cho:
- code, canvas, độ trong suốt với rgba()
HEX là gì?
Mã HEX là một số thập lục phân sáu chữ số lưu trữ kênh đỏ, xanh lá và xanh dương của một màu sau dấu # đứng trước. Mỗi cặp ký tự tương ứng một kênh, từ 00 (không) đến FF (đầy), cho cùng ~16.7 triệu màu như RGB nhưng ngắn gọn hơn. HEX là mặc định trong CSS, công cụ thiết kế và hướng dẫn thương hiệu.
- Cú pháp:
- #RRGGBB
- Phạm vi:
- 00–FF mỗi kênh
- Phù hợp cho:
- CSS, bàn giao thiết kế, hướng dẫn thương hiệu
Bảng tham chiếu RGB sang HEX
Các màu CSS phổ biến nhất, đã chuyển từ RGB sang HEX.
| Màu | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |