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.

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

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ứ Năm, 23/05/2019 10:16
519 👨 758