Việc sử dụng đúng mã màu giúp thiết kế của bạn trở nên chuyên nghiệp và nhất quán hơn trên mọi nền tảng. Dưới đây là Bảng Mã Màu HTML, CSS, RGB Phổ Biến Nhất Hiện Nay và được dùng nhiều trong thiết kế web, in ấn và lập trình.
🎨 1. Bảng Màu Cơ Bản (Primary Colors)
| Màu | Tên Màu | Mã HEX | Giá trị RGB | |
|---|---|---|---|---|
|
|
Đen (Black) | #000000 |
rgb(0, 0, 0) |
|
|
|
Trắng (White) | #FFFFFF |
rgb(255, 255, 255) |
|
|
|
Đỏ (Red) | #FF0000 |
rgb(255, 0, 0) |
|
|
|
Xanh lá (Lime) | #00FF00 |
rgb(0, 255, 0) |
|
|
|
Xanh dương (Blue) | #0000FF |
rgb(0, 0, 255) |
|
|
|
Vàng (Yellow) | #FFFF00 |
rgb(255, 255, 0) |
|
|
|
Xanh cyan (Aqua) | #00FFFF |
rgb(0, 255, 255) |
|
|
|
Hồng magenta | #FF00FF |
rgb(255, 0, 255) |
🌗 2.Bảng Các Màu Trung Tính và Sắc Xám
| Màu | Tên Màu | Mã HEX | RGB | ||
|---|---|---|---|---|---|
|
|
Bạc (Silver) | #C0C0C0 |
rgb(192,192,192) |
||
|
|
Xám (Gray) | #808080 |
rgb(128,128,128) |
||
|
|
Xám đậm (DimGray) | #696969 |
rgb(105,105,105) |
||
|
|
Xám nhạt (LightGray) | #D3D3D3 |
rgb(211,211,211) |
||
|
Than (Charcoal) | #36454F | rgb(54,69,79) | ||
|
|
Tro xám (Gainsboro) | #DCDCDC | rgb(220,220,220) | ||
|
|
Xám tro (SlateGray) | #708090 | rgb(112,128,144) | ||
|
|
Xám bạc (DarkGray) | #A9A9A9 | rgb(169,169,169 | ||
|
|
Trắng khói (GhostWhite) | #F8F8FF | rgb(248,248,255) | ||
|
|
Xám rất nhạt (WhiteSmoke) | #F5F5F5 |
rgb(245,245,245) |
🍁 3. Bảng Màu Tự Nhiên & Đất
| Màu | Tên Màu | Mã HEX | RGB | |
|---|---|---|---|---|
|
|
Nâu đậm (SaddleBrown) | #8B4513 |
rgb(139,69,19) |
|
|
|
Nâu sẫm (Sienna) | #A0522D |
rgb(160,82,45) |
|
|
|
Kem (Beige) | #F5F5DC |
rgb(245,245,220) |
|
|
|
Màu cát (SandyBrown) | #F4A460 |
rgb(244,164,96) |
|
|
|
Cam nhạt (Moccasin) | #FFE4B5 |
rgb(255,228,181) |
|
|
|
Nâu (Sienna) | #A0522D | rgb(160,82,45 |
🌸 4. Bảng Màu Đỏ & Hồng & Tím
| Màu | Tên Màu | Mã HEX | RGB | |
|---|---|---|---|---|
|
|
Đỏ đô (Maroon) | #800000 | rgb(128,0,0) | |
|
|
Đỏ tươi (Crimson) | #DC143C | rgb(220,20,60 | |
|
|
Đỏ cam (Tomato) | #FF6347 | rgb(255,99,71) | |
|
|
Hồng phấn (Pink) | #FFC0CB | rgb(255,192,203) | |
|
|
Tím đỏ (MediumVioletRed) | #C71585 | rgb(199,21,133) | |
|
|
Tím than (Indigo) | #4B0082 | rgb(75,0,130) | |
|
|
Tía (Purple) | #800080 | rgb(128,0,128) | |
|
|
Hồng đậm (HotPink) | #FF69B4 |
rgb(255,105,180) |
|
|
|
Hồng nhạt (LightPink) | #FFB6C1 |
rgb(255,182,193) |
|
|
|
Hồng đào (Salmon) | #FA8072 |
rgb(250,128,114) |
|
|
|
Tím lan (Orchid) | #DA70D6 |
rgb(218,112,214) |
|
|
|
Tím nhạt (Lavender) | #E6E6FA |
rgb(230,230,250) |
🌊 5.Bảng Mã Tông Xanh – Biển, Trời và Thiên nhiên
| Tên Màu | Mã HEX | RGB | ||
|---|---|---|---|---|
|
|
Xanh lục bảo (MediumSeaGreen) | #3CB371 | rgb(60,179,113) | |
|
|
Xanh lá cây đậm (ForestGreen) | #228B22 | rgb(34,139,34) | |
|
|
Xanh lá mạ (Chartreuse) | #7FFF00 | rgb(127,255,0) | |
|
|
Xanh biển đậm (Navy) | #000080 | rgb(0,0,128) | |
|
|
Xanh ngọc bích (Aquamarine) | #7FFFD4 | rgb(127,255,212) | |
|
|
Xanh da trời (SkyBlue) | #87CEEB |
rgb(135,206,235) |
|
|
|
Xanh nhạt (LightBlue) | #ADD8E6 |
rgb(173,216,230) |
|
|
|
Xanh biển (DeepSkyBlue) | #00BFFF |
rgb(0,191,255) |
|
|
|
Xanh ngọc (Turquoise) | #40E0D0 |
rgb(64,224,208) |
|
|
|
Xanh rêu (SeaGreen) | #2E8B57 |
rgb(46,139,87) |
🌼 6. Bảng Mã Màu Vàng & Cam Tươi Sáng
| Tên Màu | Mã HEX | RGB | |||
|---|---|---|---|---|---|
|
|
Vàng tươi (Gold) | #FFD700 |
rgb(255,215,0) |
||
|
|
Vàng chanh (LemonChiffon) | #FFFACD |
rgb(255,250,205) |
||
|
|
Cam đất (DarkOrange) | #FF8C00 |
rgb(255,140,0) |
||
|
|
Cam sáng (Coral) | #FF7F50 | rgb(255,127,80) | ||
|
|
Cam đào (PeachPuff) | #FFDAB9 | rgb(255,218,185) | ||
|
Cam hổ phách (Amber) | #FFBF00 | rgb(255,191,0) | ||
|
|
Vàng nhạt (Khaki) | #F0E68C | rgb(240,230,140) | ||
|
|
Vàng kem (Cornsilk) | #FFF8DC | rgb(255,248,220) | ||
|
|
Cam nhạt (LightSalmon) | #FFA07A |
rgb(255,160,122) |
🌸 7. Bảng Mã Màu Pastel (Màu Dịu Nhẹ & Ngọt Ngào) Được Ưa Chuộng
| Tên Màu | Mã HEX | RGB | ||
|---|---|---|---|---|
|
|
Hồng pastel (Pastel Pink) | #FFD1DC | rgb(255,209,220) | |
|
|
Xanh pastel (Pastel Blue) | #AEC6CF | rgb(174,198,207) | |
|
|
Tím pastel (Pastel Purple) | #D8B7DD | rgb(216,183,221) | |
|
|
Vàng pastel (Pastel Yellow) | #FAFAD2 | rgb(250,250,210) | |
|
|
Xanh lá pastel (Mint Green) | #98FF98 | rgb(152,255,152) | |
|
|
Cam pastel (Apricot) | #FBCEB1 | rgb(251,206,177) | |
|
|
Be nhẹ (Linen) | #FAF0E6 | rgb(250,240,230) | |
|
|
Xám xanh nhạt (Powder Blue) | #B0E0E6 | rgb(176,224,230) | |
|
|
Hoa oải hương pastel (LavenderBlush) | #FFF0F5 | rgb(255,240,245) |
.color-grid {
display: grid;
grid-template-columns: repeat(8, 15px);
gap: 4px;
margin: 20px 0;
}
.color-cell {
width: 15px;
height: 15px;
border-radius: 2px;
border: 1px solid #ccc;
}
Cách Để Phối màu trong thiết kế
Phối màu là một phần quan trọng giúp thiết kế trở nên hài hòa, chuyên nghiệp và truyền tải đúng cảm xúc. Một bảng màu đẹp không chỉ gây ấn tượng thị giác mà còn giúp tăng tính nhận diện thương hiệu. Bạn có thể bắt đầu với các nguyên tắc cơ bản như phối màu tương phản, tương đồng hoặc đơn sắc. Nếu bạn chưa chắc chọn tông màu nào, hãy ghé thăm ColorHunt – một kho tàng bảng màu được tuyển chọn sẵn, cập nhật hàng ngày và hoàn toàn miễn phí. Đây là công cụ tuyệt vời để tìm cảm hứng màu sắc cho website, poster, logo hay các dự án sáng tạo của bạn.
🧾 Bảng Mã Màu HEX Mở Rộng – Được Sử Dụng Nhiều
Mỗi màu trong bảng mở rộng thường có dạng mã HEX như sau:
Chúng thường được sử dụng để:
-
Thiết kế web (nền, chữ, viền)
-
Thiết kế in ấn (tem, bao bì, túi giấy)
-
Sáng tạo nội dung truyền thông, banner
Một vài nhóm màu tiêu biểu:
-
Màu xám đa sắc: từ
#111111đến#EEEEEE -
Tông đỏ:
#FF0000,#CC0000,#990000,#660000 -
Tông vàng – cam:
#FFFF00,#FFCC00,#FF9900,#FF6600 -
Tông xanh lá:
#00FF00,#66FF66,#99FF99,#CCFFCC -
Tông xanh dương:
#0000FF,#3366FF,#6699FF,#99CCFF
💡 Lời kết
Việc nắm rõ bảng mã màu sẽ giúp bạn chủ động hơn trong việc lựa chọn tông màu phù hợp với thương hiệu hoặc sản phẩm. Từ những màu cơ bản đến những mã HEX mở rộng, bạn có thể áp dụng linh hoạt vào các dự án thiết kế, lập trình, in ấn, và truyền thông của mình.
Nếu bạn muốn mình viết phần còn lại (bảng màu mở rộng đầy đủ), hoặc xuất ra file Excel / PDF từ dữ liệu này, hãy cho mình biết nhé!
Để lại một bình luận