Bảng Màu Code HTML, HEX, RGB, CMYK, CSS Chuẩn Thiết Kế Và In Ấn

8:30 sáng
Tháng 10 10, 2026

Bài viết dưới đây In Sắc Màu chia sẻ đến bạn đọc bảng màu code đầy đủ được sử dụng phổ biến trong thiết kế. Ngoài ra còn còn có màu sắc chủ đạo trên logo của một số trang mạng xã hội và ứng dụng nổi tiếng toàn cầu. Bạn đọc cũng có thể tìm hiểu cách phân biệt các hệ mã màu chuẩn phổ biến hiện nay và những phần mềm và công cụ lấy mã màu code chuẩn xác.

Bảng màu code là gì?

Bảng mã màu là tập hợp các màu sắc dưới dạng ký hiệu số hoặc chữ cái để máy tính đọc các và tái tạo lại màu sắc tương ứng trên điểm ảnh, giúp mắt người nhìn thấy các màu sắc khác nhau trên màn hình.

Một bảng mã màu chuẩn luôn bao gồm các thành phần gồm tên màu tiếng Anh chuẩn hóa, mã HTML, mã khai báo CSS, cùng các hệ số màu RGB và hệ mực CMYK.

Vai trò của mã màu trong thiết kế in ấn:

Trong thiết kế in ấn, việc sử dụng bảng code màu giúp loại bỏ hoàn toàn sự cảm tính khi thiết kế. Ví dụ như, thay vì yêu cầu designer sử dụng màu xanh dương đậm, bạn chỉ cần cung cấp một đoạn mã màu cụ thể để mẫu thiết kế có màu chính xác nhất.

Tổng hợp bảng màu code phổ biến

Bảng mã màu CMYK sử dụng trong in ấn

STT	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	227	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	137	`#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	175	74	146	`#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`

Bảng màu đầy đủ trong thiết kế

Dưới đây là bảng tổng hợp đầu đủ các màu chuẩn CSS dùng trong thiết kế được chia theo 11 nhóm, kèm HEX, RGB, HSL và CMYK. Giá trị CMYK được quy đổi theo công thức toán học để bạn đọc tiện tham khảo.

Lưu ý: Màu in thực tế còn phụ thuộc giấy, mực, máy in và hồ sơ màu của nhà in.

Màu hồng (6 màu)

Tên CSS	HEX	RGB	HSL	CMYK
Pink	`#FFC0CB`	255, 192, 203	350°, 100%, 88%	0, 25, 20, 0
LightPink	`#FFB6C1`	255, 182, 193	351°, 100%, 86%	0, 29, 24, 0
HotPink	`#FF69B4`	255, 105, 180	330°, 100%, 71%	0, 59, 29, 0
DeepPink	`#FF1493`	255, 20, 147	328°, 100%, 54%	0, 92, 42, 0
PaleVioletRed	`#DB7093`	219, 112, 147	340°, 60%, 65%	0, 49, 33, 14
MediumVioletRed	`#C71585`	199, 21, 133	322°, 81%, 43%	0, 89, 33, 22

Màu đỏ (9 màu)

Tên CSS	HEX	RGB	HSL	CMYK
LightSalmon	`#FFA07A`	255, 160, 122	17°, 100%, 74%	0, 37, 52, 0
Salmon	`#FA8072`	250, 128, 114	6°, 93%, 71%	0, 49, 54, 2
DarkSalmon	`#E9967A`	233, 150, 122	15°, 72%, 70%	0, 36, 48, 9
LightCoral	`#F08080`	240, 128, 128	0°, 79%, 72%	0, 47, 47, 6
IndianRed	`#CD5C5C`	205, 92, 92	0°, 53%, 58%	0, 55, 55, 20
Crimson	`#DC143C`	220, 20, 60	348°, 83%, 47%	0, 91, 73, 14
FireBrick	`#B22222`	178, 34, 34	0°, 68%, 42%	0, 81, 81, 30
DarkRed	`#8B0000`	139, 0, 0	0°, 100%, 27%	0, 100, 100, 45
Red	`#FF0000`	255, 0, 0	0°, 100%, 50%	0, 100, 100, 0

Màu cam (5 màu)

Tên CSS	HEX	RGB	HSL	CMYK
OrangeRed	`#FF4500`	255, 69, 0	16°, 100%, 50%	0, 73, 100, 0
Tomato	`#FF6347`	255, 99, 71	9°, 100%, 64%	0, 61, 72, 0
Coral	`#FF7F50`	255, 127, 80	16°, 100%, 66%	0, 50, 69, 0
DarkOrange	`#FF8C00`	255, 140, 0	33°, 100%, 50%	0, 45, 100, 0
Orange	`#FFA500`	255, 165, 0	39°, 100%, 50%	0, 35, 100, 0

Màu vàng (11 màu)

Tên CSS	HEX	RGB	HSL	CMYK
Yellow	`#FFFF00`	255, 255, 0	60°, 100%, 50%	0, 0, 100, 0
LightYellow	`#FFFFE0`	255, 255, 224	60°, 100%, 94%	0, 0, 12, 0
LemonChiffon	`#FFFACD`	255, 250, 205	54°, 100%, 90%	0, 2, 20, 0
LightGoldenRodYellow	`#FAFAD2`	250, 250, 210	60°, 80%, 90%	0, 0, 16, 2
PapayaWhip	`#FFEFD5`	255, 239, 213	37°, 100%, 92%	0, 6, 16, 0
Moccasin	`#FFE4B5`	255, 228, 181	38°, 100%, 85%	0, 11, 29, 0
PeachPuff	`#FFDAB9`	255, 218, 185	28°, 100%, 86%	0, 15, 27, 0
PaleGoldenRod	`#EEE8AA`	238, 232, 170	55°, 67%, 80%	0, 3, 29, 7
Khaki	`#F0E68C`	240, 230, 140	54°, 77%, 75%	0, 4, 42, 6
DarkKhaki	`#BDB76B`	189, 183, 107	56°, 38%, 58%	0, 3, 43, 26
Gold	`#FFD700`	255, 215, 0	51°, 100%, 50%	0, 16, 100, 0

Màu nâu (17 màu)

Tên CSS	HEX	RGB	HSL	CMYK
Cornsilk	`#FFF8DC`	255, 248, 220	48°, 100%, 93%	0, 3, 14, 0
BlanchedAlmond	`#FFEBCD`	255, 235, 205	36°, 100%, 90%	0, 8, 20, 0
Bisque	`#FFE4C4`	255, 228, 196	33°, 100%, 88%	0, 11, 23, 0
NavajoWhite	`#FFDEAD`	255, 222, 173	36°, 100%, 84%	0, 13, 32, 0
Wheat	`#F5DEB3`	245, 222, 179	39°, 77%, 83%	0, 9, 27, 4
BurlyWood	`#DEB887`	222, 184, 135	34°, 57%, 70%	0, 17, 39, 13
Tan	`#D2B48C`	210, 180, 140	34°, 44%, 69%	0, 14, 33, 18
RosyBrown	`#BC8F8F`	188, 143, 143	0°, 25%, 65%	0, 24, 24, 26
SandyBrown	`#F4A460`	244, 164, 96	28°, 87%, 67%	0, 33, 61, 4
GoldenRod	`#DAA520`	218, 165, 32	43°, 74%, 49%	0, 24, 85, 15
DarkGoldenRod	`#B8860B`	184, 134, 11	43°, 89%, 38%	0, 27, 94, 28
Peru	`#CD853F`	205, 133, 63	30°, 59%, 53%	0, 35, 69, 20
Chocolate	`#D2691E`	210, 105, 30	25°, 75%, 47%	0, 50, 86, 18
SaddleBrown	`#8B4513`	139, 69, 19	25°, 76%, 31%	0, 50, 86, 45
Sienna	`#A0522D`	160, 82, 45	19°, 56%, 40%	0, 49, 72, 37
Brown	`#A52A2A`	165, 42, 42	0°, 59%, 41%	0, 75, 75, 35
Maroon	`#800000`	128, 0, 0	0°, 100%, 25%	0, 100, 100, 50

Màu xanh lá (20 màu)

Tên CSS	HEX	RGB	HSL	CMYK
DarkOliveGreen	`#556B2F`	85, 107, 47	82°, 39%, 30%	21, 0, 56, 58
Olive	`#808000`	128, 128, 0	60°, 100%, 25%	0, 0, 100, 50
OliveDrab	`#6B8E23`	107, 142, 35	80°, 60%, 35%	25, 0, 75, 44
YellowGreen	`#9ACD32`	154, 205, 50	80°, 61%, 50%	25, 0, 76, 20
LimeGreen	`#32CD32`	50, 205, 50	120°, 61%, 50%	76, 0, 76, 20
Lime	`#00FF00`	0, 255, 0	120°, 100%, 50%	100, 0, 100, 0
LawnGreen	`#7CFC00`	124, 252, 0	90°, 100%, 49%	51, 0, 100, 1
Chartreuse	`#7FFF00`	127, 255, 0	90°, 100%, 50%	50, 0, 100, 0
GreenYellow	`#ADFF2F`	173, 255, 47	84°, 100%, 59%	32, 0, 82, 0
SpringGreen	`#00FF7F`	0, 255, 127	150°, 100%, 50%	100, 0, 50, 0
MediumSpringGreen	`#00FA9A`	0, 250, 154	157°, 100%, 49%	100, 0, 38, 2
LightGreen	`#90EE90`	144, 238, 144	120°, 73%, 75%	39, 0, 39, 7
PaleGreen	`#98FB98`	152, 251, 152	120°, 93%, 79%	39, 0, 39, 2
DarkSeaGreen	`#8FBC8F`	143, 188, 143	120°, 25%, 65%	24, 0, 24, 26
MediumAquaMarine	`#66CDAA`	102, 205, 170	160°, 51%, 60%	50, 0, 17, 20
MediumSeaGreen	`#3CB371`	60, 179, 113	147°, 50%, 47%	66, 0, 37, 30
SeaGreen	`#2E8B57`	46, 139, 87	146°, 50%, 36%	67, 0, 37, 45
ForestGreen	`#228B22`	34, 139, 34	120°, 61%, 34%	76, 0, 76, 45
Green	`#008000`	0, 128, 0	120°, 100%, 25%	100, 0, 100, 50
DarkGreen	`#006400`	0, 100, 0	120°, 100%, 20%	100, 0, 100, 61

Màu xanh ngọc (cyan) (11 màu)

Tên CSS	HEX	RGB	HSL	CMYK
Aqua	`#00FFFF`	0, 255, 255	180°, 100%, 50%	100, 0, 0, 0
Cyan	`#00FFFF`	0, 255, 255	180°, 100%, 50%	100, 0, 0, 0
LightCyan	`#E0FFFF`	224, 255, 255	180°, 100%, 94%	12, 0, 0, 0
PaleTurquoise	`#AFEEEE`	175, 238, 238	180°, 65%, 81%	26, 0, 0, 7
Aquamarine	`#7FFFD4`	127, 255, 212	160°, 100%, 75%	50, 0, 17, 0
Turquoise	`#40E0D0`	64, 224, 208	174°, 72%, 56%	71, 0, 7, 12
MediumTurquoise	`#48D1CC`	72, 209, 204	178°, 60%, 55%	66, 0, 2, 18
DarkTurquoise	`#00CED1`	0, 206, 209	181°, 100%, 41%	100, 1, 0, 18
CadetBlue	`#5F9EA0`	95, 158, 160	182°, 25%, 50%	41, 1, 0, 37
Teal	`#008080`	0, 128, 128	180°, 100%, 25%	100, 0, 0, 50
DarkCyan	`#008B8B`	0, 139, 139	180°, 100%, 27%	100, 0, 0, 45

Màu xanh dương (15 màu)

Tên CSS	HEX	RGB	HSL	CMYK
LightSteelBlue	`#B0C4DE`	176, 196, 222	214°, 41%, 78%	21, 12, 0, 13
PowderBlue	`#B0E0E6`	176, 224, 230	187°, 52%, 80%	23, 3, 0, 10
LightBlue	`#ADD8E6`	173, 216, 230	195°, 53%, 79%	25, 6, 0, 10
SkyBlue	`#87CEEB`	135, 206, 235	197°, 71%, 73%	43, 12, 0, 8
LightSkyBlue	`#87CEFA`	135, 206, 250	203°, 92%, 75%	46, 18, 0, 2
DeepSkyBlue	`#00BFFF`	0, 191, 255	195°, 100%, 50%	100, 25, 0, 0
DodgerBlue	`#1E90FF`	30, 144, 255	210°, 100%, 56%	88, 44, 0, 0
CornflowerBlue	`#6495ED`	100, 149, 237	219°, 79%, 66%	58, 37, 0, 7
SteelBlue	`#4682B4`	70, 130, 180	207°, 44%, 49%	61, 28, 0, 29
RoyalBlue	`#4169E1`	65, 105, 225	225°, 73%, 57%	71, 53, 0, 12
Blue	`#0000FF`	0, 0, 255	240°, 100%, 50%	100, 100, 0, 0
MediumBlue	`#0000CD`	0, 0, 205	240°, 100%, 40%	100, 100, 0, 20
DarkBlue	`#00008B`	0, 0, 139	240°, 100%, 27%	100, 100, 0, 45
Navy	`#000080`	0, 0, 128	240°, 100%, 25%	100, 100, 0, 50
MidnightBlue	`#191970`	25, 25, 112	240°, 64%, 27%	78, 78, 0, 56

Màu tím (19 màu)

Tên CSS	HEX	RGB	HSL	CMYK
Lavender	`#E6E6FA`	230, 230, 250	240°, 67%, 94%	8, 8, 0, 2
Thistle	`#D8BFD8`	216, 191, 216	300°, 24%, 80%	0, 12, 0, 15
Plum	`#DDA0DD`	221, 160, 221	300°, 47%, 75%	0, 28, 0, 13
Violet	`#EE82EE`	238, 130, 238	300°, 76%, 72%	0, 45, 0, 7
Orchid	`#DA70D6`	218, 112, 214	302°, 59%, 65%	0, 49, 2, 15
Fuchsia	`#FF00FF`	255, 0, 255	300°, 100%, 50%	0, 100, 0, 0
Magenta	`#FF00FF`	255, 0, 255	300°, 100%, 50%	0, 100, 0, 0
MediumOrchid	`#BA55D3`	186, 85, 211	288°, 59%, 58%	12, 60, 0, 17
MediumPurple	`#9370DB`	147, 112, 219	260°, 60%, 65%	33, 49, 0, 14
BlueViolet	`#8A2BE2`	138, 43, 226	271°, 76%, 53%	39, 81, 0, 11
DarkViolet	`#9400D3`	148, 0, 211	282°, 100%, 41%	30, 100, 0, 17
DarkOrchid	`#9932CC`	153, 50, 204	280°, 61%, 50%	25, 75, 0, 20
DarkMagenta	`#8B008B`	139, 0, 139	300°, 100%, 27%	0, 100, 0, 45
Purple	`#800080`	128, 0, 128	300°, 100%, 25%	0, 100, 0, 50
RebeccaPurple	`#663399`	102, 51, 153	270°, 50%, 40%	33, 67, 0, 40
Indigo	`#4B0082`	75, 0, 130	275°, 100%, 25%	42, 100, 0, 49
SlateBlue	`#6A5ACD`	106, 90, 205	248°, 53%, 58%	48, 56, 0, 20
DarkSlateBlue	`#483D8B`	72, 61, 139	248°, 39%, 39%	48, 56, 0, 45
MediumSlateBlue	`#7B68EE`	123, 104, 238	249°, 80%, 67%	48, 56, 0, 7

Màu trắng (17 màu)

Tên CSS	HEX	RGB	HSL	CMYK
White	`#FFFFFF`	255, 255, 255	0°, 0%, 100%	0, 0, 0, 0
Snow	`#FFFAFA`	255, 250, 250	0°, 100%, 99%	0, 2, 2, 0
HoneyDew	`#F0FFF0`	240, 255, 240	120°, 100%, 97%	6, 0, 6, 0
MintCream	`#F5FFFA`	245, 255, 250	150°, 100%, 98%	4, 0, 2, 0
Azure	`#F0FFFF`	240, 255, 255	180°, 100%, 97%	6, 0, 0, 0
AliceBlue	`#F0F8FF`	240, 248, 255	208°, 100%, 97%	6, 3, 0, 0
GhostWhite	`#F8F8FF`	248, 248, 255	240°, 100%, 99%	3, 3, 0, 0
WhiteSmoke	`#F5F5F5`	245, 245, 245	0°, 0%, 96%	0, 0, 0, 4
SeaShell	`#FFF5EE`	255, 245, 238	25°, 100%, 97%	0, 4, 7, 0
Beige	`#F5F5DC`	245, 245, 220	60°, 56%, 91%	0, 0, 10, 4
OldLace	`#FDF5E6`	253, 245, 230	39°, 85%, 95%	0, 3, 9, 1
FloralWhite	`#FFFAF0`	255, 250, 240	40°, 100%, 97%	0, 2, 6, 0
Ivory	`#FFFFF0`	255, 255, 240	60°, 100%, 97%	0, 0, 6, 0
AntiqueWhite	`#FAEBD7`	250, 235, 215	34°, 78%, 91%	0, 6, 14, 2
Linen	`#FAF0E6`	250, 240, 230	30°, 67%, 94%	0, 4, 8, 2
LavenderBlush	`#FFF0F5`	255, 240, 245	340°, 100%, 97%	0, 6, 4, 0
MistyRose	`#FFE4E1`	255, 228, 225	6°, 100%, 94%	0, 11, 12, 0

Màu xám và đen (10 màu)

Tên CSS	HEX	RGB	HSL	CMYK
Gainsboro	`#DCDCDC`	220, 220, 220	0°, 0%, 86%	0, 0, 0, 14
LightGray	`#D3D3D3`	211, 211, 211	0°, 0%, 83%	0, 0, 0, 17
Silver	`#C0C0C0`	192, 192, 192	0°, 0%, 75%	0, 0, 0, 25
DarkGray	`#A9A9A9`	169, 169, 169	0°, 0%, 66%	0, 0, 0, 34
Gray	`#808080`	128, 128, 128	0°, 0%, 50%	0, 0, 0, 50
DimGray	`#696969`	105, 105, 105	0°, 0%, 41%	0, 0, 0, 59
LightSlateGray	`#778899`	119, 136, 153	210°, 14%, 53%	22, 11, 0, 40
SlateGray	`#708090`	112, 128, 144	210°, 13%, 50%	22, 11, 0, 44
DarkSlateGray	`#2F4F4F`	47, 79, 79	180°, 25%, 25%	41, 0, 0, 69
Black	`#000000`	0, 0, 0	0°, 0%, 0%	0, 0, 0, 100

Bảng mã màu HTML/CSS và RGB cơ bản

Danh sách 16 màu tiêu chuẩn được mọi trình duyệt web nhận diện trực tiếp thông qua tên gọi tiếng Anh mà không cần thông qua mã số.

Tên chuẩn HTML	Tên tiếng Việt	HEX	Decimal (R, G, B)
Black	Đen	`#000000`	0, 0, 0
White	Trắng	`#FFFFFF`	255, 255, 255
Red	Đỏ	`#FF0000`	255, 0, 0
Lime	Xanh lá sáng	`#00FF00`	0, 255, 0
Blue	Xanh dương	`#0000FF`	0, 0, 255
Yellow	Vàng	`#FFFF00`	255, 255, 0
Cyan (Aqua)	Xanh cyan	`#00FFFF`	0, 255, 255
Magenta (Fuchsia)	Hồng tím	`#FF00FF`	255, 0, 255
Silver	Bạc	`#C0C0C0`	192, 192, 192
Gray	Xám	`#808080`	128, 128, 128
Maroon	Đỏ nâu	`#800000`	128, 0, 0
Olive	Xanh ô liu	`#808000`	128, 128, 0
Green	Xanh lá đậm	`#008000`	0, 128, 0
Purple	Tím	`#800080`	128, 0, 128
Teal	Xanh mòng két	`#008080`	0, 128, 128
Navy	Xanh navy	`#000080`	0, 0, 128

Bộ bảng màu pastel nhẹ nhàng, tinh tế

Màu pastel có độ bão hoà thấp và độ sáng cao, phù hợp thiết kế thiệp, bao bì nước hoa, mỹ phẩm hoặc giao diện mang cảm giác nhẹ nhàng.

Tên màu	HEX	RGB	HSL
Hồng phấn	`#FFD1DC`	255, 209, 220	346°, 100%, 91%
Hồng đào	`#FFB7B2`	255, 183, 178	4°, 100%, 85%
Cam đào	`#FFDAB9`	255, 218, 185	28°, 100%, 86%
Vàng kem	`#FFF5BA`	255, 245, 186	51°, 100%, 86%
Xanh mint	`#B5EAD7`	181, 234, 215	158°, 56%, 81%
Xanh baby	`#A7C7E7`	167, 199, 231	210°, 57%, 78%
Tím lavender	`#DCD0FF`	220, 208, 255	255°, 100%, 91%

Bộ màu chuẩn phối giao diện website

Một bộ màu website hoàn chỉnh cần phân chia rõ ràng vai trò của từng khu vực gồm:

Màu chủ đạo dùng cho các nút bấm kêu gọi hành động.
Màu nền và màu đậm giúp phân tách các khối nội dung.
Màu chữ chính và chữ phụ điều hướng nhịp độ đọc.
Các màu nhấn trạng thái thông báo thành công hoặc cảnh báo lỗi.

Sau đây là các màu cụ thể cho từng khu vực.

Vai trò	HEX	Dùng cho
Màu chủ đạo (Primary)	`#1D6FD6`	Nút bấm, liên kết, điểm nhấn thương hiệu
Màu đậm (Dark)	`#0B3D91`	Trạng thái hover, tiêu đề, footer
Màu nền (Tint)	`#EAF2FD`	Nền khối nội dung, banner, thẻ
Chữ chính (Text)	`#1F2328`	Đoạn văn, tiêu đề
Chữ phụ (Muted)	`#5B6470`	Chú thích, mô tả phụ, placeholder
Thành công (Success)	`#1A7F37`	Thông báo hoàn tất, xác nhận
Cảnh báo (Warning)	`#9A6700`	Cảnh báo, lưu ý
Lỗi (Error)	`#D1242F`	Báo lỗi biểu mẫu, hành động xoá
Thông tin (Info)	`#0969DA`	Gợi ý, thông báo trung tính

Bảng mã màu icon thương hiệu và mạng xã hội

Dưới đây là mã màu HEX của icon các trang mạng xã hội và ứng dụng nổi tiếng.

Thương hiệu	HEX	Ghi chú
Facebook (logo hiện tại)	`#1877F2`	Mã cũ #3B5998 vẫn hay gặp trong tài liệu cũ
Facebook (mã cũ)	`#3B5998`	Dùng trước khi đổi nhận diện
X (Twitter)	`#000000`	Mã cũ #55ACEE thuộc thời Twitter chim xanh
Gmail	`#EA4335`	—
YouTube	`#FF0000`	Mã cũ #CD201F thuộc logo trước 2017
LinkedIn	`#0A66C2`	—
Zalo	`#0068FF`	—
Pinterest	`#E60023`	—
WhatsApp	`#25D366`	—
Telegram	`#26A5E4`	—
Spotify	`#1DB954`	—
TikTok (đỏ)	`#FE2C55`	Đi cùng xanh cyan #25F4EE
Shopee	`#EE4D2D`	—

Các phần mềm lấy mã màu code chuẩn xác

Để lấy được mã màu code chuẩn xác nhất, bạn có thể tham khảo các công cụ hỗ trợ sau:

Công cụ eyedropper trên DevTools trình duyệt
Phần mềm Pixie
Công cụ Color Cop
ColorPix
Just Color Picker

Lời kết

In Sắc Màu vừa chia sẻ những thông tin chi tiết về bảng màu code và tổng hợp các bảng code màu được sử dụng phổ biến nhất trong thiết kế và in ấn. Hy vọng bài viết đã giúp bạn đọc có thêm những thông tin hữu ích.

Chia sẽ:

Nguyễn Thị Kim Ni

Tôi là Nguyễn Thị Kim Ni CEO tại In Sắc Màu với hơn 5 năm kinh nghiệm làm việc trong lĩnh vực in ấn tem nhãn và bao bì sản phẩm. Trên website, tôi chia sẻ kiến thức hữu ích và tư vấn giải pháp giúp khách hàng tối ưu chi phí in ấn hiệu quả. Hãy kết nối với tôi trên các trang mạng xã hội: Facebook, Twitter, Instagram, Linkedin