颜色是由红(RED),绿(GREEN),蓝(BLUE )光线的显示结合。
颜色值
CSS的颜色可以通过以下方法指定:
- 十六进制颜色
- RGB颜色
- RGBA颜色
- HSL色彩
- HSLA颜色
- 预定义颜色名称
其中使用十六进制(hex)表示法为红,绿,蓝的颜色值结合。可以是最低值是0(十六进制00)到最高值是255(十六进制FF)。
红,绿,蓝值从0到255的结合,给出了总额超过1600多万不同的颜色(256 × 256 ×256)。现代大多数显示器能够显示至少16384种颜色。
十六进制颜色
所有主要浏览器都支持十六进制颜色值。
指定一个十六进制的颜色其组成部分是:#RRGGBB,其中RR(红色),GG(绿色)和BB(蓝色)。所有值必须介于0和FF之间。
例如红色:#FF0000
或 #ff0000
(不区分大小写)。
RGB颜色
RGB颜色值在所有主要浏览器都支持。
RGB颜色值指定:RGB(红,绿,蓝)。每个参数(红色,绿色和蓝色)定义颜色的亮度,可在0和255之间,或一个百分比值(从0%到100%)之间的整数。
例如红色:rgb(255,0,0)
或 rgb(100%,0%,0%)
。
RGBA颜色
RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。
RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。
RGBA颜色值指定:RGBA(红,绿,蓝,alpha)。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。
例如红色:rgba(255,0,0,1)
或 rgba(100%,0%,0%,1)
。
HSL颜色
IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL颜色值。
HSL代表色相,饱和度和亮度 - 使用色彩圆柱坐标表示。
HSL颜色值指定:HSL(色调,饱和度,明度)。
色相是在色轮上的程度(从0到360)-0(或360)是红色的,120是绿色的,240是蓝色的。饱和度是一个百分比值;0%意味着灰色和100%的阴影,是全彩。亮度也是一个百分点;0%是黑色的,100%是白色的。
例如红色:hsl(0, 100%,50%)
或 hsl(360, 100%,50%)
。
HSLA颜色
HSLA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+.支持.
HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。
指定HSLA颜色值:HSLA(色调,饱和度,亮度,α),α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。
例如红色:hsla(0, 100%,50%,1)
或 hsla(360, 100%,50%,1)
。
预定义颜色名称表
147颜色名称定义在HTML和CSS的颜色规格(17个标准色加上130多个其他)。所有浏览器都支持颜色名称。
Color Name | HEX | Color |
---|---|---|
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 | |
DarkGreen | #006400 | |
DarkKhaki | #BDB76B | |
DarkMagenta | #8B008B | |
DarkOliveGreen | #556B2F | |
DarkOrange | #FF8C00 | |
DarkOrchid | #9932CC | |
DarkRed | #8B0000 | |
DarkSalmon | #E9967A | |
DarkSeaGreen | #8FBC8F | |
DarkSlateBlue | #483D8B | |
DarkSlateGray | #2F4F4F | |
DarkTurquoise | #00CED1 | |
DarkViolet | #9400D3 |