Gần như ai làm việc trong ngành thiết kế đồ họa đều đã sử dụng mã màu Hex trong công việc của mình.
Màu Hex là cách thể hiện màu khác nhau thông qua các giá trị thập lục phân (cơ số 16) với định dạng #RRGGBB, trong đó RR là màu đỏ, GG là màu xanh lá cây và BB là màu xanh lam.
Mã màu HEX là gì?
Giải thích cơ bản nhất về định nghĩa mã màu HEX là nó đại diện cho lượng màu Đỏ (red), Xanh lục (green) và Xanh lam (blue) tồn tại trong mã màu đó.
Mã màu Hex là một dãy gồm 6 chữ số ở cơ số 16 (thập lục phân) có dạng #RRGGBB, trong đó:
- 2 chữ số đầu tiên RR cho chúng ta biết lượng màu đỏ được sử dụng
- 2 chữ số tiếp theo GG cho chúng ta biết lượng màu xanh lá cây được sử dụng
- 2 chữ số cuối cùng BB cho chúng ta biết lượng màu xanh lam được sử dụng trong hỗn hợp đó.
- Các số này nằm trong phạm vi từ 00 đến FF để chỉ định cường độ của màu.
Một ví dụ đơn giản #FF0000 là màu đỏ thuần, vì thành phần màu đỏ nằm ở giá trị tối đa của FF và các thành phần màu xanh lá cây và màu xanh lam ở mức thấp nhất là 00.
Hãy xem thêm ví dụ về mã màu Hex #000000. Đây là mã HEX hiển thị màu đen. Như bạn thấy, trong màu này thì màu đỏ, xanh lá và xanh lam đều có giá trị bằng 00 nên sẽ hiển thị màu đen.
Cơ số 16 là gì?
Mã màu HEX sử dụng hệ thống chữ số thập lục phân (HEXA, Base-16) thay vì hệ thập phân như các con số chúng ta thường dùng hàng ngày.
Hệ thập lục phân tên tiếng anh là Hexadecimal, hay còn gọi là hệ 16, là một hệ đếm có 16 kí số 0 đến 9 và A đến F (không phân biệt chữ hoa và chữ thường)
Trong hệ thập phân, chúng ta đếm từ 0 đến 9, nếu tăng lên 1 đơn vị nữa thì sẽ tăng hàng phía trên (hàng chục) thêm 1 đơn vị, tức là thành 10, rồi 11, 12… Trong hệ cơ số 16, chúng ta đếm từ 0 đến 9, rồi tiếp theo là từ A đến F. Nếu tiếp tục tăng lên 1 đơn vị thì sẽ là 10, 11, 12 đến 1A, 1B, 1C, 1D, 1E, 1F rồi lại 20, 21, 22 cho đến 2F…
phân (4 = 0100, F = 1111).
| Hệ thập lục phân | Hệ thập phân | |
| 0hex | = | 0dec |
| 1hex | = | 1dec |
| 2hex | = | 2dec |
| 3hex | = | 3dec |
| 4hex | = | 4dec |
| 5hex | = | 5dec |
| 6hex | = | 6dec |
| 7hex | = | 7dec |
| 8hex | = | 8dec |
| 9hex | = | 9dec |
| Ahex | = | 10dec |
| Bhex | = | 11dec |
| Chex | = | 12dec |
| Dhex | = | 13dec |
| Ehex | = | 14dec |
| Fhex | = | 15dec |
Cách chuyển từ hệ Base-16 sang hệ Base-10 (thập phân)
- Lấy số thập phân tương đương của chữ số thập lục phân từ bảng trên.
- Nhân mỗi chữ số với lũy thừa 16 (số mũ tương đương với vị trí của chữ số, chữ số ngoài cùng bên phải tương đương với vị trí 0). Ví dụ trong 7DE, vị trí E là 0, vị trí D là 1 và vị trí 7 là 2.
- Tính tổng của tất cả các tích trên.
Ví dụ, 7DE là một số thập lục phân thì có giá trị trong hệ thập phân là
7DE = (7 * 162) + (13 * 161) + (14 * 160) = 1792 + 208 + 14 = 2014
Sử dụng hệ thống chữ số Base-16 cho phép bất kỳ số nào từ 0-255 được hiển thị chỉ bằng hai chữ số nên mỗi giá trị Đỏ, Xanh lục và Xanh lam chỉ cần 2 chữ số là đủ để biểu diễn trong mã HEX. Nếu sử dụng hệ thập phân thì sẽ cần đến 3 chữ số cho mỗi màu, mà lại không sử dụng hết, vì chỉ cần từ 000 đến 255 thay vì 999 → sẽ gây lãng phí bộ nhớ → sử dụng hệ cơ số 16 sẽ tiết kiệm bộ nhớ hơn.
Quay trở lại mã HEX, chúng ta đã biết rằng số 0 có nghĩa là không có màu nào cả và chúng ta biết giá trị tối đa 255 có nghĩa là đầy đủ màu sắc
Vì vậy giá trị ở gam màu Đỏ, Xanh lục hoặc Xanh lam càng cao thì màu đó càng đậm
Màu đỏ được hiển thị là # FF0000 – Hay nói cách khác là 255 Đỏ, 0 Xanh lục và 0 Xanh lam.
Màu xanh lá là # 00FF00 – Hay nói cách khác là 0 Đỏ, 255 Xanh lục và 0 Xanh lam.
Màu xanh lam được hiển thị là # 0000FF – Nói cách khác, 0 Đỏ, 0 Xanh lục và 255 Xanh lam.
Cách đọc màu HEX
Để có thể đọc hiểu mã màu HEX đúng cách, bạn cần có kiến thức tốt về màu RGB kết hợp và pha trộn.
Một lưu ý quan trọng khi về màu RGB là sự pha trộn màu là Additive – có nghĩa là chúng ta có thể tạo ra màu trắng bằng cách kết hợp cả ba giá trị RGB vì RGB về cơ bản tạo ra từ ánh sáng và màu sắc.
Với kiến thức này, giờ chúng ta biết rằng việc trộn các màu trong HEX không chỉ làm tăng cường độ màu của chúng với các giá trị RGB cao hơn mà còn tăng cả cường độ ánh sáng — các giá trị lớn khi được pha trộn sẽ khiến màu sáng hơn và các giá trị nhỏ hơn sẽ khiến màu tối hơn !
Mã #000000 đại diện cho màu đen còn #FFFFFF có nghĩa là hỗn hợp màu Đỏ, Xanh lá cây và Xanh da trời trộn lại với cường độ cao nhất và đó chính là màu trắng.
Các con số trong mã màu HEX càng gần giá trị FF, màu càng sáng và càng bão hòa; nếu con số càng gần 00, màu càng tối và càng ít rực rỡ hơn.
Tuy nhiên, chúng tôi khuyên bạn khi thiết kế nên sử dụng mã màu HSL thì sẽ thuân tiện hơn khá nhiều, mã màu HEX chỉ thuận tiện trong việc chia sẻ, viết mã CSS.
