Công Cụ Chuyển Đổi Màu HEX Sang RGB

Mã Màu HEX Là Gì?

Mã màu HEX là chuỗi ký tự gồm sáu chữ số và chữ cái dùng trong thiết kế web và đồ họa kỹ thuật số để biểu diễn một màu cụ thể. Định dạng theo mẫu #RRGGBB, trong đó mỗi cặp hai ký tự mã hóa cường độ của một trong ba màu cơ bản — đỏ (RR), xanh lá (GG) và xanh dương (BB) — sử dụng hệ thập lục phân (cơ số 16). Mỗi cặp dao động từ 00 (cường độ không) đến FF (cường độ tối đa, tương đương 255 trong thập phân).

Mã HEX xuất phát từ nhu cầu xác định màu sắc trong HTML và CSS. Mặc dù CSS hiện đại hỗ trợ nhiều định dạng màu như rgb(), hsl() và oklch(), HEX vẫn là ký hiệu được dùng phổ biến nhất trong phát triển front-end, bàn giao thiết kế và hướng dẫn thương hiệu. Hầu hết các công cụ chọn màu trong Figma, Sketch, Adobe Photoshop và Canva đều hiển thị giá trị HEX theo mặc định.

Tổng số màu duy nhất có thể biểu diễn bằng mã HEX sáu chữ số là 16.777.216 (256 × 256 × 256). Điều này thường được gọi là "Màu thực" hay "màu 24-bit", phù hợp với độ sâu màu của hầu hết các màn hình hiện đại.

Mã HEX không phân biệt chữ hoa/thường, vì vậy #ff8000 và #FF8000 là cùng một màu.

Cách Chuyển HEX Sang RGB Từng Bước

Chuyển đổi mã màu HEX sang RGB khá đơn giản. Quá trình bao gồm việc chia chuỗi sáu ký tự thành ba cặp và chuyển mỗi cặp từ hệ thập lục phân (cơ số 16) sang thập phân (cơ số 10):

1. Bỏ dấu thăng. Nếu mã HEX bắt đầu bằng #, hãy bỏ nó. Ví dụ: #1A2B3C trở thành 1A2B3C.
2. Chia thành ba cặp. Chia chuỗi thành ba nhóm hai ký tự: 1A, 2B, 3C.
3. Chuyển mỗi cặp sang thập phân:
   • Đỏ: 1A → (1 × 16) + 10 = 26
   • Xanh lá: 2B → (2 × 16) + 11 = 43
   • Xanh dương: 3C → (3 × 16) + 12 = 60
4. Viết giá trị RGB. Kết hợp ba giá trị thập phân: rgb(26, 43, 60).

Các chữ số thập lục phân và giá trị thập phân tương ứng: 0=0, 1=1, ..., 9=9, A=10, B=11, C=12, D=13, E=14, F=15. Việc ghi nhớ A đến F là phần duy nhất khác với số học thập phân thông thường.

Mã HEX 3 Chữ Số vs 6 Chữ Số

CSS hỗ trợ định dạng HEX rút gọn 3 chữ số (#RGB) khi mỗi cặp trong ba cặp gồm hai chữ số giống nhau. Trong dạng rút gọn này, mỗi chữ số được mở rộng bằng cách nhân đôi. Ví dụ:

• #F80 mở rộng thành #FF8800 → rgb(255, 136, 0)
• #FFF mở rộng thành #FFFFFF → rgb(255, 255, 255)
• #000 mở rộng thành #000000 → rgb(0, 0, 0)
• #09C mở rộng thành #0099CC → rgb(0, 153, 204)

Ký hiệu 3 chữ số giảm số màu khả dụng từ 16,7 triệu xuống chỉ còn 4.096, nên không thể biểu diễn mọi màu sắc. CSS cũng hỗ trợ mã HEX 8 chữ số (#RRGGBBAA) có kênh alpha (độ trong suốt). Ví dụ: #FF880080 là màu cam ở độ mờ 50%.

Bảng Tham Chiếu HEX Sang RGB

Dưới đây là bảng tham chiếu các màu HEX phổ biến và tương đương RGB của chúng:

Màu Thương Hiệu Phổ Biến – Giá Trị HEX và RGB

Các nhà phát triển và nhà thiết kế thường cần giá trị HEX và RGB chính xác của màu thương hiệu phổ biến:

So Sánh Các Mô Hình Màu: HEX, RGB, HSL và CMYK

Hiểu khi nào nên dùng từng mô hình màu giúp bạn làm việc hiệu quả hơn:

HEX và RGB về mặt toán học là giống hệt nhau — chúng biểu diễn cùng một không gian màu với các ký hiệu khác nhau. Việc chuyển đổi giữa chúng là một phép dịch cơ số 16 sang cơ số 10 đơn giản, không mất độ chính xác.