Mã màu hex là một loại mã màu HTML còn được gọi là màu thập lục phân hoặc chỉ “màu hex”. Bạn có thể đã sử dụng màu hex nếu bạn là nghệ sĩ kỹ thuật số sử dụng Adobe Creative Suite, chương trình 3D hoặc thiết kế UX. Nhưng ngay cả khi bạn sử dụng hex mỗi ngày, có khả năng là bạn không thực sự biết điều gì đang xảy ra với những chữ cái và con số đó. Hướng dẫn đọc mã màu hex này sẽ giúp bạn làm điều đó.
Mã hex là gì?
Mã màu hex là một loại mã màu HTML phổ biến. Chúng còn được gọi là mã màu thập lục phân hoặc đơn giản là “hex”. Hệ thập lục phân được sử dụng vì đây là cách thân thiện với con người hơn để hiển thị các giá trị trong mã nhị phân.
Mã màu hex bắt đầu bằng dấu thăng (#) và sau đó là sáu chữ cái và/hoặc số. Hai chữ cái/số đầu tiên tượng trưng cho màu đỏ, hai chữ cái tiếp theo tượng trưng cho màu xanh lục và hai chữ cái cuối cùng tượng trưng cho màu xanh dương. Các giá trị cho màu nằm trong khoảng từ 00 đến FF (thay vì từ 0 đến 255 trong RGB).
Khi giá trị nằm trong khoảng từ 1 đến 9, bạn sử dụng một số. Khi giá trị lớn hơn 9, các chữ cái được sử dụng. Ví dụ:
A=10
B=11
C=12
D=13
e=14
F=15
Thực hiện theo ba bước sau để có được màu thập lục phân:
- Thêm 16 vào số đầu tiên.
- Thêm 1 vào số thứ hai.
- Cộng hai số.
Cách chuyển đổi từ Hex sang RGB
Tìm hiểu cách hoạt động của màu RGB là một nơi tốt để bắt đầu trước khi chuyển sang đọc mã màu hex. Số RGB dựa trên cách đặt đèn đỏ, lục và lam trên màn hình của bạn. Bằng cách thay đổi các số RGB, bạn cho màn hình biết bạn muốn hiển thị bao nhiêu màu ánh sáng đó.
Hệ màu RGB hiển thị màu theo cách này:
RGB(255, 0, 0) (255, 0, 0)
Số đầu tiên trong RGB cho bạn biết một màu có bao nhiêu màu đỏ, lục hoặc lam (số thứ ba). Số 0 có nghĩa là không có màu nào cả và số 255 có nghĩa là có nhiều màu nhất có thể.
Vì vậy, trong ví dụ trên, bạn có được màu đỏ nhất có thể mà không có bất kỳ màu xanh lục hoặc xanh lam nào. Đối với màu xanh lục, bạn sẽ sử dụng RGB(255, 0, 0) và đối với màu xanh lam, RGB(255, 0, 0). (0, 0, 255). Để có được giao diện bạn muốn với các màu khác, bạn sẽ cần sử dụng kết hợp các giá trị màu.
Mã màu hex khác với mã màu RGB
Nếu bạn biết ý nghĩa của các số trong mã màu hex, bạn sẽ có thể đoán được màu mình sẽ thấy tốt hơn. Không có nhiều khác biệt giữa việc sử dụng màu thập lục phân hoặc màu RGB, ngoại trừ việc bạn có thể thêm giá trị alpha vào màu CSS, biến nó thành màu RGBA.
Điều này rất hữu ích nếu bạn muốn thay đổi độ trong suốt của một màu. Một trong những cách dễ nhất để thay đổi độ mờ là thêm giá trị alpha vào RGB của bạn.
Một số mã màu HEX thông dụng
- Red = #FF0000 = RGB(255, 0, 0)
- Green = #008000 = RGB(1, 128, 0)
- Blue = #0000FF = RGB(0, 0, 255)
- White = #FFFFFF = RGB(255,255,255)
- Ivory = #FFFFF0 = RGB(255, 255, 240)
- Black = #000000 = RGB(0, 0, 0)
- Gray = #808080 = RGB(128, 128, 128)
- Silver = #C0C0C0 = RGB(192, 192, 192)
- Yellow = #FFFF00 = RGB(255, 255, 0)
- Purple = #800080 = RGB(128, 0, 128)
- Orange = FFA500 = RGB(255, 165, 0)
- Maroon = #800000 = RGB(128, 0, 0)
- Fuchsia = #FF00FF = RGB(255, 0, 255)
- Lime = #00FF00 = RGB(0, 255, 0)
- Aqua = #00FFFF = RGB(0, 255, 255)
- Teal = #008080 = RGB(0, 128, 128)
- Olive = #808000 = RGB(128, 128, 0)
- Navy = #000080 = RGB(0, 0, 128)
Cách tra màu HEX nhanh
Các thiết bị kỹ thuật số của bạn có hàng triệu màu sắc bắt mắt. Yêu bất kỳ màu nào trong số đó nói riêng? Bạn muốn sử dụng chúng trong thiết kế của mình hoặc tạo chủ đề cho ứng dụng của mình? Trước tiên, bạn cần sử dụng tiện ích chọn màu có thể xác định mã màu trên màn hình.
Có rất nhiều công cụ eyedropper miễn phí mà bạn có thể cài đặt để sao chép mã màu của bất kỳ pixel nào trên màn hình chỉ bằng vài cú nhấp chuột. Công cụ mình hay dùng nhất chính là Google. Bạn hãy vào Google gõ vào từ khoá color picker. Công cụ sau đây sẽ hiển thị.
Trường hợp bạn muốn trích màu cụ thể từ một bức hình, hoặc vị trí nào đó trên màn hình, bạn hãy sử dụng ứng dụng Instant Eyedropper (Windows). Instant Eyedropper là một ứng dụng tìm giá trị hex chính xác của một màu trên màn hình. Sau đó, bạn sẽ thấy mã màu cho pixel ngay bên dưới vị trí con trỏ chuột của bạn. Buông nút chuột, và thế là xong! Mã hex cho màu đó hiện có trong khay nhớ tạm của bạn và bạn có thể dán mã vào bất cứ đâu bạn muốn.
PowerToys cũng có công cụ trích màu rất tiện mà bạn nên tận dụng.
Hy vọng bài viết này sẽ giúp ích cho bạn!
