CEO Nguyễn SơnMã màu là ký hiệu số hoặc chữ dùng để gọi đúng một màu duy nhất, tránh tình trạng hai người cùng nói “xanh dương” nhưng hình dung ra hai sắc khác nhau trên màn hình và trên bản in. Bài viết tổng hợp bảng mã màu HTML/CSS, bảng 216 mã màu web an toàn, bảng mã màu tiếng Anh mở rộng, cùng bảng mã màu RGB và CMYK dùng riêng trong in ấn. Designer, lập trình viên web hoặc người tự chuẩn bị file in đều cần tra đúng bảng phù hợp trước khi gửi file, vì lệch hệ màu là nguyên nhân phổ biến khiến sản phẩm in ra không khớp bản thiết kế gốc. Với tem nhãn thật, có thể xem thêm quy trình in tem nhãn hàng hóa để hiểu cách xưởng kiểm soát mã màu từ file đến sản phẩm.
Mã màu HTML, CSS đọc như thế nào
Mã màu HTML/CSS phổ biến nhất ở định dạng HEX, viết bằng dấu # theo sau 6 ký tự (ví dụ #0073B7), mỗi cặp 2 ký tự tương ứng lần lượt kênh Đỏ, Xanh lá, Xanh lam theo hệ đếm cơ số 16 (từ 0 đến F). Ngoài HEX, thiết kế còn dùng hệ RGB (giá trị thập phân 0-255 mỗi kênh), hệ CMYK cho máy in offset, và hệ màu Pantone cho các đơn cần khớp đúng một màu thương hiệu cố định. Hai bảng dưới đây liệt kê mã màu HEX chuẩn HTML/CSS đang được dùng phổ biến nhất trong thiết kế web.
Bảng 216 mã màu web an toàn (Web-safe Colors)
Bảng mã màu web an toàn gồm 216 tổ hợp, mỗi kênh Đỏ – Xanh lá – Xanh lam chỉ nhận một trong 6 giá trị (FF, CC, 99, 66, 33, 00). Đây là tập mã màu hiển thị ổn định trên phần lớn màn hình đời cũ, vẫn được một số dự án web hoặc bảng hiệu chọn để tránh sai lệch màu giữa các thiết bị.
| #FFFFFF | #FFFFCC | #FFFF99 | #FFFF66 | #FFFF33 | #FFFF00 |
| #FFCCFF | #FFCCCC | #FFCC99 | #FFCC66 | #FFCC33 | #FFCC00 |
| #FF99FF | #FF99CC | #FF9999 | #FF9966 | #FF9933 | #FF9900 |
| #FF66FF | #FF66CC | #FF6699 | #FF6666 | #FF6633 | #FF6600 |
| #FF33FF | #FF33CC | #FF3399 | #FF3366 | #FF3333 | #FF3300 |
| #FF00FF | #FF00CC | #FF0099 | #FF0066 | #FF0033 | #FF0000 |
| #CCFFFF | #CCFFCC | #CCFF99 | #CCFF66 | #CCFF33 | #CCFF00 |
| #CCCCFF | #CCCCCC | #CCCC99 | #CCCC66 | #CCCC33 | #CCCC00 |
| #CC99FF | #CC99CC | #CC9999 | #CC9966 | #CC9933 | #CC9900 |
| #CC66FF | #CC66CC | #CC6699 | #CC6666 | #CC6633 | #CC6600 |
| #CC33FF | #CC33CC | #CC3399 | #CC3366 | #CC3333 | #CC3300 |
| #CC00FF | #CC00CC | #CC0099 | #CC0066 | #CC0033 | #CC0000 |
| #99FFFF | #99FFCC | #99FF99 | #99FF66 | #99FF33 | #99FF00 |
| #99CCFF | #99CCCC | #99CC99 | #99CC66 | #99CC33 | #99CC00 |
| #9999FF | #9999CC | #999999 | #999966 | #999933 | #999900 |
| #9966FF | #9966CC | #996699 | #996666 | #996633 | #996600 |
| #9933FF | #9933CC | #993399 | #993366 | #993333 | #993300 |
| #9900FF | #9900CC | #990099 | #990066 | #990033 | #990000 |
| #66FFFF | #66FFCC | #66FF99 | #66FF66 | #66FF33 | #66FF00 |
| #66CCFF | #66CCCC | #66CC99 | #66CC66 | #66CC33 | #66CC00 |
| #6699FF | #6699CC | #669999 | #669966 | #669933 | #669900 |
| #6666FF | #6666CC | #666699 | #666666 | #666633 | #666600 |
| #6633FF | #6633CC | #663399 | #663366 | #663333 | #663300 |
| #6600FF | #6600CC | #660099 | #660066 | #660033 | #660000 |
| #33FFFF | #33FFCC | #33FF99 | #33FF66 | #33FF33 | #33FF00 |
| #33CCFF | #33CCCC | #33CC99 | #33CC66 | #33CC33 | #33CC00 |
| #3399FF | #3399CC | #339999 | #339966 | #339933 | #339900 |
| #3366FF | #3366CC | #336699 | #336666 | #336633 | #336600 |
| #3333FF | #3333CC | #333399 | #333366 | #333333 | #333300 |
| #3300FF | #3300CC | #330099 | #330066 | #330033 | #330000 |
| #00FFFF | #00FFCC | #00FF99 | #00FF66 | #00FF33 | #00FF00 |
| #00CCFF | #00CCCC | #00CC99 | #00CC66 | #00CC33 | #00CC00 |
| #0099FF | #0099CC | #009999 | #009966 | #009933 | #009900 |
| #0066FF | #0066CC | #006699 | #006666 | #006633 | #006600 |
| #0033FF | #0033CC | #003399 | #003366 | #003333 | #003300 |
| #0000FF | #0000CC | #000099 | #000066 | #000033 | #000000 |
Nguồn: Bảng mã màu tiêu chuẩn HTML/CSS – W3C Web Colors.
Bảng mã màu tiếng Anh chuẩn mở rộng dùng trong thiết kế
Ngoài 216 mã web an toàn, HTML/CSS còn công nhận một bộ mã màu gọi bằng tên tiếng Anh (Extended Color Keywords) – có thể gõ thẳng tên màu vào code thay vì nhớ mã HEX. Toàn bộ tên màu chuẩn đang được trình duyệt hỗ trợ được liệt kê dưới đây, sắp theo thứ tự bảng chữ cái để dễ tra.
| Tên màu (tiếng Anh) | Mã HEX |
|---|---|
| AliceBlue | #F0F8FF |
| AntiqueWhite | #FAEBD7 |
| Aqua | #00FFFF |
| Aquamarine | #7FFFD4 |
| Azure | #F0FFFF |
| Beige | #F5F5DC |
| Bisque | #FFE4C4 |
| Black | #000000 |
| BlanchedAlmond | #FFEBCD |
| Blue | #0000FF |
| BlueViolet | #8A2BE2 |
| Brown | #A52A2A |
| BurlyWood | #DEB887 |
| CadetBlue | #5F9EA0 |
| Chartreuse | #7FFF00 |
| Chocolate | #D2691E |
| Coral | #FF7F50 |
| CornflowerBlue | #6495ED |
| Cornsilk | #FFF8DC |
| Crimson | #DC143C |
| Cyan | #00FFFF |
| DarkBlue | #00008B |
| DarkCyan | #008B8B |
| DarkGoldenrod | #B8860B |
| DarkGray | #A9A9A9 |
| DarkGreen | #006400 |
| DarkKhaki | #BDB76B |
| DarkMagenta | #8B008B |
| DarkOliveGreen | #556B2F |
| DarkOrange | #FF8C00 |
| DarkOrchid | #9932CC |
| DarkRed | #8B0000 |
| DarkSalmon | #E9967A |
| DarkSeaGreen | #8FBC8F |
| DarkSlateBlue | #483D8B |
| DarkSlateGray | #2F4F4F |
| DarkTurquoise | #00CED1 |
| DarkViolet | #9400D3 |
| DeepPink | #FF1493 |
| DeepSkyBlue | #00BFFF |
| DimGray | #696969 |
| DodgerBlue | #1E90FF |
| FireBrick | #B22222 |
| FloralWhite | #FFFAF0 |
| ForestGreen | #228B22 |
| Fuchsia | #FF00FF |
| Gainsboro | #DCDCDC |
| GhostWhite | #F8F8FF |
| Gold | #FFD700 |
| Goldenrod | #DAA520 |
| Gray | #808080 |
| Green | #008000 |
| GreenYellow | #ADFF2F |
| HoneyDew | #F0FFF0 |
| HotPink | #FF69B4 |
| IndianRed | #CD5C5C |
| Indigo | #4B0082 |
| Ivory | #FFFFF0 |
| Khaki | #F0E68C |
| Lavender | #E6E6FA |
| LavenderBlush | #FFF0F5 |
| LawnGreen | #7CFC00 |
| LemonChiffon | #FFFACD |
| LightBlue | #ADD8E6 |
| LightCoral | #F08080 |
| LightCyan | #E0FFFF |
| LightGoldenrodYellow | #FAFAD2 |
| LightGray | #D3D3D3 |
| LightGreen | #90EE90 |
| LightPink | #FFB6C1 |
| LightSalmon | #FFA07A |
| LightSeaGreen | #20B2AA |
| LightSkyBlue | #87CEFA |
| LightSlateGray | #778899 |
| LightSteelBlue | #B0C4DE |
| LightYellow | #FFFFE0 |
| Lime | #00FF00 |
| LimeGreen | #32CD32 |
| Linen | #FAF0E6 |
| Magenta | #FF00FF |
| Maroon | #800000 |
| MediumAquaMarine | #66CDAA |
| MediumBlue | #0000CD |
| MediumOrchid | #BA55D3 |
| MediumPurple | #9370DB |
| MediumSeaGreen | #3CB371 |
| MediumSlateBlue | #7B68EE |
| MediumSpringGreen | #00FA9A |
| MediumTurquoise | #48D1CC |
| MediumVioletRed | #C71585 |
| MidnightBlue | #191970 |
| MintCream | #F5FFFA |
| MistyRose | #FFE4E1 |
| Moccasin | #FFE4B5 |
| NavajoWhite | #FFDEAD |
| Navy | #000080 |
| OldLace | #FDF5E6 |
| Olive | #808000 |
| OliveDrab | #6B8E23 |
| Orange | #FFA500 |
| OrangeRed | #FF4500 |
| Orchid | #DA70D6 |
| PaleGoldenrod | #EEE8AA |
| PaleGreen | #98FB98 |
| PaleTurquoise | #AFEEEE |
| PaleVioletRed | #DB7093 |
| PapayaWhip | #FFEFD5 |
| PeachPuff | #FFDAB9 |
| Peru | #CD853F |
| Pink | #FFC0CB |
| Plum | #DDA0DD |
| PowderBlue | #B0E0E6 |
| Purple | #800080 |
| Red | #FF0000 |
| RosyBrown | #BC8F8F |
| RoyalBlue | #4169E1 |
| SaddleBrown | #8B4513 |
| Salmon | #FA8072 |
| SandyBrown | #F4A460 |
| SeaGreen | #2E8B57 |
| SeaShell | #FFF5EE |
| Sienna | #A0522D |
| Silver | #C0C0C0 |
| SkyBlue | #87CEEB |
| SlateBlue | #6A5ACD |
| SlateGray | #708090 |
| Snow | #FFFAFA |
| SpringGreen | #00FF7F |
| SteelBlue | #4682B4 |
| Tan | #D2B48C |
| Teal | #008080 |
| Thistle | #D8BFD8 |
| Tomato | #FF6347 |
| Turquoise | #40E0D0 |
| Violet | #EE82EE |
| Wheat | #F5DEB3 |
| White | #FFFFFF |
| WhiteSmoke | #F5F5F5 |
| Yellow | #FFFF00 |
| YellowGreen | #9ACD32 |
Nguồn: Bảng mã màu tiêu chuẩn HTML/CSS – W3C Web Colors.
Bảng mã màu RGB sử dụng trong in ấn
Hệ màu RGB (Red – Green – Blue) dùng để tạo màu cho màn hình điện tử (máy tính, điện thoại, tivi). RGB là hệ màu cộng (additive), kết hợp ánh sáng từ ba màu đỏ, xanh lá và xanh lam để tạo ra các màu khác nhau. Mỗi kênh màu được biểu thị bằng số từ 0 đến 255. 16 mã màu RGB cơ bản nhất dưới đây kèm mã HEX tương ứng, dùng để đối chiếu nhanh giữa file thiết kế trên máy tính và bản in thử.
| Màu | Mã HEX | RGB (R,G,B) |
|---|---|---|
| Black (Đen) | #000000 | (0, 0, 0) |
| White (Trắng) | #FFFFFF | (255, 255, 255) |
| Red (Đỏ) | #FF0000 | (255, 0, 0) |
| Lime (Xanh lá) | #00FF00 | (0, 255, 0) |
| Blue (Xanh lam) | #0000FF | (0, 0, 255) |
| Yellow (Vàng) | #FFFF00 | (255, 255, 0) |
| Aqua (Xanh cyan) | #00FFFF | (0, 255, 255) |
| Fuchsia (Hồng cánh sen) | #FF00FF | (255, 0, 255) |
| Silver (Bạc) | #C0C0C0 | (192, 192, 192) |
| Gray (Xám) | #808080 | (128, 128, 128) |
| Maroon (Đỏ mận) | #800000 | (128, 0, 0) |
| Olive (Ô liu) | #808000 | (128, 128, 0) |
| Green (Xanh lá đậm) | #008000 | (0, 128, 0) |
| Purple (Tím) | #800080 | (128, 0, 128) |
| Teal (Xanh vịt) | #008080 | (0, 128, 128) |
| Navy (Xanh navy) | #000080 | (0, 0, 128) |
Nguồn: Bảng mã màu tiêu chuẩn HTML/CSS – W3C Web Colors.
Bảng RGB trên đúng cho màn hình, nhưng máy in offset không phun ánh sáng mà phun mực – nên khi lên khuôn in thật, file phải quy đổi sang hệ CMYK ở phần tiếp theo.
Bảng mã màu CMYK sử dụng trong in ấn
Hệ màu CMYK (Cyan – Magenta – Yellow – Key/Black) là hệ màu trừ (subtractive), dùng cho máy in offset, in kỹ thuật số và in tem nhãn. Khác với RGB dùng ánh sáng, CMYK pha mực trên nền giấy trắng nên cùng một mã màu có thể ra sắc hơi khác nhau tùy loại giấy và máy in. Vì vậy bảng tóm tắt dưới đây chỉ nêu 5 giá trị CMYK gốc (mực nguyên chất) để tra nhanh, còn bảng quy đổi CMYK đầy đủ cho từng màu đã có sẵn tại bài Hệ màu CMYK là gì, phân biệt CMYK và RGB.
| Màu gốc | CMYK (C, M, Y, K) |
|---|---|
| Đen tuyệt đối (K) | 0, 0, 0, 100 |
| Trắng nền giấy | 0, 0, 0, 0 |
| Cyan nguyên chất | 100, 0, 0, 0 |
| Magenta nguyên chất | 0, 100, 0, 0 |
| Yellow nguyên chất | 0, 0, 100, 0 |
4 giá trị C/M/Y/K tính theo thang phần trăm mực (0-100%).
Vai trò của bảng mã màu trong thiết kế và in ấn
Đảm bảo độ chính xác màu sắc
Mã màu cho phép nhà thiết kế, lập trình viên và xưởng in cùng nhìn vào một con số duy nhất thay vì mô tả màu bằng lời. Khi file thiết kế ghi rõ #0073B7 thay vì “xanh dương đậm”, máy in và màn hình đều đọc đúng một giá trị, giảm hẳn tình trạng duyệt màu qua lại nhiều lần trước khi lên khuôn.
Phù hợp với từng mục đích thiết kế
RGB phù hợp cho thiết kế hiển thị trên màn hình điện tử, giao diện web, vì thiết bị phát ánh sáng. HTML/CSS dùng mã HEX để lập trình giao diện web thống nhất với bản thiết kế gốc. CMYK dành cho máy in offset và in kỹ thuật số. Pantone dùng khi cần khớp đúng một màu thương hiệu cố định trên nhiều chất liệu khác nhau, không phụ thuộc máy in hay màn hình hiển thị.
Hỗ trợ chuyển đổi giữa RGB và CMYK khi in ấn
Chuyển từ RGB sang CMYK thường gây sai lệch màu do phạm vi màu (gamut) của hai hệ khác nhau – một số màu neon rực trên RGB không có mực CMYK nào pha đúng được. Có mã màu tham chiếu, nhà thiết kế biết trước màu nào an toàn khi in, màu nào cần đổi phương án trước khi gửi file, thay vì phát hiện lệch màu sau khi in thử.
Rút ngắn thời gian làm việc với màu
Có sẵn bảng mã màu, nhà thiết kế lưu và gọi lại đúng màu đã dùng cho một dự án thay vì dò lại bằng mắt, đặc biệt hữu ích với dự án cần lặp lại cùng một bộ màu thương hiệu trên nhiều ấn phẩm khác nhau.
Chọn hệ màu theo mục đích sử dụng
Nhầm hệ màu ngay từ đầu là lý do phổ biến khiến file phải làm lại. Bảng sau tóm tắt nên dùng hệ màu nào cho từng mục đích cụ thể, để tránh nhầm giữa file dùng để lên web và file gửi đi in.
| Hệ màu | Dùng khi nào | Ví dụ ứng dụng |
|---|---|---|
| HTML/CSS (HEX) | Lập trình giao diện web, đồng bộ màu code với file thiết kế | Website, ứng dụng, banner online |
| RGB | Thiết kế hiển thị trên màn hình, chưa cần gửi in | Slide, video, giao diện app |
| CMYK | File chuẩn bị lên khuôn in offset hoặc in kỹ thuật số | Tem nhãn, bao bì, catalogue |
| Pantone | Cần khớp đúng một màu thương hiệu trên nhiều chất liệu | Logo, bộ nhận diện thương hiệu |
📝 Cần in tem nhãn đúng mã màu trong file thiết kế của bạn?
Xưởng In Sơn Nguyên đối chiếu mã màu trong file thiết kế với máy in offset Nikel FS350, kiểm soát sai lệch màu ở mức Delta E ≤ 2 trước khi lên khuôn in tem nhãn. Gửi file thiết kế nhận báo giá trong 2 giờ.
Bảng mã màu thương hiệu các nền tảng mạng xã hội phổ biến
Khi thiết kế tem nhãn hoặc ấn phẩm có gắn icon mạng xã hội (kèm fanpage, kênh bán hàng), nên dùng đúng mã màu thương hiệu của từng nền tảng thay vì tô màu tùy ý, để icon giữ được độ nhận diện quen thuộc với người xem. Mã HEX chính thức của các nền tảng phổ biến nhất được liệt kê trong bảng sau.
| Nền tảng | Mã HEX |
|---|---|
| #1877F2 | |
| Twitter (X) | #1DA1F2 |
| #E60023 | |
| #0A66C2 | |
| Digg | #000000 |
| Tumblr | #36465D |
| #FF4500 | |
| #E6162D | |
| #25D366 | |
| Blogger | #FF7800 |
| Amazon | #FF9900 |
| Gmail | #EA4335 |
| MySpace | #000000 |
| Line | #00C300 |
| #E12828 | |
| Viber | #7360F2 |
| Telegram | #26A5E4 |
| #E4405F | |
| YouTube | #FF0000 |
| Vimeo | #1AB7EA |
| Github | #181717 |
| Skype | #00AFF0 |
| Snapchat | #FFFC00 |
Mã màu thương hiệu tham khảo bộ nhận diện công khai của từng nền tảng, có thể thay đổi theo thời điểm cập nhật thương hiệu. Cần in đúng mã màu thương hiệu trên tem nhãn thật, xem thêm dịch vụ in tem nhãn hàng hóa.
CÔNG TY CỔ PHẦN IN SƠN NGUYÊN
Từ 2013, In Sơn Nguyên kiểm soát sai lệch mã màu bằng máy in offset Nikel FS350 (6 màu, đồng bộ Delta E ≤ 2), giúp mã màu trên file thiết kế khớp đúng với tem nhãn in ra thay vì chỉ ước lượng bằng mắt. Xem thêm quy trình in tem nhãn hàng hóa để chuẩn bị file trước khi gửi in.
Địa chỉ: Đội 8, thôn Vĩnh Trung, xã Đại Thanh, thành phố Hà Nội
Hotline / Zalo: 097 926 2230
