Bảng Mã Màu HTML, CSS, HEX & RGB Cập nhật 2025
Trong thế giới thiết kế web và đồ họa, màu sắc không chỉ là yếu tố thẩm mỹ mà còn là ngôn ngữ giao tiếp mạnh mẽ. Việc lựa chọn và sử dụng đúng mã màu sẽ quyết định cảm xúc và trải nghiệm của người dùng. Tuy nhiên, việc ghi nhớ và tra cứu hàng trăm mã màu khác nhau là một thách thức.
Chính vì vậy, bài viết này được tạo ra để trở thành nguồn tài nguyên toàn diện nhất, cung cấp cho bạn một bảng mã màu đầy đủ, dễ tra cứu, cùng với những kiến thức nền tảng và công cụ hữu ích để bạn làm chủ màu sắc trong mọi dự án của mình.
Công Cụ Tra Cứu Bảng Màu Sắc
Sử dụng các công cụ dưới đây để tìm kiếm hoặc khám phá màu sắc một cách nhanh chóng.
STT | Màu & Tên màu | Decimal Code (R,G,B) | Hex Code #RRGGBB |
---|---|---|---|
1 | GhostWhite | (248, 248, 255) | #F8F8FF |
2 | WhiteSmoke | (245, 245, 245) | #F5F5F5 |
3 | Gainsboro | (220, 220, 220) | #DCDCDC |
4 | White | (255, 255, 255) | #FFFFFF |
5 | Black | (0, 0, 0) | #000000 |
6 | DimGray | (105, 105, 105) | #696969 |
7 | LightGray | (211, 211, 211) | #D3D3D3 |
8 | Gray | (190, 190, 190) | #BEBEBE |
9 | Gray11 | (28, 28, 28) | #1C1C1C |
10 | Gray21 | (54, 54, 54) | #363636 |
11 | Gray31 | (79, 79, 79) | #4F4F4F |
12 | Gray41 | (105, 105, 105) | #696969 |
13 | Gray51 | (130, 130, 130) | #828282 |
14 | Gray61 | (156, 156, 156) | #9C9C9C |
15 | Gray71 | (181, 181, 181) | #B5B5B5 |
16 | Gray81 | (207, 207, 207) | #CFCFCF |
17 | Gray91 | (232, 232, 232) | #E8E8E8 |
18 | DarkGray | (169, 169, 169) | #A9A9A9 |
19 | LightSlateGray | (119, 136, 153) | #778899 |
20 | SlateGray | (112, 128, 144) | #708090 |
21 | SlateGray1 | (198, 226, 255) | #C6E2FF |
22 | SlateGray2 | (185, 211, 238) | #B9D3EE |
23 | SlateGray3 | (159, 182, 205) | #9FB6CD |
24 | SlateGray4 | (108, 123, 139) | #6C7B8B |
25 | DarkSlateGray | (47, 79, 79) | #2F4F4F |
26 | DarkSlateGray1 | (151, 255, 255) | #97FFFF |
27 | DarkSlateGray2 | (141, 238, 238) | #8DEEEE |
28 | DarkSlateGray3 | (121, 205, 205) | #79CDCD |
29 | DarkSlateGray4 | (82, 139, 139) | #528B8B |
30 | PaleGoldenrod | (238, 232, 170) | #EEE8AA |
31 | FloralWhite | (255, 250, 240) | #FFFAF0 |
32 | LightGoldenrodYellow | (250, 250, 210) | #FAFAD2 |
33 | SaddleBrown | (139, 69, 19) | #8B4513 |
34 | Sienna | (160, 82, 45) | #A0522D |
35 | OldLace | (253, 245, 230) | #FDF5E6 |
36 | Linen | (250, 240, 230) | #FAF0E6 |
37 | PapayaWhip | (255, 239, 213) | #FFEFD5 |
38 | BlanchedAlmond | (255, 235, 205) | #FFEBCD |
39 | Moccasin | (255, 228, 181) | #FFE4B5 |
40 | Peru | (205, 133, 63) | #CD853F |
41 | Beige | (245, 245, 220) | #F5F5DC |
42 | SandyBrown | (244, 164, 96) | #F4A460 |
43 | Snow1 | (255, 250, 250) | #FFFAFA |
44 | Snow2 | (238, 233, 233) | #EEE9E9 |
45 | Snow3 | (205, 201, 201) | #CDC9C9 |
46 | Snow4 | (139, 137, 137) | #8B8989 |
47 | Seashell1 | (255, 245, 238) | #FFF5EE |
48 | Seashell2 | (238, 229, 222) | #EEE5DE |
49 | Seashell3 | (205, 197, 191) | #CDC5BF |
50 | Seashell4 | (139, 134, 130) | #8B8682 |
51 | AntiqueWhite | (250, 235, 215) | #FAEBD7 |
52 | AntiqueWhite1 | (255, 239, 219) | #FFEFDB |
53 | AntiqueWhite2 | (238, 223, 204) | #EEDFCC |
54 | AntiqueWhite3 | (205, 192, 176) | #CDC0B0 |
55 | AntiqueWhite4 | (139, 131, 120) | #8B8378 |
56 | Bisque1 | (255, 228, 196) | #FFE4C4 |
57 | Bisque2 | (238, 213, 183) | #EED5B7 |
58 | Bisque3 | (205, 183, 158) | #CDB79E |
59 | Bisque4 | (139, 125, 107) | #8B7D6B |
60 | PeachPuff1 | (255, 218, 185) | #FFDAB9 |
61 | PeachPuff2 | (238, 203, 173) | #EECBAD |
62 | PeachPuff3 | (205, 175, 149) | #CDAF95 |
63 | PeachPuff4 | (139, 119, 101) | #8B7765 |
64 | NavajoWhite1 | (255, 222, 173) | #FFDEAD |
65 | NavajoWhite2 | (238, 207, 161) | #EECFA1 |
66 | NavajoWhite3 | (205, 179, 139) | #CDB38B |
67 | NavajoWhite4 | (139, 121, 94) | #8B795E |
68 | LemonChiffon1 | (255, 250, 205) | #FFFACD |
69 | LemonChiffon2 | (238, 233, 191) | #EEE9BF |
70 | LemonChiffon3 | (205, 201, 165) | #CDC9A5 |
71 | LemonChiffon4 | (139, 137, 112) | #8B8970 |
72 | Cornsilk1 | (255, 248, 220) | #FFF8DC |
73 | Cornsilk2 | (238, 232, 205) | #EEE8CD |
74 | Cornsilk3 | (205, 200, 177) | #CDC8B1 |
75 | Cornsilk4 | (139, 136, 120) | #8B8878 |
76 | Ivory1 | (255, 255, 240) | #FFFFF0 |
77 | Ivory2 | (238, 238, 224) | #EEEEE0 |
78 | Ivory3 | (205, 205, 193) | #CDCDC1 |
79 | Ivory4 | (139, 139, 131) | #8B8B83 |
80 | MintCream | (245, 255, 250) | #F5FFFA |
81 | Honeydew1 | (240, 255, 240) | #F0FFF0 |
82 | Honeydew2 | (224, 238, 224) | #E0EEE0 |
83 | Honeydew3 | (193, 205, 193) | #C1CDC1 |
84 | Honeydew4 | (131, 139, 131) | #838B83 |
85 | LavenderBlush1 | (255, 240, 245) | #FFF0F5 |
86 | LavenderBlush2 | (238, 224, 229) | #EEE0E5 |
87 | LavenderBlush3 | (205, 193, 197) | #CDC1C5 |
88 | LavenderBlush4 | (139, 131, 134) | #8B8386 |
89 | Lavender | (230, 230, 250) | #E6E6FA |
90 | MistyRose1 | (255, 228, 225) | #FFE4E1 |
91 | MistyRose2 | (238, 213, 210) | #EED5D2 |
92 | MistyRose3 | (205, 183, 181) | #CDB7B5 |
93 | MistyRose4 | (139, 125, 123) | #8B7D7B |
94 | Azure1 | (240, 255, 255) | #F0FFFF |
95 | Azure2 | (224, 238, 238) | #E0EEEE |
96 | Azure3 | (193, 205, 205) | #C1CDCD |
97 | Azure4 | (131, 139, 139) | #838B8B |
98 | AliceBlue | (240, 248, 255) | #F0F8FF |
99 | LightSlateBlue | (132, 112, 255) | #8470FF |
100 | MediumSlateBlue | (123, 104, 238) | #7B68EE |
101 | SlateBlue | (106, 90, 205) | #6A5ACD |
102 | SlateBlue1 | (131, 111, 255) | #836FFF |
103 | SlateBlue2 | (122, 103, 238) | #7A67EE |
104 | SlateBlue3 | (105, 89, 205) | #6959CD |
105 | SlateBlue4 | (71, 60, 139) | #473C8B |
106 | DarkSlateBlue | (72, 61, 139) | #483D8B |
107 | RoyalBlue | (65, 105, 225) | #4169E1 |
108 | RoyalBlue1 | (72, 118, 255) | #4876FF |
109 | RoyalBlue2 | (67, 110, 238) | #436EEE |
110 | RoyalBlue3 | (58, 95, 205) | #3A5FCD |
111 | RoyalBlue4 | (39, 64, 139) | #27408B |
112 | Blue1 | (0, 0, 255) | #0000FF |
113 | Blue2 | (0, 0, 238) | #0000EE |
114 | DarkBlue | (0, 0, 139) | #00008B |
115 | NavyBlue | (0, 0, 128) | #000080 |
116 | MidnightBlue | (25, 25, 112) | #191970 |
117 | CornflowerBlue | (100, 149, 237) | #6495ED |
118 | Mediumblue | (0, 0, 205) | #0000CD |
119 | PowderBlue | (176, 224, 230) | #B0E0E6 |
120 | DodgerBlue1 | (30, 144, 255) | #1E90FF |
121 | DodgerBlue2 | (28, 134, 238) | #1C86EE |
122 | DodgerBlue3 | (24, 116, 205) | #1874CD |
123 | DodgerBlue4 | (16, 78, 139) | #104E8B |
124 | SteelBlue | (70, 130, 180) | #4682B4 |
125 | SteelBlue1 | (99, 184, 255) | #63B8FF |
126 | SteelBlue2 | (92, 172, 238) | #5CACEB |
127 | SteelBlue3 | (79, 148, 205) | #4F94CD |
128 | SteelBlue4 | (54, 100, 139) | #36648B |
129 | DeepSkyBlue1 | (0, 191, 255) | #00BFFF |
130 | DeepSkyBlue2 | (0, 178, 238) | #00B2EE |
131 | DeepSkyBlue3 | (0, 154, 205) | #009ACD |
132 | DeepSkyBlue4 | (0, 104, 139) | #00688B |
133 | SkyBlue | (135, 206, 235) | #87CEEB |
134 | SkyBlue1 | (135, 206, 255) | #87CEFF |
135 | SkyBlue2 | (126, 192, 238) | #7EC0EE |
136 | SkyBlue3 | (108, 166, 205) | #6CA6CD |
137 | SkyBlue4 | (74, 112, 139) | #4A708B |
138 | LightSkyBlue | (135, 206, 250) | #87CEFA |
139 | LightSkyBlue1 | (176, 226, 255) | #B0E2FF |
140 | LightSkyBlue2 | (164, 211, 238) | #A4D3EE |
141 | LightSkyBlue3 | (141, 182, 205) | #8DB6CD |
142 | LightSkyBlue4 | (96, 123, 139) | #607B8B |
143 | LightSteelBlue | (176, 196, 222) | #B0C4DE |
144 | LightSteelBlue1 | (202, 225, 255) | #CAE1FF |
145 | LightSteelBlue2 | (188, 210, 238) | #BCD2EE |
146 | LightSteelBlue3 | (162, 181, 205) | #A2B5CD |
147 | LightSteelBlue4 | (110, 123, 139) | #6E7B8B |
148 | LightBlue | (173, 216, 230) | #ADD8E6 |
149 | LightBlue1 | (191, 239, 255) | #BFEFFF |
150 | LightBlue2 | (178, 223, 238) | #B2DFEE |
151 | LightBlue3 | (154, 192, 205) | #9AC0CD |
152 | LightBlue4 | (104, 131, 139) | #68838B |
153 | LightCyan1 | (224, 255, 255) | #E0FFFF |
154 | LightCyan2 | (209, 238, 238) | #D1EEEE |
155 | LightCyan3 | (180, 205, 205) | #B4CDCD |
156 | LightCyan4 | (122, 139, 139) | #7A8B8B |
157 | CadetBlue | (95, 158, 160) | #5F9EA0 |
158 | CadetBlue1 | (152, 245, 255) | #98F5FF |
159 | CadetBlue2 | (142, 229, 238) | #8EE5EE |
160 | CadetBlue3 | (122, 197, 205) | #7AC5CD |
161 | CadetBlue4 | (83, 134, 139) | #53868B |
162 | PaleTurquoise | (175, 238, 238) | #AFEEEE |
163 | PaleTurquoise1 | (187, 255, 255) | #BBFFFF |
164 | PaleTurquoise2 | (174, 238, 238) | #AEEEEE |
165 | PaleTurquoise3 | (150, 205, 205) | #96CDCD |
166 | PaleTurquoise4 | (102, 139, 139) | #668B8B |
167 | MediumTurquoise | (72, 209, 204) | #48D1CC |
168 | DarkTurquoise | (0, 206, 209) | #00CED1 |
169 | Turquoise | (64, 224, 208) | #40E0D0 |
170 | Turquoise1 | (0, 245, 255) | #00F5FF |
171 | Turquoise2 | (0, 229, 238) | #00E5EE |
172 | Turquoise3 | (0, 197, 205) | #00C5CD |
173 | Turquoise4 | (0, 134, 139) | #00868B |
174 | Cyan1 | (0, 255, 255) | #00FFFF |
175 | Cyan2 | (0, 238, 238) | #00EEEE |
176 | Cyan3 | (0, 205, 205) | #00CDCD |
177 | DarkCyan | (0, 139, 139) | #008B8B |
178 | Aquamarine1 | (127, 255, 212) | #7FFFD4 |
179 | Aquamarine2 | (118, 238, 198) | #76EEC6 |
180 | Aquamarine3 | (102, 205, 170) | #66CDAA |
181 | Aquamarine4 | (69, 139, 116) | #458B74 |
182 | DarkSeaGreen | (143, 188, 143) | #8FBC8F |
183 | DarkSeaGreen1 | (193, 255, 193) | #C1FFC1 |
184 | DarkSeaGreen2 | (180, 238, 180) | #B4EEB4 |
185 | DarkSeaGreen3 | (155, 205, 155) | #9BCD9B |
186 | DarkSeaGreen4 | (105, 139, 105) | #698B69 |
187 | SeaGreen | (46, 139, 87) | #2E8B57 |
188 | SeaGreen1 | (84, 255, 159) | #54FF9F |
189 | SeaGreen2 | (78, 238, 148) | #4EEE94 |
190 | SeaGreen3 | (67, 205, 128) | #43CD80 |
191 | PaleGreen | (152, 251, 152) | #98FB98 |
192 | PaleGreen1 | (154, 255, 154) | #9AFF9A |
193 | PaleGreen2 | (144, 238, 144) | #90EE90 |
194 | PaleGreen3 | (124, 205, 124) | #7CCD7C |
195 | PaleGreen4 | (84, 139, 84) | #548B54 |
196 | SpringGreen1 | (0, 255, 127) | #00FF7F |
197 | SpringGreen2 | (0, 238, 118) | #00EE76 |
198 | SpringGreen3 | (0, 205, 102) | #00CD66 |
199 | SpringGreen4 | (0, 139, 69) | #008B45 |
200 | Green1 | (0, 255, 0) | #00FF00 |
201 | Green2 | (0, 238, 0) | #00EE00 |
202 | Green3 | (0, 205, 0) | #00CD00 |
203 | Green4 | (0, 139, 0) | #008B00 |
204 | Navy | (0, 100, 0) | #006400 |
205 | MediumSeaGreen | (60, 179, 113) | #3CB371 |
206 | LightSeaGreen | (32, 178, 170) | #20B2AA |
207 | LightGreen | (144, 238, 144) | #90EE90 |
208 | LawnGreen | (124, 252, 0) | #7CFC00 |
209 | MediumSpringGreen | (0, 250, 154) | #00FA9A |
210 | GreenYellow | (173, 255, 47) | #ADFF2F |
211 | LimeGreen | (50, 205, 50) | #32CD32 |
212 | YellowGreen | (154, 205, 50) | #9ACD32 |
213 | ForestGreen | (34, 139, 34) | #228B22 |
214 | Chartreuse1 | (127, 255, 0) | #7FFF00 |
215 | Chartreuse2 | (118, 238, 0) | #76EE00 |
216 | Chartreuse3 | (102, 205, 0) | #66CD00 |
217 | Chartreuse4 | (69, 139, 0) | #458B00 |
218 | OliveDrab | (107, 142, 35) | #6B8E23 |
219 | OliveDrab1 | (192, 255, 62) | #C0FF3E |
220 | OliveDrab2 | (179, 238, 58) | #B3EE3A |
221 | OliveDrab3 | (154, 205, 50) | #9ACD32 |
222 | OliveDrab4 | (105, 139, 34) | #698B22 |
223 | DarkOliveGreen | (85, 107, 47) | #556B2F |
224 | DarkOliveGreen1 | (202, 255, 112) | #CAFF70 |
225 | DarkOliveGreen2 | (188, 238, 104) | #BCEE68 |
226 | DarkOliveGreen3 | (162, 205, 90) | #A2CD5A |
227 | DarkOliveGreen4 | (110, 139, 61) | #6E8B3D |
228 | Khaki1 | (255, 246, 143) | #FFF68F |
229 | Khaki2 | (238, 230, 133) | #EEE685 |
230 | Khaki3 | (205, 198, 115) | #CDC673 |
231 | Khaki4 | (139, 134, 78) | #8B864E |
232 | DarkKhaki | (189, 183, 107) | #BDB76B |
233 | LightGoldenrod | (238, 221, 130) | #EEDD82 |
234 | LightGoldenrod1 | (255, 236, 139) | #FFEC8B |
235 | LightGoldenrod2 | (238, 220, 130) | #EEDC82 |
236 | LightGoldenrod3 | (205, 190, 112) | #CDBE70 |
237 | LightGoldenrod4 | (139, 129, 76) | #8B814C |
238 | LightYellow1 | (255, 255, 224) | #FFFFE0 |
239 | LightYellow2 | (238, 238, 209) | #EEEED1 |
240 | LightYellow3 | (205, 205, 180) | #CDCDB4 |
241 | LightYellow4 | (139, 139, 122) | #8B8B7A |
242 | Yellow1 | (255, 255, 0) | #FFFF00 |
243 | Yellow2 | (238, 238, 0) | #EEEE00 |
244 | Yellow3 | (205, 205, 0) | #CDCD00 |
245 | Yellow4 | (139, 139, 0) | #8B8B00 |
246 | Gold1 | (255, 215, 0) | #FFD700 |
247 | Gold2 | (238, 201, 0) | #EEC900 |
248 | Gold3 | (205, 173, 0) | #CDAD00 |
249 | Gold4 | (139, 117, 0) | #8B7500 |
250 | Goldenrod | (218, 165, 32) | #DAA520 |
251 | Goldenrod1 | (255, 193, 37) | #FFC125 |
252 | Goldenrod2 | (238, 180, 34) | #EEB422 |
253 | Goldenrod3 | (205, 155, 29) | #CD9B1D |
254 | Goldenrod4 | (139, 105, 20) | #8B6914 |
255 | DarkGoldenrod | (184, 134, 11) | #B8860B |
256 | DarkGoldenrod1 | (255, 185, 15) | #FFB90F |
257 | DarkGoldenrod2 | (238, 173, 14) | #EEAD0E |
258 | DarkGoldenrod3 | (205, 149, 12) | #CD950C |
259 | DarkGoldenrod4 | (139, 101, 8) | #8B6508 |
260 | RosyBrown | (188, 143, 143) | #BC8F8F |
261 | RosyBrown1 | (255, 193, 193) | #FFC1C1 |
262 | RosyBrown2 | (238, 180, 180) | #EEB4B4 |
263 | RosyBrown3 | (205, 155, 155) | #CD9B9B |
264 | RosyBrown4 | (139, 105, 105) | #8B6969 |
265 | IndianRed | (205, 92, 92) | #CD5C5C |
266 | IndianRed1 | (255, 106, 106) | #FF6A6A |
267 | IndianRed2 | (238, 99, 99) | #EE6363 |
268 | IndianRed3 | (205, 85, 85) | #CD5555 |
269 | IndianRed4 | (139, 58, 58) | #8B3A3A |
270 | Sienna1 | (255, 130, 71) | #FF8247 |
271 | Sienna2 | (238, 121, 66) | #EE7942 |
272 | Sienna3 | (205, 104, 57) | #CD6839 |
273 | Sienna4 | (139, 71, 38) | #8B4726 |
274 | Burlywood | (222, 184, 135) | #DEB887 |
275 | Burlywood1 | (255, 211, 155) | #FFD39B |
276 | Burlywood2 | (238, 197, 145) | #EEC591 |
277 | Burlywood3 | (205, 170, 125) | #CDAA7D |
278 | Burlywood4 | (139, 115, 85) | #8B7355 |
279 | Wheat | (245, 222, 179) | #F5DEB3 |
280 | Wheat1 | (255, 231, 186) | #FFE7BA |
281 | Wheat2 | (238, 216, 174) | #EED8AE |
282 | Wheat3 | (205, 186, 150) | #CDBA96 |
283 | Wheat4 | (139, 126, 102) | #8B7E66 |
284 | Tan | (210, 180, 140) | #D2B48C |
285 | Tan1 | (255, 165, 79) | #FFA54F |
286 | Tan2 | (238, 154, 73) | #EE9A49 |
287 | Tan3 | (205, 133, 63) | #CD853F |
288 | Tan4 | (139, 90, 43) | #8B5A2B |
289 | Chocolate | (210, 105, 30) | #D2691E |
290 | Chocolate1 | (255, 127, 36) | #FF7F24 |
291 | Chocolate2 | (238, 118, 33) | #EE7621 |
292 | Chocolate3 | (205, 102, 29) | #CD661D |
293 | Chocolate4 | (139, 69, 19) | #8B4513 |
294 | Firebrick | (178, 34, 34) | #B22222 |
295 | Firebrick1 | (255, 48, 48) | #FF3030 |
296 | Firebrick2 | (238, 44, 44) | #EE2C2C |
297 | Firebrick3 | (205, 38, 38) | #CD2626 |
298 | Firebrick4 | (139, 26, 26) | #8B1A1A |
299 | Brown | (165, 42, 42) | #A52A2A |
300 | Brown1 | (255, 64, 64) | #FF4040 |
301 | Brown2 | (238, 59, 59) | #EE3B3B |
302 | Brown3 | (205, 51, 51) | #CD3333 |
303 | Brown4 | (139, 35, 35) | #8B2323 |
304 | Salmon | (250, 128, 114) | #FA8072 |
305 | Salmon1 | (255, 140, 105) | #FF8C69 |
306 | Salmon2 | (238, 130, 98) | #EE8262 |
307 | Salmon3 | (205, 112, 84) | #CD7054 |
308 | Salmon4 | (139, 76, 57) | #8B4C39 |
309 | LightSalmon1 | (255, 160, 122) | #FFA07A |
310 | LightSalmon2 | (238, 149, 114) | #EE9572 |
311 | LightSalmon3 | (205, 129, 98) | #CD8162 |
312 | LightSalmon4 | (139, 87, 66) | #8B5742 |
313 | Orange1 | (255, 165, 0) | #FFA500 |
314 | Orange2 | (238, 154, 0) | #EE9A00 |
315 | Orange3 | (205, 133, 0) | #CD8500 |
316 | Orange4 | (139, 90, 0) | #8B5A00 |
317 | DarkOrange | (255, 140, 0) | #FF8C00 |
318 | DarkOrange1 | (255, 127, 0) | #FF7F00 |
319 | DarkOrange2 | (238, 118, 0) | #EE7600 |
320 | DarkOrange3 | (205, 102, 0) | #CD6600 |
321 | DarkOrange4 | (139, 69, 0) | #8B4500 |
322 | LightCoral | (240, 128, 128) | #F08080 |
323 | Coral | (255, 127, 80) | #FF7F50 |
324 | Coral1 | (255, 114, 86) | #FF7256 |
325 | Coral2 | (238, 106, 80) | #EE6A50 |
326 | Coral3 | (205, 91, 69) | #CD5B45 |
327 | Coral4 | (139, 62, 47) | #8B3E2F |
328 | Tomato1 | (255, 99, 71) | #FF6347 |
329 | Tomato2 | (238, 92, 66) | #EE5C42 |
330 | Tomato3 | (205, 79, 57) | #CD4F39 |
331 | Tomato4 | (139, 54, 38) | #8B3626 |
332 | OrangeRed1 | (255, 69, 0) | #FF4500 |
333 | OrangeRed2 | (238, 64, 0) | #EE4000 |
334 | OrangeRed3 | (205, 55, 0) | #CD3700 |
335 | OrangeRed4 | (139, 37, 0) | #8B2500 |
336 | Red1 | (255, 0, 0) | #FF0000 |
337 | Red2 | (238, 0, 0) | #EE0000 |
338 | Red3 | (205, 0, 0) | #CD0000 |
339 | DarkRed | (139, 0, 0) | #8B0000 |
340 | Rouge | (198, 0, 0) | #C60000 |
341 | Crimson | (220, 20, 60) | #DC143C |
342 | DeepPink1 | (255, 20, 147) | #FF1493 |
343 | DeepPink2 | (238, 18, 137) | #EE1289 |
344 | DeepPink3 | (205, 16, 118) | #CD1076 |
345 | DeepPink4 | (139, 10, 80) | #8B0A50 |
346 | HotPink | (255, 105, 180) | #FF69B4 |
347 | HotPink1 | (255, 110, 180) | #FF6EB4 |
348 | HotPink2 | (238, 106, 167) | #EE6AA7 |
349 | HotPink3 | (205, 96, 144) | #CD6090 |
350 | HotPink4 | (139, 58, 98) | #8B3A62 |
351 | Pink | (255, 192, 203) | #FFC0CB |
352 | Pink1 | (255, 181, 197) | #FFB5C5 |
353 | Pink2 | (238, 169, 184) | #EEA9B8 |
354 | Pink3 | (205, 145, 158) | #CD919E |
355 | Pink4 | (139, 99, 108) | #8B636C |
356 | LightPink | (255, 182, 193) | #FFB6C1 |
357 | LightPink1 | (255, 174, 185) | #FFAEB9 |
358 | LightPink2 | (238, 162, 173) | #EEA2AD |
359 | LightPink3 | (205, 140, 149) | #CD8C95 |
360 | LightPink4 | (139, 95, 101) | #8B5F65 |
361 | PaleVioletRed | (219, 112, 147) | #DB7093 |
362 | PaleVioletRed1 | (255, 130, 171) | #FF82AB |
363 | PaleVioletRed2 | (238, 121, 159) | #EE799F |
364 | PaleVioletRed3 | (205, 104, 137) | #CD6889 |
365 | PaleVioletRed4 | (139, 71, 93) | #8B475D |
366 | Maroon | (176, 48, 96) | #B03060 |
367 | Maroon1 | (255, 52, 179) | #FF34B3 |
368 | Maroon2 | (238, 48, 167) | #EE30A7 |
369 | Maroon3 | (205, 41, 144) | #CD2990 |
370 | Maroon4 | (139, 28, 98) | #8B1C62 |
371 | VioletRed | (208, 32, 144) | #D02090 |
372 | VioletRed1 | (255, 62, 150) | #FF3E96 |
373 | VioletRed2 | (238, 58, 140) | #EE3A8C |
374 | VioletRed3 | (205, 50, 120) | #CD3278 |
375 | VioletRed4 | (139, 34, 82) | #8B2252 |
376 | Magenta1 | (255, 0, 255) | #FF00FF |
377 | Magenta2 | (238, 0, 238) | #EE00EE |
378 | Magenta3 | (205, 0, 205) | #CD00CD |
379 | DarkMagenta | (139, 0, 139) | #8B008B |
380 | Orchid | (218, 112, 214) | #DA70D6 |
381 | Orchid1 | (255, 131, 250) | #FF83FA |
382 | Orchid2 | (238, 122, 233) | #EE7AE9 |
383 | Orchid3 | (205, 105, 201) | #CD69C9 |
384 | Orchid4 | (139, 71, 137) | #8B4789 |
385 | Plum | (221, 160, 221) | #DDA0DD |
386 | Plum1 | (255, 187, 255) | #FFBBFF |
387 | Plum2 | (238, 174, 238) | #EEAEEE |
388 | Plum3 | (205, 150, 205) | #CD96CD |
389 | Plum4 | (139, 102, 139) | #8B668B |
390 | MediumOrchid | (186, 85, 211) | #BA55D3 |
391 | MediumOrchid1 | (224, 102, 255) | #E066FF |
392 | MediumOrchid2 | (209, 95, 238) | #D15FEE |
393 | MediumOrchid3 | (180, 82, 205) | #B452CD |
394 | MediumOrchid4 | (122, 55, 139) | #7A378B |
395 | DarkOrchid | (153, 50, 204) | #9932CC |
396 | DarkOrchid1 | (191, 62, 255) | #BF3EFF |
397 | DarkOrchid2 | (178, 58, 238) | #B23AEE |
398 | DarkOrchid3 | (154, 50, 205) | #9A32CD |
399 | DarkOrchid4 | (104, 34, 139) | #68228B |
400 | MediumVioletRed | (199, 21, 133) | #C71585 |
401 | Violet | (238, 130, 238) | #EE82EE |
402 | DarkViolet | (148, 0, 211) | #9400D3 |
403 | BlueViolet | (138, 43, 226) | #8A2BE2 |
404 | Purple | (128, 0, 128) | #800080 |
405 | Purple1 | (160, 32, 240) | #A020F0 |
406 | Purple2 | (155, 48, 255) | #9B30FF |
407 | Purple3 | (145, 44, 238) | #912CEE |
408 | Purple4 | (125, 38, 205) | #7D26CD |
409 | Purple5 | (85, 26, 139) | #551A8B |
410 | MediumPurple | (147, 112, 219) | #9370DB |
411 | MediumPurple1 | (171, 130, 255) | #AB82FF |
412 | MediumPurple2 | (159, 121, 238) | #9F79EE |
413 | MediumPurple3 | (137, 104, 205) | #8968CD |
414 | MediumPurple4 | (93, 71, 139) | #5D478B |
415 | thistle | (216, 191, 216) | #D8BFD8 |
416 | Thistle1 | (255, 225, 255) | #FFE1FF |
417 | Thistle2 | (238, 210, 238) | #EED2EE |
418 | Thistle3 | (205, 181, 205) | #CDB5CD |
419 | Thistle4 | (139, 123, 139) | #8B7B8B |
420 | AntiqueGold | (221, 196, 136) | #DDC488 |
421 | AgedPaper | (236, 171, 83) | #ECAB53 |
422 | Silver | (192, 192, 192) | #C0C0C0 |
423 | Dark Cyan | (0, 128, 128) | #008080 |
424 | Peach-orange | (255, 204, 153) | #FFCC99 |
Giải Thích Các Hệ Mã Màu Phổ Biến Nhất
Để sử dụng màu sắc hiệu quả, bạn cần hiểu rõ các hệ màu cơ bản. Mỗi hệ màu có cách biểu diễn và ứng dụng riêng.
1. Mã Màu HEX (Hexadecimal Color Code)
Đây là hệ màu phổ biến nhất trong thiết kế web.
- Cấu trúc: Bắt đầu bằng dấu
#
và theo sau là 6 ký tự (bao gồm số từ 0-9 và chữ từ A-F). - Nguyên lý: 6 ký tự này đại diện cho 3 cặp giá trị của Đỏ (Red), Xanh lá (Green), và Xanh dương (Blue). Ví dụ:
#RRGGBB
. - Ví dụ:
#FFFFFF
là màu trắng,#000000
là màu đen, và#FF5733
là một màu cam sáng. - Ứng dụng: Được sử dụng rộng rãi trong bảng màu HTML và CSS vì tính ngắn gọn.
2. Mã Màu RGB và RGBA
- Cấu trúc RGB:
rgb(red, green, blue)
. Mỗi giá trị màu sắc sẽ nằm trong khoảng từ 0 đến 255. - Ví dụ:
rgb(255, 255, 255)
là màu trắng. - Cấu trúc RGBA: Đây là phiên bản mở rộng của RGB, có thêm một giá trị “Alpha” (A) để quy định độ trong suốt (transparency). Giá trị Alpha chạy từ 0.0 (hoàn toàn trong suốt) đến 1.0 (không trong suốt).
- Ví dụ:
rgba(255, 87, 51, 0.5)
sẽ tạo ra màu cam sáng nhưng có độ trong suốt 50%. - Ứng dụng: Rất hữu ích khi cần tạo các lớp màu phủ (overlay) hoặc các hiệu ứng trong suốt trên website.
3. Hệ Màu HSL và HSLA
Đây là hệ màu được các nhà thiết kế ưa chuộng vì tính trực quan.
- Cấu trúc HSL:
hsl(hue, saturation, lightness)
.- Hue (Tông màu): Là một giá trị góc trên vòng tròn màu (từ 0 đến 360). 0 là đỏ, 120 là xanh lá, 240 là xanh dương.
- Saturation (Độ bão hòa): Tỷ lệ phần trăm (0% – 100%). 0% là màu xám, 100% là màu sắc rực rỡ nhất.
- Lightness (Độ sáng): Tỷ lệ phần trăm (0% – 100%). 0% là màu đen, 50% là màu bình thường, 100% là màu trắng.
- Cấu trúc HSLA: Tương tự HSL nhưng có thêm giá trị Alpha để chỉ định độ trong suốt.
- Ứng dụng: Cực kỳ linh hoạt khi bạn muốn tạo các biến thể sáng hơn, tối hơn hoặc ít bão hòa hơn của một màu gốc mà không cần thay đổi hoàn toàn mã màu.
Tâm Lý Học Màu Sắc & Ứng Dụng Trong Thiết Kế
Việc chọn một bảng màu không chỉ là sở thích. Mỗi màu sắc đều mang một ý nghĩa và tác động đến tâm lý người xem.
- Màu Đỏ: Năng lượng, đam mê, sự nguy hiểm, tình yêu. Thường dùng cho các nút kêu gọi hành động (CTA), thông báo khẩn cấp.
- Màu Xanh dương: Sự tin tưởng, bình yên, chuyên nghiệp, ổn định. Rất phổ biến cho các thương hiệu tài chính, công nghệ.
- Màu Xanh lá: Thiên nhiên, sức khỏe, sự phát triển, tiền bạc. Thường dùng cho các sản phẩm organic, du lịch, môi trường.
- Màu Vàng: Lạc quan, vui vẻ, sáng tạo, cảnh báo. Thu hút sự chú ý nhưng nên dùng một cách tiết chế.
- Màu Đen: Sang trọng, quyền lực, tinh tế, huyền bí.
- Màu Trắng: Tối giản, sạch sẽ, tinh khôi. Tạo ra không gian và sự thoáng đãng trong thiết kế.
Công Cụ và Mẹo Phối Màu Chuyên Nghiệp
Sở hữu bảng mã màu CSS là bước đầu tiên. Bước tiếp theo là phối hợp chúng một cách hài hòa.
Top 5 Công Cụ Phối Màu Online Miễn Phí
- Adobe Color: Công cụ mạnh mẽ từ Adobe, cho phép tạo bảng màu theo nhiều quy tắc khác nhau (tương đồng, bổ sung, tam giác…).
- Coolors.co: Rất dễ sử dụng, chỉ cần nhấn phím cách để tạo ra các bảng màu ngẫu nhiên tuyệt đẹp.
- ColorHunt: Một bộ sưu tập các bảng màu được tuyển chọn bởi cộng đồng, giúp bạn nhanh chóng tìm thấy cảm hứng.
- Canva Color Palette Generator: Tải ảnh của bạn lên và công cụ này sẽ tự động trích xuất một bảng màu từ hình ảnh đó.
- Paletton: Công cụ chuyên sâu giúp bạn xem trước các biến thể của một bảng màu.
Mẹo Vàng: Áp Dụng Quy Tắc Phối Màu 60-30-10
Đây là một quy tắc kinh điển trong thiết kế nội thất nhưng cũng cực kỳ hiệu quả cho thiết kế web.
- 60% Màu chủ đạo: Màu sắc chiếm phần lớn không gian website của bạn (ví dụ: màu nền).
- 30% Màu thứ cấp: Màu sắc bổ trợ, tạo ra sự tương phản và thu hút thị giác (ví dụ: màu của các thẻ, khu vực nội dung).
- 10% Màu nhấn: Màu sắc nổi bật nhất, dùng cho các yếu tố quan trọng cần thu hút sự chú ý (ví dụ: nút CTA, link, icon quan trọng).
Câu Hỏi Thường Gặp (FAQ)
1. Làm sao để lấy mã màu từ một hình ảnh?
Bạn có thể dùng các công cụ online như Canva Color Palette Generator
hoặc các extension trên trình duyệt như ColorZilla
để chấm và lấy mã màu từ bất kỳ đâu trên màn hình.
2. Bảng màu HTML và bảng màu CSS có khác nhau không?
Về cơ bản là một. Cả HTML và CSS đều sử dụng chung các hệ màu như HEX, RGB, HSL và tên màu tiếng Anh. CSS là nơi bạn áp dụng các mã màu này để tạo kiểu cho các phần tử HTML.
3. Màu an toàn cho web (Web-Safe Colors) còn quan trọng không?
Trước đây, khi màn hình máy tính chỉ hiển thị được 256 màu, người ta phải dùng “màu an toàn” để đảm bảo màu sắc hiển thị nhất quán. Ngày nay, với công nghệ màn hình hiện đại, điều này không còn là vấn đề lớn. Bạn có thể tự do sử dụng toàn bộ dải màu.
4. Sự khác biệt giữa `color` và `background-color` trong CSS?
color
dùng để quy định màu sắc của chữ viết (văn bản). Trong khi đó, background-color
dùng để quy định màu nền của một phần tử.
Kết Luận
Việc nắm vững bảng mã màu và cách ứng dụng chúng là một kỹ năng cốt lõi của bất kỳ ai làm việc trong lĩnh vực sáng tạo số. Hy vọng rằng, với bảng tra cứu chi tiết và những kiến thức được tổng hợp trong bài viết này, bạn sẽ không còn cảm thấy bối rối khi làm việc với màu sắc.
Hãy đánh dấu trang này lại để sử dụng như một công cụ tra cứu hàng ngày. Nếu bạn có bất kỳ câu hỏi hay công cụ nào hay ho muốn chia sẻ, đừng ngần ngại để lại bình luận bên dưới nhé!