这篇文章发布于 2010年08月30日,星期一,19:55,归类于 CSS相关。 阅读 207339 次, 今日 5 次 4 条评论
by zhangxinxu from https://www.zhangxinxu.com
本文地址:https://www.zhangxinxu.com/wordpress/?p=1064
颜色名称也称为颜色关键字,像我们熟悉的black表示黑色,white表示白色,blue表示蓝色等。实际上,在CSS的颜色定义中,总共有147种颜色关键字,所有者147种颜色名字均取自X Windows 系统,X 颜色名,所以即使这147个颜色名看上去不是很标准,支持也是非常不错的。
需要注意的是,在IE下,关于灰色,其中的字母”e”是不认的,它只认gray中的”a”而不认grey中的”e”,所以IE浏览器下,CSS3中的颜色名实际上只有140个,而不是147个。
其他就不多说了,关于这147个颜色名称关键字,请看下表:
名称 | 16进制 | 百分值 | 整数值 | 16进制缩写 | 示例 |
aliceblue | #f0f8ff | rgb(94.1%,96.9%,100%) | rgb(240,248,255) | ||
antiquewhite | #faebd7 | rgb(98%,92.2%,84.3%) | rgb(250,235,215) | ||
aqua | #00ffff | rgb(0%,100%,100%) | rgb(0,255,255) | #0ff | |
aquamarine | #7fffd4 | rgb(49.8%,100%,83.1%) | rgb(127,255,212) | ||
azure | #f0ffff | rgb(94.1%,100%,100%) | rgb(240,255,255) | ||
beige | #f5f5dc | rgb(96.1%,96.1%,86.3%) | rgb(245,245,220) | ||
bisque | #ffe4c4 | rgb(100%,89.4%,76.9%) | rgb(255,228,196) | ||
black | #000000 | rgb(0%,0%,0%) | rgb(0,0,0) | #000 | |
blanchedalmond | #ffebcd | rgb(100%,92.2%,80.4%) | rgb(255,235,205) | ||
blue | #0000ff | rgb(0%,0%,100%) | rgb(0,0,255) | #00f | |
blueviolet | #8a2be2 | rgb(54.1%,16.9%,88.6%) | rgb(138,43,226) | ||
brown | #a52a2a | rgb(64.7%,16.5%,16.5%) | rgb(165,42,42) | ||
burlywood | #deb887 | rgb(87.1%,72.2%,52.9%) | rgb(222,184,135) | ||
cadetblue | #5f9ea0 | rgb(37.3%,62%,62.7%) | rgb(95,158,160) | ||
chartreuse | #7fff00 | rgb(49.8%,100%,0%) | rgb(127,255,0) | ||
chocolate | #d2691e | rgb(82.4%,41.1%,11.8%) | rgb(210,105,30) | ||
coral | #ff7f50 | rgb(100%,49.8%,31.4%) | rgb(255,127,80) | ||
cornflowerblue | #6495ed | rgb(39.2%,58.4%,92.9%) | rgb(100,149,237) | ||
cornsilk | #fff8dc | rgb(100%,97.3%,86.3%) | rgb(255,248,220) | ||
crimson | #dc143c | rgb(86.3%,7.8%,23.5%) | rgb(220,20,60) | ||
cyan | #00ffff | rgb(0%,100%,100%) | rgb(0,255,255) | #0ff | |
darkblue | #00008b | rgb(0%,0%,54.5%) | rgb(0,0,139) | ||
darkcyan | #008b8b | rgb(0%,54.5%,54.5%) | rgb(0,139,139) | ||
darkgoldenrod | #b8860b | rgb(72.2%,52.5%,4.3%) | rgb(184,134,11) | ||
darkgray | #a9a9a9 | rgb(66.3%,66.3%,66.3%) | rgb(169,169,169) | ||
darkgreen | #006400 | rgb(0%,39.2%,0%) | rgb(0,100,0) | ||
darkgrey | #a9a9a9 | rgb(66.3%,66.3%,66.3%) | rgb(169,169,169) | ||
darkkhaki | #bdb76b | rgb(74.1%,71.8%,42%) | rgb(189,183,107) | ||
darkmagenta | #8b008b | rgb(54.5%,0%,54.5%) | rgb(139,0,139) | ||
darkolivegreen | #556b2f | rgb(33.3%,42%,18.4%) | rgb(85,107,47) | ||
darkorange | #ff8c00 | rgb(100%,54.9%,0%) | rgb(255,140,0) | ||
darkorchid | #9932cc | rgb(60%,19.6%,80%) | rgb(153,50,204) | ||
darkred | #8b0000 | rgb(54.5%,0%,0%) | rgb(139,0,0) | ||
darksalmon | #e9967a | rgb(91.4%,58.8%,47.8%) | rgb(233,150,122) | ||
darkseagreen | #8fbc8f | rgb(56.1%,73.7%,56.1%) | rgb(143,188,143) | ||
darkslateblue | #483d8b | rgb(28.2%,23.9%,54.5%) | rgb(72,61,139) | ||
darkslategray | #2f4f4f | rgb(18.4%,31%,31%) | rgb(47,79,79) | ||
darkslategrey | #2f4f4f | rgb(18.4%,31%,31%) | rgb(47,79,79) | ||
darkturquoise | #00ced1 | rgb(0%,80.8%,82%) | rgb(0,206,209) | ||
darkviolet | #9400d3 | rgb(58%,0%,82.7%) | rgb(148,0,211) | ||
deeppink | #ff1493 | rgb(100%,7.8%,57.6%) | rgb(255,20,147) | ||
deepskyblue | #00bfff | rgb(0%,74.9%,100%) | rgb(0,191,255) | ||
dimgray | #696969 | rgb(41.1%,41.1%,41.1%) | rgb(105,105,105) | ||
dimgrey | #696969 | rgb(41.1%,41.1%,41.1%) | rgb(105,105,105) | ||
dodgerblue | #1e90ff | rgb(11.8%,56.5%,100%) | rgb(30,144,255) | ||
firebrick | #b22222 | rgb(69.8%,13.3%,13.3%) | rgb(178,34,34) | ||
floralwhite | #fffaf0 | rgb(100%,98%,94.1%) | rgb(255,250,240) | ||
forestgreen | #228b22 | rgb(13.3%,54.5%,13.3%) | rgb(34,139,34) | ||
fuchsia | #ff00ff | rgb(100%,0%,100%) | rgb(255,0,255) | #f0f | |
gainsboro | #dcdcdc | rgb(86.3%,86.3%,86.3%) | rgb(220,220,220) | ||
ghostwhite | #f8f8ff | rgb(97.3%,97.3%,100%) | rgb(248,248,255) | ||
gold | #ffd700 | rgb(100%,84.3%,0%) | rgb(255,215,0) | ||
goldenrod | #daa520 | rgb(85.5%,64.7%,12.5%) | rgb(218,165,32) | ||
gray | #808080 | rgb(50.2%,50.2%,50.2%) | rgb(128,128,128) | ||
green | #008000 | rgb(0%,50.2%,0%) | rgb(0,128,0) | ||
greenyellow | #adff2f | rgb(67.8%,100%,18.4%) | rgb(173,255,47) | ||
grey | #808080 | rgb(50.2%,50.2%,50.2%) | rgb(128,128,128) | ||
honeydew | #f0fff0 | rgb(94.1%,100%,94.1%) | rgb(240,255,240) | ||
hotpink | #ff69b4 | rgb(100%,41.1%,70.6%) | rgb(255,105,180) | ||
indianred | #cd5c5c | rgb(80.4%,36%,36%) | rgb(205,92,92) | ||
indigo | #4b0082 | rgb(29.4%,0%,51%) | rgb(75,0,130) | ||
ivory | #fffff0 | rgb(100%,100%,94.1%) | rgb(255,255,240) | ||
khaki | #f0e68c | rgb(94.1%,90.2%,54.9%) | rgb(240,230,140) | ||
lavender | #e6e6fa | rgb(90.2%,90.2%,98%) | rgb(230,230,250) | ||
lavenderblush | #fff0f5 | rgb(100%,94.1%,96.1%) | rgb(255,240,245) | ||
lawngreen | #7cfc00 | rgb(48.6%,98.8%,0%) | rgb(124,252,0) | ||
lemonchiffon | #fffacd | rgb(100%,98%,80.4%) | rgb(255,250,205) | ||
lightblue | #add8e6 | rgb(67.8%,84.7%,90.2%) | rgb(173,216,230) | ||
lightcoral | #f08080 | rgb(94.1%,50.2%,50.2%) | rgb(240,128,128) | ||
lightcyan | #e0ffff | rgb(87.8%,100%,100%) | rgb(224,255,255) | ||
lightgoldenrodyellow | #fafad2 | rgb(98%,98%,82.4%) | rgb(250,250,210) | ||
lightgray | #d3d3d3 | rgb(82.7%,82.7%,82.7%) | rgb(211,211,211) | ||
lightgreen | #90ee90 | rgb(56.5%,93.3%,56.5%) | rgb(144,238,144) | ||
lightgrey | #d3d3d3 | rgb(82.7%,82.7%,82.7%) | rgb(211,211,211) | ||
lightpink | #ffb6c1 | rgb(100%,71.4%,75.7%) | rgb(255,182,193) | ||
lightsalmon | #ffa07a | rgb(100%,62.7%,47.8%) | rgb(255,160,122) | ||
lightseagreen | #20b2aa | rgb(12.5%,69.8%,66.7%) | rgb(32,178,170) | ||
lightskyblue | #87cefa | rgb(52.9%,80.8%,98%) | rgb(135,206,250) | ||
lightslategray | #778899 | rgb(46.7%,53.3%,60%) | rgb(119,136,153) | #789 | |
lightslategrey | #778899 | rgb(46.7%,53.3%,60%) | rgb(119,136,153) | #789 | |
lightsteelblue | #b0c4de | rgb(69%,76.9%,87.1%) | rgb(176,196,222) | ||
lightyellow | #ffffe0 | rgb(100%,100%,87.8%) | rgb(255,255,224) | ||
lime | #00ff00 | rgb(0%,100%,0%) | rgb(0,255,0) | #0f0 | |
limegreen | #32cd32 | rgb(19.6%,80.4%,19.6%) | rgb(50,205,50) | ||
linen | #faf0e6 | rgb(98%,94.1%,90.2%) | rgb(250,240,230) | ||
magenta | #ff00ff | rgb(100%,0%,100%) | rgb(255,0,255) | #f0f | |
maroon | #800000 | rgb(50.2%,0%,0%) | rgb(128,0,0) | ||
mediumaquamarine | #66cdaa | rgb(40%,80.4%,66.7%) | rgb(102,205,170) | ||
mediumblue | #0000cd | rgb(0%,0%,80.4%) | rgb(0,0,205) | ||
mediumorchid | #ba55d3 | rgb(72.9%,33.3%,82.7%) | rgb(186,85,211) | ||
mediumpurple | #9370db | rgb(57.6%,43.9%,85.9%) | rgb(147,112,219) | ||
mediumseagreen | #3cb371 | rgb(23.5%,70.2%,44.3%) | rgb(60,179,113) | ||
mediumslateblue | #7b68ee | rgb(48.2%,40.8%,93.3%) | rgb(123,104,238) | ||
mediumspringgreen | #00fa9a | rgb(0%,98%,60.4%) | rgb(0,250,154) | ||
mediumturquoise | #48d1cc | rgb(28.2%,82%,80%) | rgb(72,209,204) | ||
mediumvioletred | #c71585 | rgb(78%,8.2%,52.2%) | rgb(199,21,133) | ||
midnightblue | #191970 | rgb(9.8%,9.8%,43.9%) | rgb(25,25,112) | ||
mintcream | #f5fffa | rgb(96.1%,100%,98%) | rgb(245,255,250) | ||
mistyrose | #ffe4e1 | rgb(100%,89.4%,88.2%) | rgb(255,228,225) | ||
moccasin | #ffe4b5 | rgb(100%,89.4%,71%) | rgb(255,228,181) | ||
navajowhite | #ffdead | rgb(100%,87.1%,67.8%) | rgb(255,222,173) | ||
navy | #000080 | rgb(0%,0%,50.2%) | rgb(0,0,128) | ||
oldlace | #fdf5e6 | rgb(99.2%,96.1%,90.2%) | rgb(253,245,230) | ||
olive | #808000 | rgb(50.2%,50.2%,0%) | rgb(128,128,0) | ||
olivedrab | #6b8e23 | rgb(42%,55.7%,13.7%) | rgb(107,142,35) | ||
orange | #ffa500 | rgb(100%,64.7%,0%) | rgb(255,165,0) | ||
orangered | #ff4500 | rgb(100%,27.1%,0%) | rgb(255,69,0) | ||
orchid | #da70d6 | rgb(85.5%,43.9%,83.9%) | rgb(218,112,214) | ||
palegoldenrod | #eee8aa | rgb(93.3%,91%,66.7%) | rgb(238,232,170) | ||
palegreen | #98fb98 | rgb(59.6%,98.4%,59.6%) | rgb(152,251,152) | ||
paleturquoise | #afeeee | rgb(68.6%,93.3%,93.3%) | rgb(175,238,238) | ||
palevioletred | #db7093 | rgb(85.9%,43.9%,57.6%) | rgb(219,112,147) | ||
papayawhip | #ffefd5 | rgb(100%,93.7%,83.5%) | rgb(255,239,213) | ||
peachpuff | #ffdab9 | rgb(100%,85.5%,72.5%) | rgb(255,218,185) | ||
peru | #cd853f | rgb(80.4%,52.2%,24.7%) | rgb(205,133,63) | ||
pink | #ffc0cb | rgb(100%,75.3%,79.6%) | rgb(255,192,203) | ||
plum | #dda0dd | rgb(86.7%,62.7%,86.7%) | rgb(221,160,221) | ||
powderblue | #b0e0e6 | rgb(69%,87.8%,90.2%) | rgb(176,224,230) | ||
purple | #800080 | rgb(50.2%,0%,50.2%) | rgb(128,0,128) | ||
red | #ff0000 | rgb(100%,0%,0%) | rgb(255,0,0) | #f00 | |
rosybrown | #bc8f8f | rgb(73.7%,56.1%,56.1%) | rgb(188,143,143) | ||
royalblue | #4169e1 | rgb(25.5%,41.1%,100%) | rgb(65,105,225) | ||
saddlebrown | #8b4513 | rgb(54.5%,27.1%,7.5%) | rgb(139,69,19) | ||
salmon | #fa8072 | rgb(98%,50.2%,44.7%) | rgb(250,128,114) | ||
sandybrown | #f4a460 | rgb(95.7%,64.3%,37.6%) | rgb(244,164,96) | ||
seagreen | #2e8b57 | rgb(18%,54.5%,34.1%) | rgb(46,139,87) | ||
seashell | #fff5ee | rgb(100%,96.1%,93.3%) | rgb(255,245,238) | ||
sienna | #a0522d | rgb(62.7%,32.2%,17.6%) | rgb(160,82,45) | ||
silver | #c0c0c0 | rgb(75.3%,75.3%,75.3%) | rgb(192,192,192) | ||
skyblue | #87ceeb | rgb(52.9%,80.8%,92.2%) | rgb(135,206,235) | ||
slateblue | #6a5acd | rgb(41.6%,35.3%,80.4%) | rgb(106,90,205) | ||
slategray | #708090 | rgb(43.9%,50.2%,56.5%) | rgb(112,128,144) | ||
slategrey | #708090 | rgb(43.9%,50.2%,56.5%) | rgb(112,128,144) | ||
snow | #fffafa | rgb(100%,98%,98%) | rgb(255,250,250) | ||
springgreen | #00ff7f | rgb(0%,100%,49.8%) | rgb(0,255,127) | ||
steelblue | #4682b4 | rgb(27.5%,51%,70.6%) | rgb(70,130,180) | ||
tan | #d2b48c | rgb(82.4%,70.6%,54.9%) | rgb(210,180,140) | ||
teal | #008080 | rgb(0%,50.2%,50.2%) | rgb(0,128,128) | ||
thistle | #d8bfd8 | rgb(84.7%,74.9%,84.7%) | rgb(216,191,216) | ||
tomato | #ff6347 | rgb(100%,38.8%%,27.8%) | rgb(255,99,71) | ||
turquoise | #40e0d0 | rgb(25.1%,87.7%,81.6%) | rgb(64,224,208) | ||
violet | #ee82ee | rgb(93.3%,51%,93.3%) | rgb(238,130,238) | ||
wheat | #f5deb3 | rgb(96.1%,87.1%,70.2%) | rgb(245,222,179) | ||
white | #ffffff | rgb(100%,100%,100%) | rgb(255,255,255) | #fff | |
whitesmoke | #f5f5f5 | rgb(96.1%,96.1%,96.1%) | rgb(245,245,245) | ||
yellow | #ffff00 | rgb(100%,100%,0%) | rgb(255,255,0) | #ff0 | |
yellowgreen | #9acd32 | rgb(60.4%,80.4%,19.6%) | rgb(154,205,50) |
关于此表,我还专门独立出来了一个页面,专门用来放置这个表格,方面查阅与收藏,您有兴趣可以狠狠地点击这里:CSS3下的147个颜色名称独立页面
数据来源:http://www.codenique…es.php
本文为原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[https://www.zhangxinxu.com]
本文地址:https://www.zhangxinxu.com/wordpress/?p=1064
(完)
- 纯客户端页面关键字搜索高亮jQuery插件 (0.496)
- 自己以前架构CSS/JS时候挖过的一些坑 (0.496)
- 小tip: 使用meta实现页面的定时刷新或跳转 (0.496)
- 了解infinity、pi等CSS calc()计算关键字 (0.496)
- CSS前景背景自动配色技术简介 (0.391)
- JS HEX十六进制与RGB, HSL颜色的相互转换 (0.372)
- 小tip: 了解LinearRGB和sRGB以及使用JS相互转换 (0.372)
- Canvas中颜色过渡动画效果的实现 (0.372)
- 3D LUT 滤镜颜色映射原理剖析与JS实现 (0.372)
- 使用CSS3 ::selection伪元素改变文本选中颜色 (0.255)
- CSS3 @font-face实现颜色大小可控的三角效果 (RANDOM - 0.131)
transparent 透明, 是颜色关键字吗, 是属于哪个系统的呢 [抱拳]
前辈,我有一个问题。我有办法自己定义自己的颜色吗?
比如我定义 beauty #F90,
页面中用到的地方,我就写 color:beauty;
等到我要换皮肤的时候,把顶上的这个 #F90 改一下。有多个值的时候,我就调整那几个值。
诶,不知道现在本来的css有没有这个办法。此致敬礼。
@双如 这有些类似Sass, Less, Stylus,你有兴趣可以研究研究。
现在还没开始吧,不过我看有人做这方面的视频了,我用文字记录下来了,你可以看看http://www.w3cfuns.com/blog-5425789-5398338.html