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

  1. 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…).
  2. 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.
  3. 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.
  4. 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 đó.
  5. 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é!