代码片段 → CSS → 命名颜色及其十六进制等效值 命名颜色及其十六进制等效值 Chris Coyier 于 2012年1月29日 颜色名称 HEX 颜色 AliceBlue #F0F8FF AntiqueWhite #FAEBD7 Aqua #00FFFF Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC Bisque #FFE4C4 Black #000000 BlanchedAlmond #FFEBCD Blue #0000FF BlueViolet #8A2BE2 Brown #A52A2A BurlyWood #DEB887 CadetBlue #5F9EA0 Chartreuse #7FFF00 Chocolate #D2691E Coral #FF7F50 CornflowerBlue #6495ED Cornsilk #FFF8DC Crimson #DC143C Cyan #00FFFF DarkBlue #00008B DarkCyan #008B8B DarkGoldenRod #B8860B DarkGray #A9A9A9 DarkGrey #A9A9A9 DarkGreen #006400 DarkKhaki #BDB76B DarkMagenta #8B008B DarkOliveGreen #556B2F Darkorange #FF8C00 DarkOrchid #9932CC DarkRed #8B0000 DarkSalmon #E9967A DarkSeaGreen #8FBC8F DarkSlateBlue #483D8B DarkSlateGray #2F4F4F DarkSlateGrey #2F4F4F DarkTurquoise #00CED1 DarkViolet #9400D3 DeepPink #FF1493 DeepSkyBlue #00BFFF DimGray #696969 DimGrey #696969 DodgerBlue #1E90FF FireBrick #B22222 FloralWhite #FFFAF0 ForestGreen #228B22 Fuchsia #FF00FF Gainsboro #DCDCDC GhostWhite #F8F8FF Gold #FFD700 GoldenRod #DAA520 Gray #808080 Grey #808080 Green #008000 GreenYellow #ADFF2F HoneyDew #F0FFF0 HotPink #FF69B4 IndianRed #CD5C5C Indigo #4B0082 Ivory #FFFFF0 Khaki #F0E68C Lavender #E6E6FA LavenderBlush #FFF0F5 LawnGreen #7CFC00 LemonChiffon #FFFACD LightBlue #ADD8E6 LightCoral #F08080 LightCyan #E0FFFF LightGoldenRodYellow #FAFAD2 LightGray #D3D3D3 LightGrey #D3D3D3 LightGreen #90EE90 LightPink #FFB6C1 LightSalmon #FFA07A LightSeaGreen #20B2AA LightSkyBlue #87CEFA LightSlateGray #778899 LightSlateGrey #778899 LightSteelBlue #B0C4DE LightYellow #FFFFE0 Lime #00FF00 LimeGreen #32CD32 Linen #FAF0E6 Magenta #FF00FF Maroon #800000 MediumAquaMarine #66CDAA MediumBlue #0000CD MediumOrchid #BA55D3 MediumPurple #9370D8 MediumSeaGreen #3CB371 MediumSlateBlue #7B68EE MediumSpringGreen #00FA9A MediumTurquoise #48D1CC MediumVioletRed #C71585 MidnightBlue #191970 MintCream #F5FFFA MistyRose #FFE4E1 Moccasin #FFE4B5 NavajoWhite #FFDEAD Navy #000080 OldLace #FDF5E6 Olive #808000 OliveDrab #6B8E23 Orange #FFA500 OrangeRed #FF4500 Orchid #DA70D6 PaleGoldenRod #EEE8AA PaleGreen #98FB98 PaleTurquoise #AFEEEE PaleVioletRed #D87093 PapayaWhip #FFEFD5 PeachPuff #FFDAB9 Peru #CD853F Pink #FFC0CB Plum #DDA0DD PowderBlue #B0E0E6 Purple #800080 Red #FF0000 RosyBrown #BC8F8F RoyalBlue #4169E1 SaddleBrown #8B4513 Salmon #FA8072 SandyBrown #F4A460 SeaGreen #2E8B57 SeaShell #FFF5EE Sienna #A0522D Silver #C0C0C0 SkyBlue #87CEEB SlateBlue #6A5ACD SlateGray #708090 SlateGrey #708090 Snow #FFFAFA SpringGreen #00FF7F SteelBlue #4682B4 Tan #D2B48C Teal #008080 Thistle #D8BFD8 Tomato #FF6347 Turquoise #40E0D0 Violet #EE82EE Wheat #F5DEB3 White #FFFFFF WhiteSmoke #F5F5F5 Yellow #FFFF00 YellowGreen #9ACD32
哇哦.. 非常棒的工作
如果可以按十六进制值排序就好了,如果你大约知道你想要什么颜色但不知道确切的颜色。
这是一个按十六进制排序的列表
https://w3schools.org.cn/cssref/css_colorsfull.asp
不过它们在十六进制中看起来仍然是乱序的。按色调排序可能会很有趣,但你会把灰色放在哪里,以及如何处理相同色调的不同饱和度水平呢?
尝试在任何类型的列表中对颜色进行排序的问题在于,列表是二维的,而颜色空间是三维的(不包括透明度通道),因此没有一个列表是足够的。
我的意思是列表是一维的。
@Raxin,从任何角度来看,那个页面上的“按十六进制排序”都没有做好,他们将十六进制转换为一个值来排序颜色,而实际上十六进制是三个值(红色、绿色、蓝色)。换句话说,他们犯了一个错误,将类似“#bada55”的东西作为一个十六进制数来处理,而实际上它是红色的“ba”值、绿色的“da”值和蓝色的“55”值。
我怎么会知道的?我本人也在尝试对颜色进行排序,并在第一次尝试时遇到了同样的错误,这与该页面上的排序相同。这是我的游乐场:http://colors.yur.io,随意查看源代码。
干得好,我喜欢这些颜色中的每一个都充满活力,而且看起来都非常棒。我现在有一种冲动想用“BurlyWood”作为背景或其他东西。
w3schools 有一个类似的表格 https://w3schools.org.cn/html/html_colornames.asp
这是我首先遇到的那个
Al
干得漂亮 Chris,谢谢你的列表!
这真的很有用——非常感谢——在我的书签中!
不错!在里面添加 hsla 也会很酷……
酷!!
我创建了一个Sublime Text 2正则表达式替换模式,它查找所有命名的css颜色并将它们替换为十六进制值。这需要安装Reg Replace插件才能工作。
https://gist.github.com/primitivehuman/6138823
我管理了所有带有名称的css颜色,并创建了一个单独的文件,以便轻松地将任何CSS颜色用于文本和背景。请查看这里 -> http://shaz3e.github.io/S3-Colors/
随机问题。有谁知道为什么紫红色/品红和青绿色/青色是重复的相同颜色(#FF00FF和#00FFFF分别)。所以实际上只有138种颜色?
这并不重要,但我一直想知道这是如何发生的……
灰色/灰色的原因相同(以及其变体,例如darkslategr[a|e]y)是等效的名称;不同的人使用不同的拼写或名称来指代相同的颜色。特别是,“紫红色”和“青绿色”是在HTML 3.0中定义的16种颜色名称中的两种,这些名称又来自MS Windows默认VGA 4位颜色调色板中引用的标准名称;但是,加色模型(RGB)长期以来将最大红色和蓝色光的组合称为“品红”,将最大绿色和蓝色光的组合称为“青色”,它们更广泛地被称为这些特定定义的技术术语,因此“紫红色”和“青绿色”基本上是为了向后兼容而继续得到支持,这些兼容性可以追溯到HTML 3和早期的Windows。
谢谢,这正好帮助了我GitHub上的一个项目,我称之为weblooks.css,您可以通过此链接分叉我的工作 http://www.github.com/frinteractive/weblooks.css
我使用Boxing.css为“颜色名称”、“颜色背景”和“颜色前景”分组样式字符串。CSS3盒子样式总是有帮助的,所以Shaz在IO中提供了一个很好的入门。但还有更多,每个都有自己的风格。Mozilla一如既往地走得很远(RGBdec、RGB%、HSL、HEX、SHORT以及大量的解释)。
资源
http://dev.w3.org/csswg/css-color/
http://www.w3.org/TR/SVG/types.html#ColorKeywords
http://meyerweb.com/eric/css/colors/
https://w3schools.org.cn/cssref/css_colornames.asp
https://w3schools.org.cn/cssref/css_colorsfull.asp
http://www.learningwebdesign.com/colornames.html
http://www.cssportal.com/css3-color-names/
http://shaz3e.github.io/S3-Colors/
https://mdn.org.cn/en/docs/Web/CSS/color_value
http://www.colorconversion.co – 我最近开发了这个颜色转换网站来帮助开发人员、设计师或任何对颜色转换感兴趣的人。它是免费的,使用起来很有趣 :)
为什么这些没有按预期显示
浅灰色
灰色
深灰色
深灰色怎么会比灰色亮这么多?
这读起来像帕特里克·贝特曼的午餐。
此列表缺少“rebeccapurple”:https://css-tricks.org.cn/rebbeccapurple-663399/
两个颜色的值列错了。
MediumPurple列为#9370D8。这应该是#9370DB。
PaleVioletRed列为#D87093。这应该是#DB7093。
在这两种情况下,有人在构建此页面上的列表时将字母B输入为数字8。Dennis Dewey在2013年8月2日的帖子中也有错误的颜色值。
我赞成将RebeccaPurple添加到列表中。虽然它不是官方的CSS3颜色,但自2014年6月起它已成为官方CSS4规范的一部分,并且自2014年起已得到所有主要网络浏览器的支持。
CSS3列表 https://www.w3.org/TR/css3-color/
CSS4列表 https://www.w3.org/TR/css-color-4/ 有RebeccaPurple
页面应该提到颜色名称不区分大小写。“YellowGreen”和“yellowgreen”相同。
虽然它对显示的颜色没有影响,但以下颜色名称是单个英文单词,不应在列表中作为两个单词使用驼峰命名法:碧绿色、金黄杆(用作多个颜色名称的一部分)、蜜色和贝壳色。
这可以组织成一个色轮以供参考吗?如果我无限向下滚动,几何形状很难记住。