Mã màu Hex là gì? Cách hoạt động của mã màu Hex trong thiết kế

Chính xác thì mã màu HEX là gì? Cùng tìm hiểu định nghĩa về màu HEX và khám phá cách sử dụng chúng trong thiết kế của bạn nhé.

Trả lời nhanh: mã màu hex là gì?

Mã màu hex (hex code) là cách viết một màu bằng dấu # và các chữ số thập lục phân 0–9, A–F, ví dụ #FF0000 là màu đỏ. Dạng thường gặp nhất là #RRGGBB: ba cặp ký tự cho lượng đỏ, xanh lá và xanh lam, mỗi cặp từ 00 (không có) đến FF (255, tối đa). Theo CSS Color Module Level 4 của W3C, mã hex mô tả một màu sRGB và có thể dài 3, 4, 6 hoặc 8 chữ số, không phân biệt chữ hoa hay chữ thường.

Ba cặp chữ số của #E11D48 và hai dạng viết tắt, có alpha. Hình do ColorME tự dựng.

Cần đổi ngay một mã hex sang RGB, HSL hay CMYK, bạn dán mã vào công cụ đổi mã màu HEX sang RGB, CMYK, HSL của ColorME. Trang công cụ ghi: "Hoàn toàn miễn phí, không cần đăng nhập và không giới hạn số lần dùng."

Mã màu Hex là gì?

Màu Hex là cách thể hiện màu từ các mô hình màu khác nhau thông qua các giá trị thập lục phân. Màu thập lục phân tuân theo định dạng #RRGGBB, trong đó RR là màu đỏ, GG là màu xanh lá cây và BB là màu xanh lam. Các số nguyên thập lục phân này có thể nằm trong phạm vi từ 00 đến FF để chỉ định cường độ của màu.

Ghi chú của ColorME (10/2026): cụm "từ các mô hình màu khác nhau" ở trên nên hiểu là: mã hex là một cách viết giá trị của hệ màu RGB, cụ thể là không gian màu sRGB theo chuẩn CSS, chứ không phải một hệ màu riêng. Cùng một màu có thể viết bằng hex, rgb() hay hsl(); phần so sánh ở cuối bài giải thích rõ.

Một ví dụ đơn giản về điều này là #FF0000. Màu này 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.

Muốn biết mã Hex của một màu bạn đang thấy, hãy dùng công cụ lấy mã màu của ColorME: hút màu từ ảnh hoặc bất kỳ đâu trên màn hình và nhận ngay mã HEX, RGB, CMYK.

Cấu trúc mã hex: 4 kiểu viết theo chuẩn CSS

Đặc tả CSS Color 4 quy định mã hex gồm dấu # và 3, 4, 6 hoặc 8 chữ số thập lục phân. Số chữ số quyết định cách đọc:

6 chữ số: #RRGGBB

Cặp đầu là đỏ, cặp giữa là xanh lá, cặp cuối là xanh lam; 00 là nhỏ nhất, FF (255) là lớn nhất, màu hoàn toàn không trong suốt. Ví dụ trong đặc tả: #00ff00 chính là rgb(0 255 0), màu xanh lá sáng mà CSS gọi là lime.

3 chữ số: #RGB

Dạng viết tắt: nhân đôi từng chữ số để có mã 6 chữ số. #123 bằng #112233, #F80 bằng #FF8800, #FFF bằng #FFFFFF. Dạng này chỉ viết được 4.096 màu (16 × 16 × 16), nên các mã như #E11D48 không rút gọn được.

8 chữ số: #RRGGBBAA, có độ trong suốt

6 chữ số đầu đọc như trên, cặp cuối AA là kênh alpha: 00 là trong suốt hoàn toàn, FF là đặc hoàn toàn. Ví dụ của W3C: #0000ffcc là màu xanh lam đục 80%. Muốn đổi phần trăm sang cặp AA, bạn lấy phần trăm × 255, làm tròn rồi đổi sang hex:

Cặp AA từ FF đến 00: màu xanh lam đục dần thành trong suốt. Hình do ColorME tự dựng.

Vì 255 không chia hết cho mọi phần trăm, một số mức chỉ đạt gần đúng (50% thành 80, tức 50,2%). Figma cũng dùng đúng thứ tự này: theo trang Figma về các mô hình màu, mã hex trong Figma có dạng #RRGGBBAA, AA = 00 là trong suốt hoàn toàn, FF là đặc hoàn toàn.

4 chữ số: #RGBA

Dạng viết tắt của 8 chữ số, nhân đôi từng chữ số: #00FC bằng #0000FFCC.

Tại sao nên sử dụng màu Hex?

Sử dụng mã màu hex để thể hiện sự khác nhau của màu sắc là một cách dễ dàng để phân biệt giữa các màu. Khi bạn hiểu cách chúng hoạt động, bạn có thể dễ dàng thay đổi các giá trị đỏ, xanh dương hoặc xanh lục để tạo ra một sắc thái khác. Điều này đặc biệt thuận tiện khi bạn có một loạt các tùy chọn màu như vậy với mã màu hex, đảm bảo độ chính xác của màu.

Có bao nhiêu màu Hex?

Trong ký hiệu #RRGGBB tiêu chuẩn, có 256 ^ 3 phối màu có sẵn, hoặc 16.777.216. Điều này là do mỗi giá trị màu RR, GG, BB có thể chứa 256 giá trị khác nhau, từ 00 đến FF. Do đó, số lượng kết hợp là 256 ^ 3.

Một lưu ý thú vị đó là nhiều trình duyệt hiện nay cũng sẽ hỗ trợ transparency (độ trong suốt). Điều này có nghĩa là một bộ mã màu hoàn toàn mới tồn tại dưới dạng #RRGGBBAA. Trong trường hợp này, có 4.294.967.296 mã màu, hoặc 256 ^ 4. Điều quan trọng cần lưu ý là việc bổ sung transparency không chỉ ra rằng nó có thêm màu mở rộng, vì thêm transparency không làm thay đổi màu sắc. Điều này chỉ đơn thuần là thêm thông tin và nhiều mã màu có sẵn hơn tùy thuộc vào độ transparency hoặc mức độ opacity (độ mờ). 

Ghi chú của ColorME (10/2026): bản cũ của đoạn trên viết định dạng có độ trong suốt là #AARRGGBB và tổng 4.294.976.296 mã. Theo CSS Color Module Level 4 của W3C, CSS đặt cặp alpha ở cuối (#RRGGBBAA), và 256⁴ = 4.294.967.296; ColorME đã sửa hai chỗ này. Riêng dạng 6 chữ số có đúng 256³ = 16.777.216 màu.

Để biết cách ứng dụng màu sắc trong thiết kế UI/UX, bạn nên tham khảo bài viết Thiết kế UI - Màu sắc và Font chữ nhé

Màu Hex hoạt động thế nào?

Màu Hex sử dụng mười sáu giá trị khác nhau để thể hiện một sắc thái màu duy nhất, cho dù đó là màu đỏ, xanh lá cây hoặc xanh dương. Điều này vô cùng hữu ích bởi màu hex sẽ cung cấp cho bạn một loạt các sắc thái cho mỗi màu - cụ thể là mười sáu. Mỗi màu được chia thành một số hoặc ký tự, từ 0-9 và A-F, trong đó 0 là giá trị tối thiểu và F là tối đa. Tiếp theo, định dạng màu được tách thành #RRGGBB, trong đó RR là màu đỏ, GG là màu xanh lá cây và BB là màu xanh lam.

Ghi chú của ColorME (10/2026): nói chính xác hơn, mỗi chữ số hex có 16 giá trị (0–9, A–F), còn mỗi cặp chữ số như RR có 16 × 16 = 256 mức, từ 00 đến FF. Vì vậy mỗi kênh đỏ, xanh lá, xanh lam có 256 mức chứ không phải 16.

Điều này giúp bạn có ý tưởng về việc có bao nhiêu cách kết hợp màu với mã màu hex, đó là lý do tại sao chúng được sử dụng thường xuyên. Nếu bạn muốn tự tạo một bảng màu độc đáo cho riêng mình đọc bài viết Các mẹo để tạo một bảng màu đơn sắc hiện đại của ColorME nhé

Cách đổi mã hex sang RGB và ngược lại (có ví dụ tính tay)

Mỗi cặp hex là một số trong hệ 16. Chữ cái đổi như sau: A = 10, B = 11, C = 12, D = 13, E = 14, F = 15. Giá trị của một cặp = chữ số đầu × 16 + chữ số sau.

Ví dụ 1: #E11D48 sang RGB

1. Tách thành 3 cặp: E1, 1D, 48.
2. Đỏ: E1 = 14 × 16 + 1 = 225.
3. Xanh lá: 1D = 1 × 16 + 13 = 29.
4. Xanh lam: 48 = 4 × 16 + 8 = 72.
5. Kết quả: rgb(225, 29, 72), một màu đỏ hồng đậm.

Ví dụ 2: rgb(31, 63, 224) sang hex

1. Chia từng số cho 16, lấy thương và số dư.
2. 31 = 1 × 16 + 15, thành 1F.
3. 63 = 3 × 16 + 15, thành 3F.
4. 224 = 14 × 16 + 0, thành E0.
5. Kết quả: #1F3FE0, một màu xanh coban.

Đổi hex sang RGB và ngược lại bằng phép nhân, chia cho 16. Hình do ColorME tự dựng.

Ví dụ 3: mã rút gọn #F80

Nhân đôi từng chữ số: #FF8800. Đỏ FF = 255, xanh lá 88 = 8 × 16 + 8 = 136, xanh lam 00 = 0. Kết quả rgb(255, 136, 0), màu cam.

Tính tay giúp bạn hiểu mã, còn khi làm việc hằng ngày thì dùng công cụ đổi mã màu HEX sang RGB, CMYK, HSL: trang công cụ ghi bạn nhập được "HEX (#rgb, #rrggbb, #rrggbbaa, có hoặc không có dấu #), rgb(), hsl(), hsv(), cmyk(), oklch() hoặc tên màu CSS", và kết quả xuất ra HEX, RGB, HSL, HSV, CMYK, OKLCH cùng một biến CSS.

Để tra nhanh khi làm việc, bạn có thể dùng bảng 80 mã màu RGB, HEX, CMYK theo nhóm màu.

Bảng mã màu hex thông dụng

18 màu dưới đây có tên sẵn trong CSS, mã hex và RGB lấy từ bảng màu có tên trong CSS Color 4. Trong CSS bạn có thể viết tên (color: navy) hoặc mã (color: #000080), kết quả như nhau.

18 màu có tên trong CSS Color 4 với mã hex và RGB. Hình do ColorME tự dựng.

Lấy và nhập mã hex trong Photoshop, Illustrator, Figma

Photoshop

1. Bấm ô Set foreground color (màu tiền cảnh) hoặc Set background color (màu hậu cảnh) trên thanh công cụ để mở Color Picker.
2. Gõ mã 6 chữ số vào ô có dấu #, rồi bấm OK.
3. Muốn đọc mã của màu đang dùng, mở lại Color Picker: ô # cho bạn mã hex của màu đó.

Theo trang trợ giúp Photoshop của Adobe, mã hex trong Color Picker là "a 6-digit code representing RGB values" (mã 6 chữ số biểu diễn giá trị RGB), thường dùng cho thiết kế web và kỹ thuật số.

Illustrator

1. Chọn đối tượng, bấm đúp ô Fill (tô) hoặc Stroke (viền) trên thanh công cụ để mở Color Picker.
2. Gõ mã vào ô giá trị hex (6 chữ số) rồi bấm OK.

Trang trợ giúp Illustrator của Adobe mô tả ô này là "Hexadecimal color value: Denotes the six-digit code of the color". Hộp thoại còn có cảnh báo Out of Gamut khi màu nằm ngoài vùng in được của máy in CMYK, rất đáng để ý nếu thiết kế để in.

Figma

1. Chọn layer đã có fill, bấm vào ô màu (fill swatch) ở thanh bên phải để mở color picker.
2. Ở menu thả xuống của mô hình màu, chọn Hex (mặc định).
3. Gõ 6 chữ số và chỉnh độ đục ở ô phần trăm bên cạnh, hoặc gõ thẳng 8 chữ số có cặp alpha ở cuối.

Các bước theo trang trợ giúp của Figma về color picker và trang Figma về các mô hình màu. Figma cho xem màu ở 5 mô hình: Hex, HSB, HSL, CSS và RGB; đổi mô hình chỉ đổi cách ghi, không đổi màu hiển thị.

Lấy cả bảng mã hex từ một bức ảnh

Muốn lấy cả bảng màu chủ đạo của một bức ảnh, hãy dùng Trích xuất bảng màu từ ảnh: trang công cụ ghi "công cụ tự trích xuất các màu chủ đạo kèm mã HEX, RGB, HSL và tỉ lệ phần trăm". Các bước chi tiết có trong bài lấy mã màu từ ảnh online.

Hex, RGB, HSL và CMYK khác nhau thế nào?

Hex, rgb() và hsl() là ba cách viết cùng một màu màn hình; CMYK là hệ màu của mực in. Dưới đây là cùng một màu cam viết theo từng cách (ColorME tự tính, kiểm tra lại bằng công thức của CSS):

Cùng một màu cam viết bằng hex, rgb() và hsl(); CMYK tùy nhà in. Hình do ColorME tự dựng.

Khi nào dùng HSL thay cho hex?

Theo mục HSL của CSS Color 4, RGB tiện cho máy nhưng khó để người đoán cách làm một màu sáng hơn mà vẫn giữ sắc. HSL tách ra sắc độ (0° là đỏ, 120° là xanh lá, 240° là xanh lam), độ bão hòa và độ sáng (50% là màu "bình thường", 100% là trắng, 0% là đen). Muốn có 5 sắc thái của cùng một màu cam, bạn giữ hsl(32 100% …) và chỉ đổi độ sáng.

Mã hex có dùng để in được không?

Không nên dùng thẳng. Theo trang giải thích hệ màu của Adobe, màn hình dùng không gian màu RGB còn máy in dùng CMYK, hai bên có dải màu khác nhau nên "some colors visible on a monitor cannot be reproduced in print" (có màu thấy trên màn hình nhưng không in ra được). Khi thiết kế ấn phẩm in, bạn đặt file ở chế độ CMYK và hỏi nhà in hồ sơ màu họ dùng. Trang công cụ đổi mã màu của ColorME cũng ghi rõ màu in thật "còn phụ thuộc hồ sơ màu ICC, loại giấy và máy in của nhà in, nên hãy in thử trước khi in số lượng lớn". Phần này được giải thích kỹ trong bài hệ màu CMYK và RGB khác nhau thế nào.

Bảng màu Hex cho mùa thu

Dưới đây ColorME giới thiệu những bảng màu mang cảm hứng mùa thu với mã hex mà bạn nên thử trong những thiết kế của mình.

Có mã màu rồi, bước tiếp theo là phối chúng với nhau. Bạn có thể chọn màu theo vòng tròn màu sắc, tạo điểm nhấn bằng các cặp màu tương phản, và nắm các khái niệm sắc độ, độ bão hòa trong bài các thuật ngữ về màu sắc trong thiết kế.

Color Palette #1 – Bold & Cool – Currants & Gourds

Color Palette #2 – Brite & Cool – A Festive Contrast

Color Palette #3 – Rich & Cool – Ochre & Leaves

Color Palette #4 – Bold & Warm – Holiday Cheer

Color Palette #5 – Warm, Earthy & Rich

Câu hỏi thường gặp về mã màu hex

Hex nghĩa là gì?

Hex là viết tắt của hexadecimal, tức hệ thập lục phân (hệ 16), dùng 16 ký hiệu 0–9 và A–F. Trong thiết kế, "hex", "mã hex", "hex code" hay "color code" thường đều chỉ mã màu dạng #RRGGBB.

Để áp dụng nhanh, bạn có thể chọn một trong 30 bảng phối màu đẹp có mã HEX dùng sẵn cho poster, website và slide.

#FF0000 là màu gì?

Là màu đỏ thuần: đỏ tối đa (FF = 255), không có xanh lá và xanh lam (00). Trong CSS nó trùng với tên màu red. Tương tự #00FF00 là xanh lá sáng (lime), #0000FF là xanh lam (blue).

Mã hex viết chữ hoa hay chữ thường?

Cách nào cũng được. Đặc tả CSS ghi rõ chữ hoa hay thường không quan trọng: #00ff00 giống hệt #00FF00.

Vì sao mã hex của tôi không nhận?

Thường do sai số ký tự hoặc có ký tự ngoài 0–9, A–F. Mã hợp lệ chỉ dài 3, 4, 6 hoặc 8 ký tự sau dấu #; mã 5 hay 7 ký tự là sai. Riêng Color Picker của Photoshop và Illustrator dùng mã 6 chữ số, theo trang trợ giúp của Adobe.

Mã hex có trong suốt được không?

Được, với dạng 8 chữ số #RRGGBBAA (hoặc 4 chữ số #RGBA) trong CSS và Figma. Bảng phần trăm sang cặp AA ở phần cấu trúc phía trên giúp bạn tra nhanh.

Muốn tra nhanh mã màu theo tên tiếng Việt như đỏ đô, xanh cổ vịt, xanh navy, xem Bảng mã màu của ColorME với mã HEX, RGB, CMYK, HSL, bấm để sao chép.

Tạm kết,

Hi vọng bài viết này đã giúp bạn hiểu về mã màu Hex cũng như cách hoạt động của chúng trong thiết kế đồ họa. Nếu bạn yêu thích và muốn tìm hiểu thêm về thiết kế, tham khảo các khóa học thiết kế tại ColorME nhé