前端开发:颜色代码速查表【英文颜色、HEX格式、RGB格式】

在这里插入图片描述


💌 作者简介

  1. 📖 个人介绍:小伙伴们,大家好!我是水香木鱼,【前端领域创作者】😜
  2. 📜 CSDN主页:水香木鱼
  3. 📑 个人博客:陈春波
  4. 🎨 系列专栏:​邂逅HTML
  5. 🌹 一键四连:关注💋+点赞👍+收藏⭐+留言📝
  6. 📢 人生箴言:即使没有万全准备,也要勇敢迈出第一步。

使用实例

  • 英文代码使用实例:<p style="color: red"> This is my font </p>
  • HEX格式使用实例: <p style="color: #FFB6C1"> This is my font </p>
  • RGB格式使用实例: <p style="color: rgb(219,112,147)"> This is my font </p>

中文颜色代码表

根据业务需求,我们可以使用三种格式的代码颜色;

注意:如果想要寻找你的设计稿上的颜色,可用取色器吸取颜色,在本页面ctrl+f 搜索设计稿的颜色,寻找对应的两种格式;

1、红色系

颜色样例英文代码中文颜色名称HEX格式RGB格式
颜色样例Crimson猩红#DC143C220,20,60
颜色样例PaleGodenrod灰秋麒麟#EEE8AA238,232,170
颜色样例Cornislk玉米色#FFF8DC255,248,220
颜色样例BrulyWood结实的树#DEB887222,184,135
颜色样例Red纯红#FF0000255,0,0
颜色样例Brown棕色#A52A2A165,42,42
颜色样例FireBrick耐火砖#B22222178,34,34
颜色样例DarkRed深红色#8B0000139,0,0
颜色样例Maroon栗色#800000128,0,0
颜色样例LightPink浅粉红#FFB6C1255,182,193
颜色样例Pink粉红#FFC0CB255,192,203
颜色样例LavenderBlush脸红的淡紫色#FFF0F5255,240,245
颜色样例PaleVioletRed苍白的紫罗兰红色#DB7093219,112,147
颜色样例HotPink热情的粉红#FF69B4255,105,180
颜色样例DeepPink深粉色#FF1493255,20,147
颜色样例MediumVioletRed适中的紫罗兰红色#C71585199,21,133

2、紫色系

颜色样例英文代码中文颜色名称HEX格式RGB格式
颜色样例Orchid兰花的紫色#DA70D6218,112,214
颜色样例Thistle#D8BFD8216,191,216
颜色样例plum李子#DDA0DD221,160,221
颜色样例Violet紫罗兰#EE82EE238,130,238
颜色样例Magenta洋红#FF00FF255,0,255
颜色样例Fuchsia灯笼海棠(紫红色)#FF00FF255,0,255
颜色样例DarkMagenta深洋红色#8B008B139,0,139
颜色样例Purple紫色#800080128,0,128
颜色样例MediumOrchid适中的兰花紫#BA55D3186,85,211
颜色样例DarkVoilet深紫罗兰色#9400D3148,0,211
颜色样例DarkOrchid深兰花紫#9932CC153,50,204
颜色样例Indigo靛青#4B008275,0,130
颜色样例BlueViolet深紫罗兰的蓝色#8A2BE2138,43,226
颜色样例MediumPurple适中的紫色#9370DB147,112,219
颜色样例MediumSlateBlue适中的板岩暗蓝灰色#7B68EE123,104,238
颜色样例SlateBlue板岩暗蓝灰色#6A5ACD106,90,205
颜色样例DarkSlateBlue深岩暗蓝灰色#483D8B72,61,139
颜色样例Lavender熏衣草花的淡紫色#E6E6FA230,230,250
颜色样例GhostWhite幽灵的白色#F8F8FF248,248,255

3、蓝色系

颜色样例英文代码中文颜色名称HEX格式RGB格式
颜色样例Blue纯蓝#0000FF0,0,255
颜色样例MediumBlue适中的蓝色#0000CD0,0,205
颜色样例MidnightBlue午夜的蓝色#19197025,25,112
颜色样例DarkBlue深蓝色#00008B0,0,139
颜色样例Navy海军蓝#0000800,0,128
颜色样例RoyalBlue皇军蓝#4169E165,105,225
颜色样例CornflowerBlue矢车菊的蓝色#6495ED100,149,237
颜色样例LightSteelBlue淡钢蓝#B0C4DE176,196,222
颜色样例LightSlateGray浅石板灰#778899119,136,153
颜色样例SlateGray石板灰#708090112,128,144
颜色样例DoderBlue道奇蓝#1E90FF30,144,255
颜色样例AliceBlue爱丽丝蓝#F0F8FF240,248,255
颜色样例SteelBlue钢蓝#4682B470,130,180
颜色样例LightSkyBlue淡蓝色#87CEFA135,206,250
颜色样例SkyBlue天蓝色#87CEEB135,206,235
颜色样例DeepSkyBlue深天蓝#00BFFF0,191,255
颜色样例LightBLue淡蓝#ADD8E6173,216,230
颜色样例PowDerBlue火药蓝#B0E0E6176,224,230
颜色样例CadetBlue军校蓝#5F9EA095,158,160
颜色样例Azure蔚蓝色#F0FFFF240,255,255
颜色样例LightCyan淡青色#E1FFFF225,255,255
颜色样例PaleTurquoise苍白的绿宝石#AFEEEE175,238,238
颜色样例Cyan青色#00FFFF0,255,255
颜色样例Aqua水绿色#00FFFF0,255,255
颜色样例DarkTurquoise深绿宝石#00CED10,206,209
颜色样例DarkSlateGray深石板灰#2F4F4F47,79,79
颜色样例DarkCyan深青色#008B8B0,139,139
颜色样例Teal水鸭色#0080800,128,128
颜色样例MediumTurquoise适中的绿宝石#48D1CC72,209,204
颜色样例LightSeaGreen浅海洋绿#20B2AA32,178,170
颜色样例Turquoise绿宝石#40E0D064,224,208

4、绿色系

颜色样例英文代码中文颜色名称HEX格式RGB格式
颜色样例Auqamarin绿玉\碧绿色#7FFFAA127,255,170
颜色样例MediumAquamarine适中的碧绿色#00FA9A0,250,154
颜色样例MediumSpringGreen适中的春天的绿色#F5FFFA245,255,250
颜色样例MintCream薄荷奶油#00FF7F0,255,127
颜色样例SpringGreen春天的绿色#3CB37160,179,113
颜色样例SeaGreen海洋绿#2E8B5746,139,87
颜色样例Honeydew蜂蜜#F0FFF0240,255,240
颜色样例LightGreen淡绿色#90EE90144,238,144
颜色样例PaleGreen苍白的绿色#98FB98152,251,152
颜色样例DarkSeaGreen深海洋绿#8FBC8F143,188,143
颜色样例LimeGreen酸橙绿#32CD3250,205,50
颜色样例Lime酸橙色#00FF000,255,0
颜色样例ForestGreen森林绿#228B2234,139,34
颜色样例Green纯绿#0080000,128,0
颜色样例DarkGreen深绿色#0064000,100,0
颜色样例Chartreuse查特酒绿#7FFF00127,255,0
颜色样例LawnGreen草坪绿#7CFC00124,252,0
颜色样例GreenYellow绿黄色#ADFF2F173,255,47
颜色样例OliveDrab橄榄土褐色#556B2F85,107,47
颜色样例Beige米色(浅褐色)#6B8E23107,142,35
颜色样例LightGoldenrodYellow浅秋麒麟黄#FAFAD2250,250,210
颜色样例Ivory象牙#FFFFF0255,255,240

5、黄色系

颜色样例英文代码中文颜色名称HEX格式RGB格式
颜色样例LightYellow浅黄色#FFFFE0255,255,224
颜色样例Yellow纯黄#FFFF00255,255,0
颜色样例Olive橄榄#808000128,128,0
颜色样例DarkKhaki深卡其布#BDB76B189,183,107
颜色样例LemonChiffon柠檬薄纱#FFFACD255,250,205
颜色样例Khaki卡其布#F0E68C240,230,140
颜色样例Gold#FFD700255,215,0
颜色样例GoldEnrod秋麒麟#DAA520218,165,32
颜色样例FloralWhite花的白色#FFFAF0255,250,240
颜色样例OldLace老饰带#FDF5E6253,245,230
颜色样例Wheat小麦色#F5DEB3245,222,179
颜色样例Moccasin鹿皮鞋#FFE4B5255,228,181
颜色样例Orange橙色#FFA500255,165,0
颜色样例PapayaWhip番木瓜#FFEFD5255,239,213
颜色样例BlanchedAlmond漂白的杏仁#FFEBCD255,235,205
颜色样例NavajoWhiteNavajo白#FFDEAD255,222,173
颜色样例AntiqueWhite古代的白色#FAEBD7250,235,215
颜色样例Tan晒黑#D2B48C210,180,140
颜色样例Bisque(浓汤)乳脂,番茄等#FFE4C4255,228,196
颜色样例DarkOrange深橙色#FF8C00255,140,0
颜色样例Linen亚麻布#FAF0E6250,240,230
颜色样例Peru秘鲁#CD853F205,133,63
颜色样例PeachPuff桃色#FFDAB9255,218,185
颜色样例SandyBrown沙棕色#F4A460244,164,96
颜色样例Chocolate巧克力#D2691E210,105,30
颜色样例SaddleBrown马鞍棕色#8B4513139,69,19
颜色样例SeaShell海贝壳#FFF5EE255,245,238
颜色样例Sienna黄土赭色#A0522D160,82,45
颜色样例LightSalmon浅鲜肉(鲑鱼)色#FFA07A255,160,122
颜色样例Coral珊瑚#FF7F50255,127,80
颜色样例OrangeRed橙红色#FF4500255,69,0
颜色样例DarkSalmon深鲜肉(鲑鱼)色#E9967A233,150,122
颜色样例Tomato番茄#FF6347255,99,71
颜色样例MistyRose薄雾玫瑰#FFE4E1255,228,225
颜色样例Salmon鲜肉(鲑鱼)色#FA8072250,128,114
颜色样例Snow#FFFAFA255,250,250
颜色样例LightCoral淡珊瑚色#F08080240,128,128
颜色样例RosyBrown玫瑰棕色#BC8F8F188,143,143
颜色样例IndianRed印度红#CD5C5C205,92,92

6、灰色系

颜色样例英文代码中文颜色名称HEX格式RGB格式
颜色样例White纯白#FFFFFF255,255,255
颜色样例WhiteSmoke白烟#F5F5F5245,245,245
颜色样例GainsboroGainsboro#DCDCDC220,220,220
颜色样例LightGrey浅灰色#D3D3D3211,211,211
颜色样例Silver银白色#C0C0C0192,192,192
颜色样例DarkGray深灰色#A9A9A9169,169,169
颜色样例Gray灰色#808080128,128,128
DimGrayDimGray暗淡的灰色#696969105,105,105
颜色样例Black纯黑#0000000,0,0

📖 博主致谢

感谢大家阅读到结尾,本次的文章就分享到这里,总结了【前端开发:颜色代码速查表【英文颜色、HEX格式、RGB格式】】,希望可以帮到大家,谢谢。

如果您觉得这篇文章有帮助到您的的话不妨【关注+点赞+收藏+评论+转发 】支持一下哟~~😛您的支持就是我更新的最大动力。👇👇👇👇👇👇
在这里插入图片描述


🛩往期精彩:

vue实现视频播放器功能,你学会了吗

vue实现图片预览功能,提高你的开发效率

前端获取当前系统时间/日期(vue写法)

vue后台管理做适配的最佳方案,你知道吗?

前端引入阿里图标库的最便捷方式

posted @ 2022-06-21 08:43  水香木鱼  阅读(2904)  评论(0编辑  收藏  举报