草庐IT

前端开发:颜色代码速查表【英文颜色、HEX(十六进制)格式、RGB格式、十进制】

用十年奋斗.я 2023-04-21 原文


💌 作者简介

  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,603943132
颜色样例PaleGodenrod灰秋麒麟#EEE8AA238,232,1701510816
颜色样例Cornislk玉米色#FFF8DC255,248,2202693312
颜色样例BrulyWood结实的树#DEB887222,184,1354194480
颜色样例Red纯红#FF0000255,0,016711 680
颜色样例Brown棕色#A52A2A165,42,422763437
颜色样例FireBrick耐火砖#B22222178,34,342237106
颜色样例DarkRed深红色#8B0000139,0,04194443
颜色样例Maroon栗色#800000128,0,0144
颜色样例LightPink浅粉红#FFB6C1255,182,19312695295
颜色样例Pink粉红#FFC0CB255,192,20313484287
颜色样例LavenderBlush脸红的淡紫色#FFF0F5255,240,24516118015
颜色样例PaleVioletRed苍白的紫罗兰红色#DB7093219,112,1479662690
颜色样例HotPink热情的粉红#FF69B4255,105,18011823615
颜色样例DeepPink深粉色#FF1493255,20,1479639167
颜色样例MediumVioletRed适中的紫罗兰红色#C71585199,21,1338721863
颜色样例牡丹红#FE00FF16711935

2、紫色系

颜色样例英文代码中文颜色名称HEX格式RGB格式十进制
颜色样例Orchid兰花的紫色#DA70D6218,112,21414381274
颜色样例Thistle#D8BFD8216,191,21614270424
颜色样例plum李子#DDA0DD221,160,22114524644
颜色样例Violet紫罗兰#EE82EE238,130,23815631086
颜色样例Magenta洋红#FF00FF255,0,25516711935
颜色样例Fuchsia灯笼海棠(紫红色)#FF00FF255,0,25516732925
颜色样例DarkMagenta深洋红色#8B008B139,0,13910813579
颜色样例Purple紫色#800080128,0,1288388751
颜色样例MediumOrchid适中的兰花紫#BA55D3186,85,21114979258
颜色样例DarkVoilet深紫罗兰色#9400D3148,0,21114680282
颜色样例DarkOrchid深兰花紫#9932CC153,50,20413513369
颜色样例Indigo靛青#4B008275,0,1308978507
颜色样例BlueViolet深紫罗兰的蓝色#8A2BE2138,43,22614822282
颜色样例MediumPurple适中的紫色#9370DB147,112,21914381203
颜色样例MediumSlateBlue适中的板岩暗蓝灰色#7B68EE123,104,23815689851
颜色样例SlateBlue板岩暗蓝灰色#6A5ACD106,90,20513525354
颜色样例DarkSlateBlue深岩暗蓝灰色#483D8B72,61,1399594208
颜色样例Lavender熏衣草花的淡紫色#E6E6FA230,230,25016443110
颜色样例GhostWhite幽灵的白色#F8F8FF248,248,25516775416

3、蓝色系

颜色样例英文代码中文颜色名称HEX格式RGB格式十进制
颜色样例Blue纯蓝#0000FF0,0,255255
颜色样例MediumBlue适中的蓝色#0000CD0,0,20513434880
颜色样例MidnightBlue午夜的蓝色#19197025,25,1127346457
颜色样例DarkBlue深蓝色#00008B0,0,1399585472
颜色样例Navy海军蓝#0000800,0,1289708544
颜色样例RoyalBlue皇军蓝#4169E165,105,22514842201
颜色样例CornflowerBlue矢车菊的蓝色#6495ED100,149,23715636324
颜色样例LightSteelBlue淡钢蓝#B0C4DE176,196,22214665396
颜色样例LightSlateGray浅石板灰#778899119,136,15310259063
颜色样例SlateGray石板灰#708090112,128,1449863280
颜色样例DoderBlue道奇蓝#1E90FF30,144,2552744528
颜色样例AliceBlue爱丽丝蓝#F0F8FF240,248,25516775408
颜色样例SteelBlue钢蓝#4682B470,130,18012616262
颜色样例LightSkyBlue淡蓝色#87CEFA135,206,25016437390
颜色样例SkyBlue天蓝色#87CEEB135,206,23515519623
颜色样例DeepSkyBlue深天蓝#00BFFF0,191,25516630528
颜色样例LightBLue淡蓝#ADD8E6173,216,23015194802
颜色样例PowDerBlue火药蓝#B0E0E6176,224,23015196596
颜色样例CadetBlue军校蓝#5F9EA095,158,16010919519
颜色样例Azure蔚蓝色#F0FFFF240,255,25516514545
颜色样例LightCyan淡青色#E1FFFF225,255,25516777185
颜色样例PaleTurquoise苍白的绿宝石#AFEEEE175,238,23815658676
颜色样例Cyan青色#00FFFF82,255,25565535
颜色样例Aqua水绿色#00FFFF0,255,25516580096
颜色样例DarkTurquoise深绿宝石#00CED10,206,20913815874
颜色样例DarkSlateGray深石板灰#2F4F4F47,79,796645589
颜色样例DarkCyan深青色#008B8B0,139,1399603840
颜色样例Teal水鸭色#0080800,128,1288684032
颜色样例MediumTurquoise适中的绿宝石#48D1CC72,209,20413554528
颜色样例LightSeaGreen浅海洋绿#20B2AA32,178,17011973671
颜色样例Turquoise绿宝石#40E0D064,224,20813754432
颜色样例海蓝#40E0D0155,218,1457396243
颜色样例蓝紫色#9D5F9D157,95,15710313629

4、绿色系

颜色样例英文代码中文颜色名称HEX格式RGB格式十进制
颜色样例Auqamarin绿玉\碧绿色#7FFFAA127,255,17041135
颜色样例MediumAquamarine适中的碧绿色#00FA9A0,250,15411521908
颜色样例MediumSpringGreen适中的春天的绿色#F5FFFA245,255,25010156544
颜色样例MintCream薄荷奶油#00FF7F0,255,12716449525
颜色样例SpringGreen春天的绿色#3CB37160,179,11310288896
颜色样例SeaGreen海洋绿#2E8B5746,139,876393134
颜色样例Honeydew蜂蜜#F0FFF0240,255,24015794160
颜色样例LightGreen淡绿色#90EE90144,238,14411005584
颜色样例PaleGreen苍白的绿色#98FB98152,251,15211533208
颜色样例DarkSeaGreen深海洋绿#8FBC8F143,188,1439879183
颜色样例LimeGreen酸橙绿#32CD3250,205,5065280
颜色样例Lime酸橙色#00FF000,255,065359
颜色样例ForestGreen森林绿#228B2234,139,348817442
颜色样例Green纯绿#0080000,128,04229440
颜色样例DarkGreen深绿色#0064000,100,02713088
颜色样例Chartreuse查特酒绿#7FFF00127,255,04259722
颜色样例LawnGreen草坪绿#7CFC00124,252,064636
颜色样例GreenYellow绿黄色#ADFF2F173,255,474390829
颜色样例OliveDrab橄榄土褐色#556B2F85,107,478359531
颜色样例Beige米色(浅褐色)#6B8E23107,142,3514480886
颜色样例LightGoldenrodYellow浅秋麒麟黄#FAFAD2250,250,21013827068
颜色样例Ivory象牙#FFFFF0255,255,24015794175

5、黄色系

颜色样例英文代码中文颜色名称HEX格式RGB格式十进制
颜色样例LightYellow浅黄色#FFFFE0255,255,22414811135
颜色样例Yellow纯黄#FFFF00255,255,016776960
颜色样例Olive橄榄#808000128,128,07569536
颜色样例DarkKhaki深卡其布#BDB76B189,183,1077059389
颜色样例LemonChiffon柠檬薄纱#FFFACD255,250,20513630207
颜色样例Khaki卡其布#F0E68C240,230,1409234160
颜色样例Gold#FFD700255,215,04381183
颜色样例GoldEnrod秋麒麟#DAA520218,165,322139610
颜色样例GoldEnrod黄铜色#DAA520218,165,326007480
颜色样例FloralWhite花的白色#FFFAF0255,250,24015989503
颜色样例OldLace老饰带#FDF5E6253,245,23015201789
颜色样例Wheat小麦色#F5DEB3245,222,17912050421
颜色样例Moccasin鹿皮鞋#FFE4B5255,228,18111920639
颜色样例Orange橙色#FFA500255,165,042494
颜色样例PapayaWhip番木瓜#FFEFD5255,239,21314086399
颜色样例BlanchedAlmond漂白的杏仁#FFEBCD255,235,20513561086
颜色样例NavajoWhiteNavajo白#FFDEAD255,222,17311394815
颜色样例AntiqueWhite古代的白色#FAEBD7250,235,21514216442
颜色样例Tan晒黑#D2B48C210,180,1409221330
颜色样例Bisque(浓汤)乳脂,番茄等#FFE4C4255,228,19612903679
颜色样例DarkOrange深橙色#FF8C00255,140,036607
颜色样例Linen亚麻布#FAF0E6250,240,23015134970
颜色样例Peru秘鲁#CD853F205,133,636587853
颜色样例PeachPuff桃色#FFDAB9255,218,18512442367
颜色样例SandyBrown沙棕色#F4A460244,164,966333686
颜色样例Chocolate巧克力#D2691E210,105,306042391
颜色样例SaddleBrown马鞍棕色#8B4513139,69,192704779
颜色样例SeaShell海贝壳#FFF5EE255,245,23815660543
颜色样例Sienna黄土赭色#A0522D160,82,453822240
颜色样例LightSalmon浅鲜肉(鲑鱼)色#FFA07A255,160,1228824318
颜色样例Coral珊瑚#FF7F50255,127,805275647
颜色样例OrangeRed橙红色#FF4500255,69,04212223
颜色样例DarkSalmon深鲜肉(鲑鱼)色#E9967A233,150,1228034025
颜色样例Tomato番茄#FF6347255,99,715071871
颜色样例MistyRose薄雾玫瑰#FFE4E1255,228,22514870015
颜色样例Salmon鲜肉(鲑鱼)色#FA8072250,128,1147766778
颜色样例Snow#FFFAFA255,250,25016448255
颜色样例LightCoral淡珊瑚色#F08080240,128,1288421616
颜色样例RosyBrown玫瑰棕色#BC8F8F188,143,1439869502
颜色样例IndianRed印度红#CD5C5C205,92,926053069

6、灰色系

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

📖 博主致谢

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

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


🛩往期精彩:

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

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

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

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

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

有关前端开发:颜色代码速查表【英文颜色、HEX(十六进制)格式、RGB格式、十进制】的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby - 如何在 buildr 项目中使用 Ruby 代码? - 2

    如何在buildr项目中使用Ruby?我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序,我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/),但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻,因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  3. ruby-on-rails - Rails 源代码 : initialize hash in a weird way? - 2

    在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中,它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案 查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has

  4. ruby - 使用 C 扩展开发 ruby​​gem 时,如何使用 Rspec 在本地进行测试? - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时,我会遵循TDD的过程,我会写一个失败的规范,然后处理代码直到它通过,等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb,如何运行我的规范并仍然加载我的C扩展?当我更改C代码时,我需要采取哪些步骤来重新编译代码?这可能是个愚蠢的问题,但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时,我确实得到了一个Makefile(在整个项目的根目录中),然后当

  5. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem,所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  6. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序,它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择,是开发还是生产,一些方法的逻辑应该改变,这取决于部署类型。是否有任何想法,如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现? 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  7. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码,但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如,我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码?我知道在pry中我可以执行类似show-methodmethod的操作,但我如何才能对Rails框架中的方法执行此操作?您对我如何更好地理解Gem及其API有什么建议吗?仅仅阅读源代码似乎真的很难,尤其是对于框架。谢谢! 最佳答案 Ru

  8. ruby - 是否可以覆盖 gemfile 进行本地开发? - 2

    我们的git存储库中目前有一个Gemfile。但是,有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它,我必须将它添加到我们的Gemfile中,但每次我checkout到我们的master/dev主分支时,由于与跟踪的gemfile冲突,我必须删除它。我想要的是类似Gemfile.local的东西,它将继承从Gemfile导入的gems,但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗? 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

  9. ruby - 模块嵌套代码风格偏好 - 2

    我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个,因为它显然有一个缺点?我有一种直觉,它可能与性能有关,因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是,据我所知,没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别,可能也是最著名的,是你的

  10. ruby-on-rails - 将 Ruby 中的日期/时间格式化为 YYYY-MM-DD HH :MM:SS - 2

    这个问题在这里已经有了答案:Railsformattingdate(4个答案)关闭4年前。我想格式化Time.Now函数以显示YYYY-MM-DDHH:MM:SS而不是:“2018-03-0909:47:19+0000”该函数需要放在时间中.现在功能。require‘roo’require‘roo-xls’require‘byebug’file_name=ARGV.first||“Template.xlsx”excel_file=Roo::Spreadsheet.open(“./#{file_name}“,extension::xlsx)xml=Nokogiri::XML::Build

随机推荐