Bảng mã màu CSS, code color chuẩn trong thiết kế website

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.

Công cụ lấy mã màu trên Quantrimang.com

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ÀUMÃ HEXMÀ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ÀUMÃ HEXMÀ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ÀUMÃ HEXMÀ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ÀUMÃ HEXMÀ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ÀUMÃ HEXMÀ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ÀUMÃ HEXMÀ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ÀUMÃ HEXMÀ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ÀUMÃ HEXMÀ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ÀUMÃ HEXMÀ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ÀUMÃ HEXMÀ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ÀUMÃ HEXMÀ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 ShadesHEXRGB
HTML Black#000000rgb(0,0,0)
#080808rgb(8,8,8)
#101010rgb(16,16,16)
#181818rgb(24,24,24)
#202020rgb(32,32,32)
#282828rgb(40,40,40)
#303030rgb(48,48,48)
#383838rgb(56,56,56)
#404040rgb(64,64,64)
#484848rgb(72,72,72)
#505050rgb(80,80,80)
#585858rgb(88,88,88)
#606060rgb(96,96,96)
#686868rgb(104,104,104)
#696969rgb(105,105,105)
#707070rgb(112,112,112)
#787878rgb(120,120,120)
HTML Gray#808080rgb(128,128,128)
#888888rgb(136,136,136)
#909090rgb(144,144,144)
#989898rgb(152,152,152)
#A0A0A0rgb(160,160,160)
#A8A8A8rgb(168,168,168)
HTML DarkGray !!!#A9A9A9rgb(169,169,169)
#B0B0B0rgb(176,176,176)
#B8B8B8rgb(184,184,184)
X11 Gray#BEBEBErgb(190,190,190)
HTML Silver#C0C0C0rgb(192,192,192)
#C8C8C8rgb(200,200,200)
#D0D0D0rgb(208,208,208)
HTML LightGray#D3D3D3rgb(211,211,211)
#D8D8D8rgb(216,216,216)
HTML Gainsboro#DCDCDCrgb(220,220,220)
#E0E0E0rgb(224,224,224)
#E8E8E8rgb(232,232,232)
#F0F0F0rgb(240,240,240)
HTML WhiteSmoke#F5F5F5rgb(245,245,245)
#F8F8F8rgb(248,248,248)
HTML White#FFFFFFrgb(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 LightHEXRGB
#000000rgb(0,0,0)
#080000rgb(8,0,0)
#100000rgb(16,0,0)
#180000rgb(24,0,0)
#200000rgb(32,0,0)
#280000rgb(40,0,0)
#300000rgb(48,0,0)
#380000rgb(56,0,0)
#400000rgb(64,0,0)
#480000rgb(72,0,0)
#500000rgb(80,0,0)
#580000rgb(88,0,0)
#600000rgb(96,0,0)
#680000rgb(104,0,0)
#700000rgb(112,0,0)
#780000rgb(120,0,0)
#800000rgb(128,0,0)
#880000rgb(136,0,0)
#900000rgb(144,0,0)
#980000rgb(152,0,0)
#A00000rgb(160,0,0)
#A80000rgb(168,0,0)
#B00000rgb(176,0,0)
#B80000rgb(184,0,0)
#C00000rgb(192,0,0)
#C80000rgb(200,0,0)
#D00000rgb(208,0,0)
#D80000rgb(216,0,0)
#E00000rgb(224,0,0)
#E80000rgb(232,0,0)
#F00000rgb(240,0,0)
#F80000rgb(248,0,0)
#FF0000rgb(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é.

0000000000330000660000990000CC0000FF
0033000033330033660033990033CC0033FF
0066000066330066660066990066CC0066FF
0099000099330099660099990099CC0099FF
00CC0000CC3300CC6600CC9900CCCC00CCFF
00FF0000FF3300FF6600FF9900FFCC00FFFF
3300003300333300663300993300CC3300FF
3333003333333333663333993333CC3333FF
3366003366333366663366993366CC3366FF
3399003399333399663399993399CC3399FF
33CC0033CC3333CC6633CC9933CCCC33CCFF
33FF0033FF3333FF6633FF9933FFCC33FFFF
6600006600336600666600996600CC6600FF
6633006633336633666633996633CC6633FF
6666006666336666666666996666CC6666FF
6699006699336699666699996699CC6699FF
66CC0066CC3366CC6666CC9966CCCC66CCFF
66FF0066FF3366FF6666FF9966FFCC66FFFF
9900009900339900669900999900CC9900FF
9933009933339933669933999933CC9933FF
9966009966339966669966999966CC9966FF
9999009999339999669999999999CC9999FF
99CC0099CC3399CC6699CC9999CCCC99CCFF
99FF0099FF3399FF6699FF9999FFCC99FFFF
CC0000CC0033CC0066CC0099CC00CCCC00FF
CC3300CC3333CC3366CC3399CC33CCCC33FF
CC6600CC6633CC6666CC6699CC66CCCC66FF
CC9900CC9933CC9966CC9999CC99CCCC99FF
CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
FF0000FF0033FF0066FF0099FF00CCFF00FF
FF3300FF3333FF3366FF3399FF33CCFF33FF
FF6600FF6633FF6666FF6699FF66CCFF66FF
FF9900FF9933FF9966FF9999FF99CCFF99FF
FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF

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>

Hi vọng bảng tổng hợp mã màu này sẽ giúp ích cho bạn trong quá trình làm việc và học tập.

Thứ Sáu, 29/07/2022 17:14
4,368 👨 246.732
1 Bình luận
Sắp xếp theo
  • Tan Nguyen Thanh
    Tan Nguyen Thanh

    Mình muốn xin đường link chương trình CSS và CSS3 bạn nào biết gửi cho mình với, cảm ơn nhiều

    Thích Phản hồi 16/04/21
    ❖ Tiện ích