Bảng mã màu là tập hợp các mã màu chuẩn được sử dụng trong HTML, CSS, RGB và CMYK để định nghĩa màu sắc chính xác trên web và các ấn phẩm in. Việc nắm rõ bảng màu giúp nhà thiết kế, lập trình viên và marketer dễ dàng chọn màu phù hợp, tạo trải nghiệm trực quan, đồng nhất và chuyên nghiệp. Trong bài viết này, mình sẽ tổng hợp bảng màu sắc chuẩn, kèm hướng dẫn cách sử dụng chuẩn cho từng nền tảng để bạn dễ tra mã màu và áp dụng ngay.
Những điểm chính
Giới thiệu bảng mã màu là gì: Hiểu khái niệm bảng mã màu, vai trò của các mã màu trong HTML, CSS, RGB và CMYK, cũng như lý do cần sử dụng màu chuẩn trong thiết kế web và in ấn.
Bảng mã màu HTML, CSS, RGB cơ bản: Nắm được các mã màu cơ bản, giúp bạn áp dụng nhanh trong lập trình web và thiết kế đơn giản.
Bảng mã màu phổ biến, thường dùng: Biết các màu được sử dụng nhiều nhất, hỗ trợ lựa chọn màu phù hợp cho giao diện và thương hiệu.
Bảng màu RGB đầy đủ trong thiết kế: Nắm được toàn bộ màu RGB, bao gồm đỏ, cam, vàng, xanh lá, xanh lục, xanh dương, tím, hồng, trắng, xám và nâu, giúp phối màu chuẩn xác và đồng nhất.
Bảng màu CMYK dùng cho in ấn: Hiểu cách sử dụng màu CMYK để in ấn chính xác, đảm bảo màu sắc trên sản phẩm thực tế tương đồng với thiết kế trên màn hình.
Biết thêm Vietnix là nhà cung cấp dịch vụ lưu trữ tốc độ cao, phù hợp cho các website và ứng dụng yêu cầu hiệu năng cao, xử lý đồ họa hoặc dữ liệu nặng.
Câu hỏi thường gặp: Giải đáp các thắc mắc liên quan đến mã màu.
Giới thiệu bảng mã màu là gì?
Bảng mã màu là công cụ thiết yếu cho các nhà thiết kế website, đồ họa và in ấn. Nó giúp bạn xác định và sử dụng các màu sắc một cách chính xác và nhất quán trên các nền tảng khác nhau.
Bảng mã màu bao gồm các thông tin sau:
Tên màu: Tên gọi chung của màu sắc bằng tiếng Việt và tiếng Anh.
Mã màu HTML: Dùng để hiển thị màu sắc trên trang web.
Giá trị RGB: Biểu diễn màu sắc bằng ba thành phần: Red (đỏ), Green (xanh lá cây) và Blue (xanh lam). Mỗi thành phần có giá trị từ 0 đến 255.
Giá trị CMYK: Biểu diễn màu sắc bằng bốn thành phần: Cyan (lục lam), Magenta (đỏ tươi), Yellow (vàng) và Black (đen). Mỗi thành phần có giá trị phần trăm từ 0% đến 100%.
Vai trò quan trọng của bảng mã màu
Ngoài ra, để website của bạn hiển thị màu sắc một cách hoàn hảo, thu hút người dùng và mang lại trải nghiệm tốt nhất, bạn cũng nên cần một nền tảng hạ tầng lưu trữ mạnh mẽ và tốc độ cao. Bạn có thể tham khảo Vietnix với đa dạng giải pháp hosting, VPS chất lượng cao, đáp ứng mọi nhu cầu của website.
Web Hosting tại Vietnix là một giải pháp hosting với tốc độ truy cập vượt trội và hệ thống bảo mật tiên tiến, giúp hiển thị màu sắc website một cách chính xác và sống động. Bên cạnh đó, nếu website của bạn chứa nhiều hình ảnh, hiệu ứng đồ họa và yêu cầu tốc độ tải trang cực nhanh, có thể tham khảo NVMe Hosting với ổ cứng NVMe tốc độ cao sẽ là giải pháp tối ưu, mang đến trải nghiệm mượt mà và ấn tượng cho người dùng, đặc biệt là khi website sử dụng nhiều màu sắc và hiệu ứng đồ họa.
Bảng mã màu HTML, CSS, RGB cơ bản
Vietnix sẽ tổng hợp cho bạn bảng mã màu đầy đủ. Bao gồm có mã màu áp dụng cho code HTML, CSS và mã màu RGB, dành cho những nhà thiết kế website, lập trình viên, designer,… Chắc chắn các code màu sẽ rất cần thiết và hỗ trợ nhanh chóng hơn trong công việc. Với bảng mã này, bạn chỉ việc copy mã màu về trực tiếp và sử dụng.
Màu
HTML / CSS Name
Hex Code (#RRGGBB)
Decimal Code (R,G,B)
Black
#000000
(0,0,0)
White
#FFFFFF
(255,255,255)
Red
#FF0000
(255,0,0)
Lime
#00FF00
(0,255,0)
Blue
#0000FF
(0,0,255)
Yellow
#FFFF00
(255,255,0)
Cyan / Aqua
#00FFFF
(0,255,255)
Magenta / Fuchsia
#FF00FF
(255,0,255)
Silver
#C0C0C0
(192,192,192)
Gray
#808080
(128,128,128)
Maroon
#800000
(128,0,0)
Olive
#808000
(128,128,0)
Green
#008000
(0,128,0)
Purple
#800080
(128,0,128)
Teal
#008080
(0,128,128)
Navy
#000080
(0,0,128)
Bảng mã màu phổ biến, thường dùng
Dưới đây là bảng các màu phổ biến dạng mã HEX-16 được sử dụng phổ biến nhất.
#EEEEEE
#DDDDDD
#CCCCCC
#BBBBBB
#AAAAAA
#999999
#888888
#777777
#666666
#555555
#444444
#333333
#222222
#111111
#000000
#FF0000
#EE0000
#DD0000
#CC0000
#BB0000
#AA0000
#990000
#880000
#770000
#660000
#550000
#440000
#330000
#220000
#110000
#FFFFFF
#FFFFCC
#FFFF99
#FFFF66
#FFFF33
#FFFF00
#CCFFFF
#CCFFCC
#CCFF99
#CCFF66
#CCFF33
#CCFF00
#99FFFF
#99FFCC
#99FF99
#99FF66
#99FF33
#99FF00
#66FFFF
#66FFCC
#66FF99
#66FF66
#66FF33
#66FF00
#33FFFF
#33FFCC
#33FF99
#33FF66
#33FF33
#33FF00
#00FFFF
#00FFCC
#00FF99
#00FF66
#00FF33
#00FF00
#FFCCFF
#FFCCCC
#FFCC99
#FFCC66
#FFCC33
#FFCC00
#CCCCFF
#CCCCCC
#CCCC99
#CCCC66
#CCCC33
#CCCC00
#99CCFF
#99CCCC
#99CC99
#99CC66
#99CC33
#99CC00
#66CCFF
#66CCCC
#66CC99
#66CC66
#66CC33
#66CC00
#33CCFF
#33CCCC
#33CC99
#33CC66
#33CC33
#33CC00
#00CCFF
#00CCCC
#33CC66
#33CC33
#00CC99
#00CC66
#00CC33
#00CC00
#FF99FF
#FF99CC
#FF9999
#FF9966
#FF9933
#FF9900
#CC99FF
#CC99CC
#CC9999
#CC9966
#CC9933
#CC9900
#9999FF
#9999CC
#999999
#999966
#999933
#999900
#6699FF
#6699CC
#669999
#669966
#669933
#669900
#3399FF
#3399CC
#339999
#339966
#339933
#339900
#0099FF
#0099CC
#009999
#009966
#009933
#009900
#FF66FF
#FF66CC
#FF6699
#FF6666
#FF6633
#FF6600
#CC66FF
#CC66CC
#CC6699
#CC6666
#CC6633
#CC6600
#9966FF
#9966CC
#996699
#996666
#996633
#996600
#6666FF
#6666CC
#666699
#666666
#666633
#666600
#3366FF
#3366CC
#336699
#336666
#336633
#336600
#0066FF
#0066CC
#006699
#006666
#006633
#006600
#FF33FF
#FF33CC
#FF3399
#FF3366
#FF3333
#FF3300
#CC33FF
#CC33CC
#CC3399
#CC3366
#CC3333
#CC3300
#9933FF
#9933CC
#993399
#993366
#993333
#993300
#6633FF
#6633CC
#663399
#663366
#663333
#663300
#3333FF
#3333CC
#333399
#333366
#333333
#333300
#0033FF
#FF3333
#0033CC
#003399
#003366
#003333
#003300
#FF00FF
#FF00CC
#FF0099
#FF0066
#FF0033
#FF0000
#CC00FF
#CC00CC
#CC0099
#CC0066
#CC0033
#CC0000
#9900FF
#9900CC
#990099
#990066
#990033
#990000
#6600FF
#6600CC
#660099
#660066
#660033
#660000
#3300FF
#3300CC
#330099
#330066
#330033
#330000
#0000FF
#0000CC
#000099
#000066
#000033
#00FF00
#00EE00
#00DD00
#00CC00
#00BB00
#00AA00
#009900
#008800
#007700
#006600
#005500
#004400
#003300
#002200
#001100
#0000FF
#0000EE
#0000DD
#0000CC
#0000BB
#0000AA
#000099
#000088
#000077
#000055
#000044
#000022
#000011
Bảng màu RGB đầy đủ trong thiết kế
Tiếp theo là bảng mã màu RGB tổng hợp theo dải màu chủ đạo.
CMYK là bảng mã màu được sử dụng nhiều trong ngành in ấn. CMYK còn có tên gọi khác four-color process” (quy trình bốn màu). Hệ màu CMYK gồm có:
C: Cyan (màu lục lam).
M: Magenta (màu đỏ tươi hay hồng tươi).
Y: Yellow (màu vàng).
K: Keyline (màu đen).
Dưới đây là bảng mã màu CMYK thông dụng song song với mã màu RGB vã mã HEX-16 tương ứng.
Colors
C
M
Y
K
R
G
B
HEX-16
1
0
100
100
45
139
0
22
#8B0016
2
0
100
100
25
178
0
31
#B2001F
3
0
100
100
15
197
0
35
#C50023
4
0
100
100
0
223
0
41
#DF0029
5
0
85
70
0
229
70
70
#E54646
6
0
65
50
0
238
124
107
#EE7C6B
7
0
45
30
0
245
168
154
#F5A89A
8
0
20
10
0
252
218
213
#FCDAD5
9
0
90
80
45
142
30
32
#8E1E20
10
0
90
80
25
182
41
43
#B6292B
11
0
90
80
15
200
46
49
#C82E31
12
0
90
80
0
223
53
57
#E33539
13
0
70
65
0
235
113
83
#EB7153
14
0
55
50
0
241
147
115
#F19373
15
0
40
35
0
246
178
151
#F6B297
16
0
20
20
0
252
217
196
#FCD9C4
17
0
60
100
45
148
83
5
#945305
18
0
60
100
25
189
107
9
#BD6B09
19
0
60
100
15
208
119
11
#D0770B
20
0
60
100
0
236
135
14
#EC870E
21
0
50
80
0
240
156
66
#F09C42
22
0
40
60
0
245
177
109
#F5B16D
23
0
25
40
0
250
206
156
#FACE9C
24
0
15
20
0
253
226
202
#FDE2CA
25
0
40
100
45
151
109
0
#976D00
26
0
40
100
25
193
140
0
#C18C00
27
0
40
100
15
213
155
0
#D59B00
28
0
40
100
0
241
175
0
#F1AF00
29
0
30
80
0
243
194
70
#F3C246
30
0
25
60
0
249
204
118
#F9CC76
31
0
15
40
0
252
224
166
#FCE0A6
32
0
10
20
0
254
235
208
#FEEBD0
33
0
0
100
45
156
153
0
#9C9900
34
0
0
100
25
199
195
0
#C7C300
35
0
0
100
15
220
216
0
#DCD800
36
0
0
100
0
249
244
0
#F9F400
37
0
0
80
0
252
245
76
#FCF54C
38
0
0
60
0
254
248
134
#FEF889
39
0
0
40
0
255
250
179
#FFFAB3
40
0
0
25
0
255
251
209
#FFFBD1
41
60
0
100
45
54
117
23
#367517
42
60
0
100
25
72
150
32
#489620
43
60
0
100
15
80
166
37
#50A625
44
60
0
100
0
91
189
43
#5BBD2B
45
50
0
80
0
131
199
93
#83C75D
46
35
0
60
0
175
215
136
#AFD788
47
25
0
40
0
200
226
177
#C8E2B1
48
12
0
20
0
230
241
216
#E6F1D8
49
100
0
90
45
0
98
65
#006241
50
100
0
90
25
0
127
84
#007F54
51
100
0
90
15
0
140
94
#008C5E
52
100
0
90
0
0
160
107
#00A06B
53
80
0
75
0
0
174
114
#00AE72
54
60
0
55
0
103
191
127
#67BF7F
55
45
0
35
0
152
208
185
#98D0B9
56
25
0
20
0
201
228
214
#C9E4D6
57
100
0
40
45
0
103
107
#00676B
58
100
0
40
25
0
132
137
#008489
59
100
0
40
15
0
146
152
#009298
60
100
0
40
0
0
166
173
#00A6AD
61
80
0
30
0
0
178
191
#00B2BF
62
60
0
25
0
110
195
201
#6EC3C9
63
45
0
20
0
153
209
211
#99D1D3
64
25
0
10
0
202
229
232
#CAE5E8
65
100
60
0
45
16
54
103
#103667
66
100
60
0
25
24
71
133
#184785
67
100
60
0
15
27
79
147
#1B4F93
68
100
60
0
0
32
90
167
#205AA7
69
85
50
0
0
66
110
180
#426EB4
70
65
40
0
0
115
136
193
#7388C1
71
50
25
0
0
148
170
214
#94AAD6
72
30
15
0
0
191
202
230
#BFCAE6
73
100
90
0
45
33
21
81
#211551
74
100
90
0
25
45
30
105
#2D1E69
75
100
90
0
15
50
34
117
#322275
76
100
90
0
0
58
40
133
#3A2885
77
85
80
0
0
81
31
144
#511F90
78
75
65
0
0
99
91
162
#635BA2
79
60
55
0
0
130
115
176
#8273B0
80
45
40
0
0
160
149
196
#A095C4
81
80
100
0
45
56
4
75
#38044B
82
80
100
0
25
73
7
97
#490761
83
80
100
0
15
82
9
108
#52096C
84
80
100
0
0
93
12
123
#5D0C7B
85
65
85
0
0
121
55
139
#79378B
86
55
65
0
0
140
99
164
#8C63A4
87
40
50
0
0
170
135
184
#AA87B8
88
25
30
0
0
201
181
212
#C9B5D4
89
40
100
0
45
100
0
75
#64004B
90
40
100
0
25
120
0
98
#780062
91
40
100
0
15
143
0
109
#8F006D
92
40
100
0
0
162
0
124
#A2007C
93
35
80
0
0
143
0
109
#AF4A92
94
25
60
0
0
197
124
172
#C57CAC
95
20
40
0
0
210
166
199
#D2A6C7
96
10
20
0
0
232
211
227
#E8D3E3
97
0
0
0
10
236
236
236
#ECECEC
98
0
0
0
20
215
215
215
#D7D7D7
99
0
0
0
30
194
194
194
#C2C2C2
100
0
0
0
35
183
183
183
#B7B7B7
101
0
0
0
45
160
160
160
#A0A0A0
102
0
0
0
55
137
137
137
#898989
103
0
0
0
65
112
112
112
#707070
104
0
0
0
75
85
85
85
#555555
105
0
0
0
85
54
54
54
#363636
106
0
0
0
100
0
0
0
#000000
Tổng hợp mã màu icon mạng xã hội phổ hiện nay
Bảng dưới đây chỉ thể hiện những màu cơ bản đại diện cho logo/icon của từng mạng xã hội, không bao gồm toàn bộ các biến thể màu. Ví dụ, biểu tượng của Facebook thường sử dụng đồng thời hai tông màu chính là #ffffff và #3b5998.
Trong thực tế thiết kế đồ họa và truyền thông hình ảnh, nhiều sản phẩm không chỉ dùng một màu đơn lẻ mà còn kết hợp nhiều tông màu để tạo hiệu ứng nổi bật. Trường hợp này được gọi là màu Gradient, tức là dải màu chuyển tiếp liên tục giữa các gam màu đã được lựa chọn.
Mạng xã hội
Decimal Code
Hex Code
Màu
Facebook
59,89,152
#3b5998
Twitter
85,172,238
#55acee
Google+
220,78,65
#dc4e41
Pinterest
189,8,28
#bd081c
LinkedIn
119,181
#0077b5
Digg
0,0,0
#000000
Delicious
51,153,255
#3399ff
Stumbleupon
235,73,36
#eb4924
Tumblr
53,70,92
#00405d
Vkontakte
69,102,142
#45668e
Flattr
246,124,26 / 51,141,17
#f67c1a / #338d11
Reddit
255,69,0
#ff4500
Buffer
0,0,0
#000000
Weibo
206,17,38
#ce1126
Pocket
239,64,86
#ef4056
Xing
2,100,102 / 207,220,0
#026466 / #cfdc00
Odnoklassniki
237,129,43
#ed812b
WhatsApp
67,216,84
#43d854
Menéame
255,100,0
#ff6400
Blogger
245,125,0
#f57d00
Amazon
0,0,0 / 255,153,0
#000000 / #ff9900
Yahoo Mail
65,0,147
#410093
Gmail
234,67,53
#ea4335
Newsvine
180,136
#00b488
Evernote
45,190,96
#2dbe60
MySpace
0,64,93
#00405d
Viadeo
240,115,85
#f07355
Line
0,195,0
#00c300
Flipboard
225,40,40
#e12828
Yummly
0,64,93
#00405d
Viber
0,64,93
#00405d
Telegram
0,64,93
#00405d
Instagram
63,114,155
#3f729b
YouTube
205,32,31
#cd201f
Vimeo
26,183,234
#1ab7ea
Foursquare
0,64,93
#00405d
Behance
23,105,255
#1769ff
Github
0,64,93
#00405d
Skype
175,240
#00aff0
Snapchat
255,250,55
#fffa37
Vietnix – Nhà cung cấp dịch vụ lưu trữ tốc độ cao
Vietnix là nhà cung cấp dịch vụ VPS, hosting tốc độ cao, được xây dựng trên nền tảng hạ tầng hiện đại, tối ưu cho các website và ứng dụng yêu cầu hiệu năng mạnh, xử lý đồ họa hoặc dữ liệu nặng. Hệ thống hạ tầng tiên tiến kết hợp khả năng tùy chỉnh linh hoạt giúp người dùng dễ dàng quản trị và thiết lập thông qua giao diện trực quan, thân thiện.
Hiện nay, Vietnix cung cấp đa dạng các gói hosting bao gồm: MaxSpeed Hosting, WordPress Hosting, NVMe Hosting, Business Hosting, SEO Hosting và Hosting Giá Rẻ, giúp khách hàng có nhiều sự lựa chọn, tối ưu hóa khả năng vận hành. Ngoài ra, Vietnix còn cung cấp giải pháp backup tự động, đảm bảo an toàn dữ liệu và giúp bạn yên tâm phát triển dự án. Liên hệ ngay để được tư vấn chi tiết!
Thông tin liên hệ:
Website: https://vietnix.vn/
Hotline: 1800 1093
Email: sales@vietnix.com.vn
Địa chỉ: 265 Hồng Lạc, Phường Bảy Hiền, Thành Phố Hồ Chí Minh
Câu hỏi thường gặp
Cách tra màu từ ảnh đơn giản nhất?
Cách tra màu từ ảnh đơn giản nhất là: 1. Dùng công cụ chọn màu (Eyedropper Tool) trên phần mềm đồ họa – Ví dụ: Photoshop, GIMP, Illustrator. – Chỉ cần mở ảnh, dùng công cụ Eyedropper click vào điểm cần lấy màu → hiển thị mã HEX, RGB, HSL. 2. Dùng công cụ trực tuyến miễn phí – Ví dụ: imagecolorpicker.com, htmlcolorcodes.com. – Upload ảnh → click vào điểm cần lấy màu → hiển thị HEX, RGB, HSL. 3. Dùng tiện ích trình duyệt hoặc extension – Chrome/Firefox có các extension như ColorZilla, Eye Dropper. – Click vào ảnh trên web > lấy mã màu trực tiếp mà không cần tải ảnh.
Bảng màu sắc và tên gọi nào được sử dụng phổ biến nhất trong HTML, CSS và thiết kế đồ họa?
Các bảng màu phổ biến nhất trong HTML, CSS và thiết kế đồ họa là: – Tên màu chuẩn HTML/CSS (ví dụ: red, blue, green). – Mã HEX (#RRGGBB) và RGB/RGBA (rgb(255,0,0)). – HSL/HSLA cho điều chỉnh độ sáng và bão hòa. – CMYK chủ yếu dùng trong in ấn. Web thường dùng tên màu, HEX và RGB, còn đồ họa/in ấn dùng RGB, CMYK và Pantone.
Lời kết
Hiểu và nắm vững bảng code màu đầy đủ giúp bạn lựa chọn màu chính xác, phối hợp hài hòa và áp dụng hiệu quả trong thiết kế web, đồ họa hay in ấn. Từ các mã màu HTML, CSS, RGB đến CMYK, mỗi loại đều có vai trò riêng và hỗ trợ tối ưu cho từng mục đích sử dụng. Việc tra cứu nhanh, sử dụng đúng bảng màu không chỉ nâng cao tính thẩm mỹ mà còn đảm bảo tính chuyên nghiệp cho sản phẩm của bạn. Hãy áp dụng bảng màu chuẩn này để thiết kế hiệu quả, tiết kiệm thời gian và tạo ra trải nghiệm trực quan, đồng nhất cho người dùng.
Tôi là Nguyễn Hưng (Bo) – Chuyên gia hệ thống, mạng và bảo mật với hơn 13 năm kinh nghiệm, đồng thời là Co-Founder của Vietnix, nhà cung cấp dịch vụ Hosting, VPS và điện toán đám mây hàng đầu tại Việt Nam. Với niềm đam mê chia sẻ kiến thức, tôi luôn nỗ lực mang đến những bài viết hữu ích cho cộng đồng yêu công nghệ.
Kết nối với mình qua
Theo dõi
2 Comments
Mới nhất
Cũ nhấtĐược bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Khách
Levid Phạm Design
4 tháng trước
hay quá
Khách
21354563
6 tháng trước
hay
Tăng tốc độ website - Nâng tầm giá trị thương hiệu
hay quá
hay