CSS中很多地方都使用到颜色,你可以为背景指定颜色,为边框指定颜色,为字体指定颜色,等等。CSS中的颜色有多种表述方式,包括:颜色名称、HEX、RGB、RGBA、HSL和HSLA。
颜色名称
HTML和CSS颜色规范中定义了147种颜色名,包括17种标准颜色和130中其他颜色,标准颜色包括:
aqua:浅绿色;
black:黑色;
blue:蓝色;
fuchsia:紫红色;
gray:灰色;
green:绿色;
lime:绿黄色;
maroon:栗色;
navy:深蓝色;
olive:橄榄色;
orange:橙色;
purple:紫色;
red:红色;
silver:灰色;
teal:青色;
white:白色;
yellow:黄色。
规范中支持的其它颜色可以参考: CSS颜色名。
完整的颜色名称可以参考: Lists_of_colors。
浏览器支持:
所有浏览器,但注意部分颜色名可能不被某些浏览器支持。
HEX
使用16进制值来表述颜色:
#RRGGBB
或
#RGB
取值为:
RR:红色值,十六进制正整数,取值范围[00 - FF];
GG:绿色值,十六进制正整数,取值范围[00 - FF];
BB:蓝色值,十六进制正整数,取值范围[00 - FF]。
参数必须是两位数,如果只有一位,需要在前面补0。如果每个参数各自在两位上的数字都相同,可以采用#RGB的缩写方式,例如:#FFFFFF可以缩写为#FFF。
浏览器支持:
所有浏览器。
RGB
使用三个数值来表示颜色:
RGB(R,G,B)
取值为:
R:红色值;
G:绿色值;
B:蓝色值。
整数值
三个数值可以使用整数值表述,取值范围为:[0 - 255],例如:rgb(255,0,0)表示红色。
如果设置的值超出范围,值将被截取至其最接近的取值极限,如:rgb(300,0,0)会被解析为rgb(255,0,0)。
百分比
三个数值也可以使用百分比设置,取值范围为:[0.0% - 100.0%],例如:rgb(100%,100%,100%)=rgb(255,255,255)=#FFFFFF=#FFF。
浏览器支持:
所有浏览器。
RGBA
表述方式为:
RGBA(R,G,B,A)
取值为:
R:红色值,正整数或百分数,同RBG;
G:绿色值,正整数或百分数,同RBG;
B:蓝色值,正整数或百分数,同RBG;
A:Alpha透明度,取值0~1之间,0表示完全透明,1表示完全不透明。
实例:
p {
background-color:rgba(255,0,0,0.5);
}
浏览器支持:
IE9+、Firefox 3+、Chrome、Safari 以及Opera 10+。
HSL
表述方式为:
HSL(H,S,L)
取值为:
H:Hue(色调);取值范围为[0 - 360],0(或360)表示红色,120表示绿色,240表示蓝色;
S:Saturation(饱和度),取值为:[0.0% - 100.0%];0%意味着灰色,而100%是全彩;
L:Lightness(亮度),取值为:[0.0% - 100.0%];0%是黑色,100%是白色。
实例:
p {
background-color:hsl(120,65%,75%);
}
浏览器支持:
IE9+、Firefox、Chrome、Safari 以及Opera 10+。
HSLA
表述方式为:
HSLA(H,S,L,A)
取值为:
H:Hue(色调);取值范围为[0 - 360],0(或360)表示红色,120表示绿色,240表示蓝色;
S:Saturation(饱和度),取值为:[0.0% - 100.0%];0%意味着灰色,而100%是全彩;
L:Lightness(亮度),取值为:[0.0% - 100.0%];0%是黑色,100%是白色
A:Alpha透明度,取值0~1之间,0表示完全透明,1表示完全不透明。
此色彩模式就是在HSL模式上增加了Alpha透明度。
浏览器支持:
IE9+、Firefox 3+、Chrome、Safari 以及Opera 10+。