Sở hữu bảng mã màu CSS chuẩn, bạn sẽ tự tin hơn khi thiết kế, lập trình web, bởi màu sắc là một phần không thể thiếu trong thế giới Internet. Ở bài viết này, Quantrimang.com xin giới thiệu cho bạn những bảng mã màu đẹp và thông dụng nhất, kèm theo mã hex để các bạn tiện dùng.
Mục lục
Công cụ lấy mã màu
Bạn chỉ cần thay đổi thanh trượt và chấm màu để đạt được màu như ý và nhấn vào Sao chép để lấy mã màu mình cần.
Bảng màu CSS có tên
Danh sách dưới đây có khoảng hơn 140 màu sắc có tên được tất cả các trình duyệt hỗ trợ trong thiết kế website. Chúng tôi chia nhóm theo sắc để bạn dễ dàng tìm kiếm màu mình muốn.
Màu sắc gần màu Hồng (Pink)
TÊN MÀU | MÃ HEX | MÀU HIỂN THỊ |
---|---|---|
Pink | #FFC0CB | |
LightPink | #FFB6C1 | |
HotPink | #FF69B4 | |
DeepPink | #FF1493 | |
PaleVioletRed | #DB7093 | |
MediumVioletRed | #C71585 |
Màu sắc gần màu Tím (Purple)
TÊN MÀU | MÃ HEX | MÀU HIỂN THỊ |
---|---|---|
Lavender | #E6E6FA | |
Thistle | #D8BFD8 | |
Plum | #DDA0DD | |
Orchid | #DA70D6 | |
Violet | #EE82EE | |
Fuchsia/Magenta | #FF00FF | |
MediumOrchid | #BA55D3 | |
DarkOrchid | #9932CC | |
DarkViolet | #9400D3 | |
BlueViolet | #8A2BE2 | |
DarkMagenta | #8B008B | |
Purple | #800080 | |
MediumPurple | #9370DB | |
MediumSlateBlue | #7B68EE | |
SlateBlue | #6A5ACD | |
DarkSlateBlue | #483D8B | |
RebeccaPurple | #663399 | |
Indigo | #4B0082 |
Màu sắc gần màu Đỏ (Red)
TÊN MÀU | MÃ HEX | MÀU HIỂN THỊ |
---|---|---|
LightSalmon | #FFA07A | |
Salmon | #FA8072 | |
DarkSalmon | #E9967A | |
LightCoral | #F08080 | |
IndianRed | #CD5C5C | |
Crimson | #DC143C | |
Red | #FF0000 | |
FireBrick | #B22222 | |
DarkRed | #8B0000 |
Màu sắc gần màu Cam (Orange)
TÊN MÀU | MÃ HEX | MÀU HIỂN THỊ |
---|---|---|
Orange | #FFA500 | |
DarkOrange | #FF8C00 | |
Coral | #FF7F50 | |
Tomato | #FF6347 | |
OrangeRed | #FF4500 |
Màu sắc gần màu Vàng (Yellow)
TÊN MÀU | MÃ HEX | MÀU HIỂN THỊ |
---|---|---|
Gold | #FFD700 | |
Yellow | #FFFF00 | |
LightYellow | #FFFFE0 | |
LemonChiffon | #FFFACD | |
LightGoldenRodYellow | #FAFAD2 | |
PapayaWhip | #FFEFD5 | |
Moccasin | #FFE4B5 | |
PeachPuff | #FFDAB9 | |
PaleGoldenRod | #EEE8AA | |
Khaki | #F0E68C | |
DarkKhaki | #BDB76B |
Màu sắc gần màu Xanh lá cây (Green)
TÊN MÀU | MÃ HEX | MÀU HIỂN THỊ |
---|---|---|
GreenYellow | #ADFF2F | |
Chartreuse | #7FFF00 | |
LawnGreen | #7CFC00 | |
Lime | #00FF00 | |
LimeGreen | #32CD32 | |
PaleGreen | #98FB98 | |
LightGreen | #90EE90 | |
MediumSpringGreen | #00FA9A | |
SpringGreen | #00FF7F | |
MediumSeaGreen | #3CB371 | |
SeaGreen | #2E8B57 | |
ForestGreen | #228B22 | |
Green | #008000 | |
DarkGreen | #006400 | |
YellowGreen | #9ACD32 | |
OliveDrab | #6B8E23 | |
DarkOliveGreen | #556B2F | |
MediumAquaMarine | #66CDAA | |
DarkSeaGreen | #8FBC8F | |
LightSeaGreen | #20B2AA | |
DarkCyan | #008B8B | |
Teal | #008080 |
Màu sắc gần màu Xanh Cyan (Cyan)
TÊN MÀU | MÃ HEX | MÀU HIỂN THỊ |
---|---|---|
Aqua | #00FFFF | |
Cyan | #00FFFF | |
LightCyan | #E0FFFF | |
PaleTurquoise | #AFEEEE | |
Aquamarine | #7FFFD4 | |
Turquoise | #40E0D0 | |
MediumTurquoise | #48D1CC | |
DarkTurquoise | #00CED1 |
Màu sắc gần màu Xanh da trời (Blue)
TÊN MÀU | MÃ HEX | MÀU HIỂN THỊ |
---|---|---|
CadetBlue | #5F9EA0 | |
SteelBlue | #4682B4 | |
LightSteelBlue | #B0C4DE | |
LightBlue | #ADD8E6 | |
PowderBlue | #B0E0E6 | |
LightSkyBlue | #87CEFA | |
SkyBlue | #87CEEB | |
CornflowerBlue | #6495ED | |
DeepSkyBlue | #00BFFF | |
DodgerBlue | #1E90FF | |
RoyalBlue | #4169E1 | |
Blue | #0000FF | |
MediumBlue | #0000CD | |
DarkBlue | #00008B | |
Navy | #000080 | |
MidnightBlue | #191970 |
Màu sắc gần màu Nâu (Brown)
TÊN MÀU | MÃ HEX | MÀU HIỂN THỊ |
---|---|---|
Cornsilk | #FFF8DC | |
BlanchedAlmond | #FFEBCD | |
Bisque | #FFE4C4 | |
NavajoWhite | #FFDEAD | |
Wheat | #F5DEB3 | |
BurlyWood | #DEB887 | |
Tan | #D2B48C | |
RosyBrown | #BC8F8F | |
SandyBrown | #F4A460 | |
GoldenRod | #DAA520 | |
DarkGoldenRod | #B8860B | |
Peru | #CD853F | |
Chocolate | #D2691E | |
Olive | #808000 | |
SaddleBrown | #8B4513 | |
Sienna | #A0522D | |
Brown | #A52A2A | |
Maroon | #800000 |
Màu sắc gần màu Trắng (White)
TÊN MÀU | MÃ HEX | MÀU HIỂN THỊ |
---|---|---|
White | #FFFFFF | |
Snow | #FFFAFA | |
HoneyDew | #F0FFF0 | |
MintCream | #F5FFFA | |
Azure | #F0FFFF | |
AliceBlue | #F0F8FF | |
GhostWhite | #F8F8FF | |
WhiteSmoke | #F5F5F5 | |
SeaShell | #FFF5EE | |
Beige | #F5F5DC | |
OldLace | #FDF5E6 | |
FloralWhite | #FFFAF0 | |
Ivory | #FFFFF0 | |
AntiqueWhite | #FAEBD7 | |
Linen | #FAF0E6 | |
LavenderBlush | #FFF0F5 | |
MistyRose | #FFE4E1 |
Màu sắc gần màu Xám (Grey)
TÊN MÀU | MÃ HEX | MÀU HIỂN THỊ |
---|---|---|
Gainsboro | #DCDCDC | |
LightGray | #D3D3D3 | |
Silver | #C0C0C0 | |
DarkGray | #A9A9A9 | |
DimGray | #696969 | |
Gray | #808080 | |
LightSlateGray | #778899 | |
SlateGray | #708090 | |
DarkSlateGray | #2F4F4F | |
Black | #000000 |
Bảng màu theo sắc thái
Sắc Đen – Xám
Gray Shades | HEX | RGB |
---|---|---|
HTML Black | #000000 | rgb(0,0,0) |
#080808 | rgb(8,8,8) | |
#101010 | rgb(16,16,16) | |
#181818 | rgb(24,24,24) | |
#202020 | rgb(32,32,32) | |
#282828 | rgb(40,40,40) | |
#303030 | rgb(48,48,48) | |
#383838 | rgb(56,56,56) | |
#404040 | rgb(64,64,64) | |
#484848 | rgb(72,72,72) | |
#505050 | rgb(80,80,80) | |
#585858 | rgb(88,88,88) | |
#606060 | rgb(96,96,96) | |
#686868 | rgb(104,104,104) | |
#696969 | rgb(105,105,105) | |
#707070 | rgb(112,112,112) | |
#787878 | rgb(120,120,120) | |
HTML Gray | #808080 | rgb(128,128,128) |
#888888 | rgb(136,136,136) | |
#909090 | rgb(144,144,144) | |
#989898 | rgb(152,152,152) | |
#A0A0A0 | rgb(160,160,160) | |
#A8A8A8 | rgb(168,168,168) | |
HTML DarkGray !!! | #A9A9A9 | rgb(169,169,169) |
#B0B0B0 | rgb(176,176,176) | |
#B8B8B8 | rgb(184,184,184) | |
X11 Gray | #BEBEBE | rgb(190,190,190) |
HTML Silver | #C0C0C0 | rgb(192,192,192) |
#C8C8C8 | rgb(200,200,200) | |
#D0D0D0 | rgb(208,208,208) | |
HTML LightGray | #D3D3D3 | rgb(211,211,211) |
#D8D8D8 | rgb(216,216,216) | |
HTML Gainsboro | #DCDCDC | rgb(220,220,220) |
#E0E0E0 | rgb(224,224,224) | |
#E8E8E8 | rgb(232,232,232) | |
#F0F0F0 | rgb(240,240,240) | |
HTML WhiteSmoke | #F5F5F5 | rgb(245,245,245) |
#F8F8F8 | rgb(248,248,248) | |
HTML White | #FFFFFF | rgb(255,255,255) |
Có một điều bất thường trong bảng trên là HTML Gray tối hơn DarkGray.
Lý do của việc này là do tên màu của HTML/CSS được kế thừa từ tiêu chuẩn X11. Tuy nhiên, HTML/CSS thì xác định màu xám (gray) nằm ở thang (128,128,128) còn X11 thì xác định ở vị trí (190,190,190), gần với màu bạc hơn. Bạn chỉ cần lưu ý việc này nếu sử dụng tên của màu sắc vào thiết kế của mình.
Sắc Đỏ
Red Light | HEX | RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#080000 | rgb(8,0,0) | |
#100000 | rgb(16,0,0) | |
#180000 | rgb(24,0,0) | |
#200000 | rgb(32,0,0) | |
#280000 | rgb(40,0,0) | |
#300000 | rgb(48,0,0) | |
#380000 | rgb(56,0,0) | |
#400000 | rgb(64,0,0) | |
#480000 | rgb(72,0,0) | |
#500000 | rgb(80,0,0) | |
#580000 | rgb(88,0,0) | |
#600000 | rgb(96,0,0) | |
#680000 | rgb(104,0,0) | |
#700000 | rgb(112,0,0) | |
#780000 | rgb(120,0,0) | |
#800000 | rgb(128,0,0) | |
#880000 | rgb(136,0,0) | |
#900000 | rgb(144,0,0) | |
#980000 | rgb(152,0,0) | |
#A00000 | rgb(160,0,0) | |
#A80000 | rgb(168,0,0) | |
#B00000 | rgb(176,0,0) | |
#B80000 | rgb(184,0,0) | |
#C00000 | rgb(192,0,0) | |
#C80000 | rgb(200,0,0) | |
#D00000 | rgb(208,0,0) | |
#D80000 | rgb(216,0,0) | |
#E00000 | rgb(224,0,0) | |
#E80000 | rgb(232,0,0) | |
#F00000 | rgb(240,0,0) | |
#F80000 | rgb(248,0,0) | |
#FF0000 | rgb(255,0,0) |
Web Safe Colors – Bảng màu “an toàn” dành cho Website
Nhiều năm trước đây, các máy tính chỉ hỗ trợ được tối đa 256 màu khác nhau, vì vậy danh sách 216 “Màu an toàn cho web” – Web Safe Colors được đề xuất làm tiêu chuẩn cho mọi thiết kế web lúc bấy giờ.
Nhưng hiện nay điều này không còn quan trọng, vì hầu hết các máy tính đều có thể hiển thị hàng triệu màu khác nhau.
Quantrimang vẫn sẽ giới thiệu ở đây để bạn biết thêm nhé.
000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Một số thông tin bổ sung
Định dạng mã màu
Mã màu có thể là một trong số những định dạng sau:
- Định dạng hex: #rrggbb
- Định dạng RGB: rgb (red, green, blue)
- Định dạng tên: name
Ví dụ đối với màu cam:
- Định dạng hex: #FFA500
- Định dạng RGB: rgb (255,165,0)
- Định dạng tên: orange
Thiết lập màu phần tử
Đối với phần tử cụ thể:
<element style="color: code;"></element>
Đối với tất cả các phần tử cùng loại. Đặt mã trong thẻ <style> ở phần đầu:
<style>
element { color: code; }
</style>
Ví dụ, bạn muốn đặt màu văn bản đoạn văn thành màu đỏ.
Thiết lập màu của đoạn văn cụ thể:
<p style="color: #FF0000;">Some text ...</p>
Thêm màu cho tất cả các đoạn văn
<style>
p { color: #FF0000; }
</style>
Đặt màu nền của phần tử
element { background: code; }
Ví dụ, đặt màu nền của đoạn văn thành màu đỏ.
Đặt màu nền của đoạn văn cụ thể:
<p style="background: #FF0000;">Some text ...</p>
Đặt màu nền cho tất cả các đoạn văn:
<style>
p { background: #FF0000; }
</style>
Đặt màu đường viền phần tử
element { border-color: topcode rightcode bottomcode leftcode }
Ví dụ, đặt màu đường viền đoạn văn thành đỏ, lục, lam và đen:
Đặt màu đường viền của đoạn văn cụ thể:
<p style="border-color: #FF0000 #00FF00 #0000FF #000000; border-style:solid">Some text ...</p>
Đặt màu đường viền của tất cả các đoạn văn:
<style>
p { border-color: #FF0000 #00FF00 #0000FF #000000; }
</style>