Mã màu Hex là gì ? Cách đọc mã màu hex (color Hex code) ?

Học thiết kế đồ họa

Th5 29
Mã màu Hex là gì ? Cách đọc mã màu hex (color Hex code) ?

Gần như ai làm việc trong ngành thiết kế đồ họa hay đang tìm hiểu lĩnh vực này, đã sử dụng mã màu Hex trong công việc của mình.

Mọi người sử dụng mã màu HEX để xác định màu kỹ thuật số trên các trang web và ứng dụng,

Nhưng bạn có thực sự hiểu về những con số và chữ cái trông ngẫu nhiên trong mã màu Hex, chúng có ý nghĩa gì ?

Trong bài viết này, hãy cùng chúng mình tìm hiểu mã màu Hex là gì ? Cũng như ý nghĩa của những con số hay chữ cái trong mã màu thông dụng này !

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 khối lượng màu Đỏ, Xanh lục và Xanh lam tồn tại trong mã màu đó

Mã Hex là một dãy gồm 6 chữ số.

  • 2 chữ số đầu tiên cho chúng ta biết lượng màu đỏ được sử dụng
  • 2 chữ số tiếp theo 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 cho chúng ta biết lượng màu xanh lam được sử dụng trong hỗn hợp đó.

Chúng ta hãy xem xét ví dụ về mã màu Hex # 000000 . Đây là mã HEX hiển thị màu đen.

Như bạn thấy, chúng ta đều không có lượng màu đỏ, xanh lá hay xanh được sử dụng trong mã màu trên, vì vậy, mã màu trên chính là màu đen

Khá dễ hiểu, đúng không ? Chúng ta hãy đi tiếp ở phần sau :

Base 16

Điều quan trọng cần lưu ý là mã màu HEX sử dụng hệ thống chữ số Base-16.

Vì vậy, thay vì đếm từ 0 đến 10 như thường lệ, các giá trị Base-16 hiển thị từ 0 đến 16.

Trong hệ thống này, 0-9 là số, còn các chữ cái A, B, C, D, E và F được sử dụng cho các giá trị từ 10 đến 15 , trong đó

  • A = 10
  • B = 11
  • C = 12
  • D = 13
  • E = 14
  • F = 15

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ố (Điều này quan trọng vì mỗi giá trị Đỏ, Xanh lục và Xanh lam chỉ có 2 chữ số trong mã HEX)

Có một số hướng dẫn quan trọng cần nhớ khi hiển thị các số 0-255 chỉ bằng hai chữ số:

  • Bạn luôn cần nhân số đầu tiên với 16.
  • Bạn nhân số thứ hai với 1.
  • Cộng các tổng này lại với nhau để có được giá trị cuối cùng

Sử dụng quy tắc trên, chúng ta thấy rằng giá trị cao nhất bằng hai chữ số sẽ là “FF” hoặc 255.

Vì sao ?  Chúng ta nhân F đầu tiên (hoặc số 15) với 16, sau đó nhân F thứ hai (hoặc số 15) bằng 1 rồi cộng hai giá trị này lại với nhau: (15 x 16) + (15 x 1) = 255.

0 đến 255

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

  1. 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.
  2. Màu xanh lá là # 00FF00 – Hay nói cách khác là 0 Đỏ, 255 Xanh lục và 0 Xanh lam.
  3. 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.

 

 

Ở phần tiếp theo, chúng ta bắt đầu xem xét một số mã HEX khó hơn để đọc và hiểu những mã đó !

Màu RGB và hỗn hợp trộn

Để 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.

Đơn giản chỉ cần đọc các giá trị là một kỹ năng toán học cơ bản, nhưng để có thể thực sự hình dung những màu này trông như thế nào từ mã HEX sẽ cần bạn hiểu rõ hơn về lý thuyết màu và mô hình màu RGB.

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.

Điều này là không thể xảy ra với các mô hình màu khác như CMY, vì các mô hình này thường có tính chất trừ, có nghĩa là pha trộn các màu cơ bản thường ra màu tối hơn !

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 !

Ở phần trước, chúng ta đã biết mã # 000000 đại diện cho màu đen.

Chúng ta dễ dàng thấy rằng #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 tinh khiết !

Hãy cùng xem xét một số hỗn hợp khác.

Nếu chúng ta lấy giá trị Xanh lam mạnh và trộn chúng với các giá trị Đỏ mạnh, chúng ta nhận được # FF00FF (Màu cánh sen)

Nếu chúng ta muốn chuyển mã màu cánh sen này thành một màu tím đậm hơn, chúng ta cần giảm các giá trị Đỏ và Xanh lam từ giá trị mạnh nhất là 225, xuống một giá trị 112 hoặc 7A (7 × 16) + (10 × 1) trong hệ số Base-16.

Thế là chúng ta có mã màu #7A007A.

Trong trường hợp này, giá trị xanh lá cây vẫn được phản ánh là 00, nhưng khi chúng ta gia giảm cường độ màu Đỏ và Xanh lam, chúng ta nhận được màu tím đậm hơn màu cánh sen ban đầu

Kết luận

Tóm lại, chúng ta cần nhớ rằng mã màu HEX được tạo thành từ 2 giá trị tượng trưng cho màu Đỏ, 2 giá trị tượng trưng cho màu Xanh lục và 2 giá trị tượng trưng cho màu Xanh lam.

Chúng ta sử dụng Base-16 để xác định các giá trị đó, từ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A (10), B (11), C (12), D (13) , E (14), F (15).

Chúng ta luôn nhân số đầu tiên của mỗi cặp với 16, sau đó cộng hai số với nhau để có giá trị R, G hoặc B

Con số đó càng gần 255, màu càng sáng và càng bão hòa.

Nếu con số càng gần 0, màu càng tối và càng ít rực rỡ hơn.

Đôi nét về MnT Design

MnT Design là nơi cung cấp dịch vụ thiết kế đồ họa chuyên nghiệp nhất. Tinh tế - bắt mắt - thẩm mỹ là phương châm của chúng tôi. Sản phẩm tại MnT Design luôn có độ hoàn thiện cao và mức giá cạnh tranh nhất trên thị trường.