- 标准RGB色彩空间 - css 颜色

乐乐1年前 (2023-11-21)阅读数 22#技术干货

文章标签颜色

版本：CSS3

CSS 数据类型表示一种标准RGB色彩空间（sRGB color space）的颜色。一种颜色可以用以下任意的方式来描述：

使用一个关键字
使用RGB立体坐标（RGB cubic-coordinate）系统（以"#"加十六进制或者 rgb()和 rgba()函数表达式的形式）
使用HSL圆柱坐标（HSL cylindrical-coordinate）系统（以 hsl()和 hsla()函数表达式的形式）

注意，以最新的 CSS3 颜色为准，公认颜色值列表已增加到成形的规范中。

一个与 sRGB 空间中色彩相关联的值也有一个阿尔法通道（alpha-channel）坐标，即透明度值，来标明颜色如何与它的背景色混合（composite）。

尽管 CSS 颜色值被精确定义，但在不同的输出设备上仍然有可能显示不一。它们大多数是不可被校准的，而且有些浏览器不支持输出设备的色彩配置（color profile）。除此之外，颜色渲染可以丰富多彩。

注意： W3C 的 WCAG 2.0（网页内容可访问性准则 2.0）介绍文档中强烈建议网页制作人员不要使用颜色作为唯一的方式去传达某个具体的信息，行为或结果。一些用户在分辨颜色上存在问题从而所传达的信息可能不被理解。当然，这并不是要阻止颜色的使用，只有在使用颜色作为唯一的方式去描述一些信息时才应当避免。

篡改

CSS 数据类型的值可以被篡改以便表演动画或创建gradient（渐变）值。在那种情况下，它们基于红，绿，蓝各部分来篡改，各自用一个浮点实数来控制。注意，颜色的篡改发生在预乘阿尔法值的标准RGB色彩空间（alpha-premultiplied sRGBA color space）以防止显示意外的灰色调。在动画中，篡改的速率由动画相关的时间函数（timing function）来决定。

色彩关键字

色彩关键字是不区分大小写的标识符，它表示一个具体的颜色，例如 red, blue, brown, lightseagreen 。使用名称来表述颜色，尽管（颜色的）名称基本上是人工（命名）的。可接受值的列表经由不同的规范而变化了许多：

CSS 标准 1 只接受 16 个基本颜色，因它们来源于 VGA 显卡所显示的颜色集合而被称为 VGA colors （视频图形阵列色彩）。
CSS 标准 2 增加了 orange 关键字。
从一开始，浏览器接受其它的颜色，由于一些早期浏览器是 X11 应用程序，这些颜色大多数是 X11 命名的颜色列表，虽然有一点不同。SVG 1.0 是首个正式定义这些关键字的标准；CSS 色彩标准 3 也正式定义了这些关键字。它们经常被称作扩张的颜色关键字， X11 颜色或 SVG 颜色。

在使用关键字时有几个需要留意的注意事项：

除了通常的 16 个 HTML 基本颜色，其它的不能被用于 HTML 。HTML 将通过一个特定的计算程序转换这些未知的值，这将导致成为完全不同的颜色。这些关键字应只被用于 SVG 和 CSS 。
未知的关键字会让 CSS 属性无效。无效的属性将被忽略，该颜色将没有作用。这是一个和 HTML 相比不同的行为。
未使用关键字定义的颜色在 CSS 中有任意的透明度，它们是单实色。
一些关键字表示同样的颜色：
- darkgray / darkgrey
- darkslategray / darkslategrey
- dimgray / dimgrey
- lightgray / lightgrey
- lightslategray / lightslategrey
- gray / grey
- slategray / slategrey
虽然关键字的名称取自常见的 X11 颜色名，然而由于生产商为具体的硬件所做的定制，颜色可能与 X11 系统上相应的颜色有所偏差。

规范	颜色	关键字	RGB 十六进制数
CSS Level 1		`black`（黑）	`#000000`
	`silver`（银）	`#c0c0c0`
	`gray`[*]（灰）	`#808080`
	`white`（白）	`#ffffff`
	`maroon`（褐）	`#800000`
	`red`（红）	`#ff0000`
	`purple`（紫）	`#800080`
	`fuchsia`（紫红）	`#ff00ff`
	`green`（绿）	`#008000`
	`lime`（绿黄）	`#00ff00`
	`olive`（橄榄绿）	`#808000`
	`yellow`（黄）	`#ffff00`
	`navy`（藏青）	`#000080`
	`blue`（蓝）	`#0000ff`
	`teal`（青）	`#008080`
	`aqua`（水绿）	`#00ffff`
CSS Level 2(Revision 1)		`orange`（橙）	`#ffa500`
CSS Color Module Level 3		`aliceblue`（浅灰蓝）	`#f0f8ff`
	`antiquewhite`（古董白）	`#faebd7`
	`aquamarine`（海蓝）	`#7fffd4`
	`azure`（蔚蓝）	`#f0ffff`
	`beige`（浅褐）	`#f5f5dc`
	`bisque`（橘黄）	`#ffe4c4`
	`blanchedalmond`（杏仁白）	`#ffebcd`
	`blueviolet`（蓝紫）	`#8a2be2`
	`brown`（褐）	`#a52a2a`
	`burlywood`（原木色）	`#deb887`
	`cadetblue`（灰蓝）	`#5f9ea0`
	`chartreuse`（黄绿）	`#7fff00`
	`chocolate`（巧克力色）	`#d2691e`
	`coral`（珊瑚红）	`#ff7f50`
	`cornflowerblue`（矢车菊蓝）	`#6495ed`
	`cornsilk`（玉米穗黄）	`#fff8dc`
	`crimson`（深红）	`#dc143c`
	`darkblue`（深蓝）	`#00008b`
	`darkcyan`（深青）	`#008b8b`
	`darkgoldenrod`（暗金）	`#b8860b`
	`darkgray`[*]（深灰）	`#a9a9a9`
	`darkgreen`（深绿）	`#006400`
	`darkgrey`[*]（深灰）	`#a9a9a9`
	`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`
	`gainsboro`（浅灰）	`#dcdcdc`
	`ghostwhite`（幽灵白）	`#f8f8ff`
	`gold`（金）	`#ffd700`
	`goldenrod`（橘黄）	`#daa520`
	`greenyellow`（黄绿）	`#adff2f`
	`grey`（灰）	`#808080`
	`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`
	`lightgreen`（浅绿）	`#90ee90`
	`lightgrey`[*]（浅灰）	`#d3d3d3`
	`lightpink`（淡粉）	`#ffb6c1`
	`lightsalmon`（浅肉色）	`#ffa07a`
	`lightseagreen`（浅海绿）	`#20b2aa`
	`lightskyblue`（浅天蓝）	`#87cefa`
	`lightslategray`[*]（浅青灰）	`#778899`
	`lightslategrey`[*]（浅青灰）	`#778899`
	`lightsteelblue`（浅钢蓝）	`#b0c4de`
	`lightyellow`（浅黄）	`#ffffe0`
	`limegreen`（酸橙绿）	`#32cd32`
	`linen`（亚麻色）	`#faf0e6`
	`mediumaquamarine`（中绿）	`#66cdaa`
	`mediumblue`（中蓝）	`#0000cd`
	`mediumorchid`（间兰花紫）	`#ba55d3`
	`mediumpurple`（中紫）	`#9370db`
	`mediumseagreen`（间海绿）	`#3cb371`
	`mediumslateblue`（中暗蓝）	`#7b68ee`
	`mediumspringgreen`（中春绿）	`#00fa9a`
	`mediumturquoise`（中海湖蓝）	`#48d1cc`
	`mediumvioletred`（中紫罗兰）	`#c71585`
	`midnightblue`（午夜蓝）	`#191970`
	`mintcream`（薄荷乳白）	`#f5fffa`
	`mistyrose`（粉玫瑰红）	`#ffe4e1`
	`moccasin`（鹿皮色）	`#ffe4b5`
	`navajowhite`（纳瓦白）	`#ffdead`
	`oldlace`（浅米色）	`#fdf5e6`
	`olivedrab`（橄榄褐）	`#6b8e23`
	`orangered`（橙红）	`#ff4500`
	`orchid`（兰花紫）	`#da70d6`
	`palegoldenrod`（灰菊黄）	`#eee8aa`
	`palegreen`（苍绿）	`#98fb98`
	`paleturquoise`（苍宝石绿）	`#afeeee`
	`palevioletred`（苍紫罗兰）	`#db7093`
	`papayawhip`（木瓜色）	`#ffefd5`
	`peachpuff`（桃色）	`#ffdab9`
	`peru`（秘鲁色）	`#cd853f`
	`pink`（粉）	`#ffc0cb`
	`plum`（李子色）	`#dda0dd`
	`powderblue`（粉蓝）	`#b0e0e6`
	`rosybrown`（玫瑰粽）	`#bc8f8f`
	`royalblue`（宝蓝）	`#4169e1`
	`saddlebrown`（马鞍棕）	`#8b4513`
	`salmon`（鲑肉色）	`#fa8072`
	`sandybrown`（沙褐色）	`#f4a460`
	`seagreen`（海绿）	`#2e8b57`
	`seashell`（贝壳白）	`#fff5ee`
	`sienna`（赭）	`#a0522d`
	`skyblue`（天蓝）	`#87ceeb`
	`slateblue`（青蓝）	`#6a5acd`
	`slategray`[*]（青灰）	`#708090`
	`slategrey`[*]（青灰）	`#708090`
	`snow`（雪白）	`#fffafa`
	`springgreen`（春绿）	`#00ff7f`
	`steelblue`（铁青）	`#4682b4`
	`tan`（棕褐）	`#d2b48c`
	`thistle`（苍紫）	`#d8bfd8`
	`tomato`（番茄红）	`#ff6347`
	`turquoise`（蓝绿）	`#40e0d0`
	`violet`（紫罗兰色）	`#ee82ee`
	`wheat`（麦色）	`#f5deb3`
	`whitesmoke`（烟白）	`#f5f5f5`
	`yellowgreen`（黄绿）	`#9acd32`
CSS Color Module Level 4		`rebeccapurple`（利百加紫）	`#663399`

颜色 rebeccapurple 等价于颜色#639，关于为何引进此颜色的更多信息可在由 Trezy "Honoring a Great Man"发布的 Codepen 博客上找到。

transparent 关键字

transparent 关键字表示一个完全透明的颜色，即该颜色看上去将是背景色。从技术上说，它是带有阿尔法通道为最小值的黑色，是 rgba(0,0,0,0)的简写。

currentColor 关键字

- 标准RGB色彩空间 - css 颜色

currentColor 关键字代表原始的 color 属性的计算值。它允许让继承自属性或子元素的属性颜色属性以默认值不再继承。

它也能用于那些继承了元素的 color 属性计算值的属性，相当于在这些元素上使用 inherit 关键字，如果这些元素有该关键字的话。

rgb()

颜色可以使用红-绿-蓝（red-green-blue(RGB)）模式的两种方式被定义：

十六进制符号#RRGGBB 和#RGB

"#"后跟6位十六进制字符（0-9, A-F）。
"#"后跟3位十六进制字符（0-9, A-F）。

三位数的 RGB 符号（#RGB）和六位数的形式（#RRGGBB）是相等的。例如，#f03 和#ff0033 代表同样的颜色。

函数符 rgb(R,G,B)

"rgb"后跟3个或3个值。整数 255 相当于 100%，和十六进制符号里的 F 或 FF 。

/* These examples all specify the same RGB color: */
 
 #f03
 #F03
 #ff0033
 #FF0033
 rgb(255,0,51)
 rgb(255, 0, 51)
 rgb(255, 0, 51.2) /* ERROR! Don't use fractions, use integers */ 
 rgb(100%,0%,20%)
 rgb(100%, 0%, 20%)
 rgb(100%, 0, 20%) /* ERROR! Don't mix up integer and percentage notation */

hsl()

颜色也可以使用 hsl()函数符被定义为色相-饱和度-亮度（Hue-saturation-lightness）模式。HSL 相比 RGB 的优点是更加直观：你可以估算你想要的颜色，然后微调。它也更易于创建相称的颜色集合。（通过保持相同的色相并改变亮度/暗度和饱和度）。

色相（Hue）表示色环（即代表彩虹的一个圆环）的一个角度。这个角度作为一个无单位的被给出。定义 red=0=360，其它颜色分散于圆环，所以 green=120, blue=240，以此类推。作为一个角度，它隐含像-120=240 和 480=120 这样的回环。

饱和度和亮度由百分数来表示。100%是满饱和度，而 0%是一种灰度。100%亮度是白色， 0%亮度是黑色，而 50%亮度是“一般的”。

hsl(0,  100%,50%)    /* red */   
hsl(30, 100%,50%)                 
hsl(60, 100%,50%)                
hsl(90, 100%,50%)                
hsl(120,100%,50%)    /* green */ 
hsl(150,100%,50%)                
hsl(180,100%,50%)                
hsl(210,100%,50%)                
hsl(240,100%,50%)    /* blue */  
hsl(270,100%,50%)                
hsl(300,100%,50%)                
hsl(330,100%,50%)                
hsl(360,100%,50%)    /* red */   

hsl(120,100%,25%)    /* dark green */  
hsl(120,100%,50%)    /* green */       
hsl(120,100%,75%)    /* light green */ 

hsl(120,100%,50%)    /* green */  
hsl(120, 67%,50%)                 
hsl(120, 33%,50%)                 
hsl(120,  0%,50%)                 

hsl(120, 60%,70%)    /* pastel green */

rgba()

颜色可以使用 rgba()函数符在红-绿-蓝-阿尔法（RGBa）模式下被定义。RGBa 扩展了 RGB 颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度。a 表示透明度：0=透明；1=不透明；

rgba(255,0,0,0.1)    /* 10% opaque red */  
rgba(255,0,0,0.4)    /* 40% opaque red */  
rgba(255,0,0,0.7)    /* 70% opaque red */  
rgba(255,0,0,  1)    /* full opaque red */

hsla()

颜色可以使用 hsla()函数符在色相-饱和度-亮度-透明度（HSLa）模式下被定义。HSLa 扩展自 HSL 颜色模式，包含了透明度通道，可以规定一个颜色的透明度。a 表示透明度：0=透明；1=不透明；

hsla(240,100%,50%,0.05)   /* 5% opaque blue */   
hsla(240,100%,50%, 0.4)   /* 40% opaque blue */  
hsla(240,100%,50%, 0.7)   /* 70% opaque blue */  
hsla(240,100%,50%,   1)   /* full opaque blue */

浏览器兼容性

特性	Chrome	Firefox(Gecko)	Internet Explorer	Opera	Safari(WebKit)
关键字颜色	1.0	1.0(1.0)	3.0 [*]	3.5	1.0(85)
`#RRGGBB`\|`#RGB`	1.0	1.0(1.0)	3.0	3.5	1.0(85)
`rgb()`	1.0	1.0(1.0)	4.0	3.5	1.0(85)
`hsl()`	1.0	1.0(1.5)	9.0	9.5	3.1(525)
`rgba()`	1.0	3.0(1.9)	9.0	10.0	3.1(525)
`hsla()`	1.0	3.0(1.9)	9.0	10.0	3.1(525)
`currentColor`	1.0	1.5(1.8)	9.0	9.5	4.0(528)
`transparent`	1.0	3.0(1.9)	9.0 [**]	10.0	3.1(525)
`rebeccapurple`	38.0	33(33)	11	25.0	7.1

特性	Android	Firefox Mobile(Gecko)	IE Phone	Opera Mobile	Safari Mobile(WebKit)
基础支持	?	?	?	?	?
rgba()	?	?	?	?	5.1(534.46)(maybe earlier)
`rebeccapurple`	(Yes)	33.0(33)	?	?	8

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明：我们致力于保护作者版权，注重分享，当前被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱：344225443@qq.com)

图片声明：本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)