CSS颜色
在CSS中的颜色可以通过以下方法来指定:
- 十六进制颜色
- RGB颜色
- RGBA颜色
- HSL颜色
- HSLA颜色
- 预定义/跨浏览器颜色名
十六进制颜色
十六进制颜色值在所有主流浏览器的支持。
十六进制颜色与规定的:#RRGGBB,其中的RR (red) ,GG (green)和BB (blue)十六进制整数指定颜色的成分。 所有的值必须是00和FF之间。
例如,#0000FF值呈现为蓝色,因为蓝色分量被设置到它的最高值(ff)以及其他被设置为00。
例
定义不同的颜色HEX:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
试一试» RGB颜色
RGB颜色值在所有主流浏览器的支持。
:一个RGB颜色值与指定的rgb(red, green, blue) 。 每个参数(红,绿,蓝)定义的颜色的强度,并且可以是0到255或百分比值之间的整数(from 0% to 100%)
例如, rgb(0,0,255)值呈现为蓝色,因为蓝色参数被设置为它的最高值(255)和其他人都设置为0。
此外,以下的值定义等于颜色: rgb(0,0,255)和rgb(0%,0%,100%)
例
定义不同的RGB颜色:
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
试一试» RGBA颜色
RGBA颜色值都在IE9 +,火狐3 +,Chrome浏览器,Safari和Opera中10+的支持。
RGBA颜色值是RGB颜色值的扩展用alpha通道 - 它指定该对象的透明度。
:一个RGBA颜色值与指定的rgba(red, green, blue, alpha) 。 阿尔法参数之间0.0的数(fully transparent)和1.0 (fully opaque) 。
例
定义具有透明度不同的RGB颜色:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
试一试» HSL颜色
HSL颜色值都在IE9 +,火狐,Chrome,Safari和Opera中10+的支持。
HSL代表色调,饱和度和亮度 - 和表示的颜色的圆筒坐标表示。
:一个HSL颜色值与指定的hsl(hue, saturation, lightness) 。
色调是色轮度(from 0 to 360) - 0 (or 360)是红色,120是绿色,240是蓝色的。 饱和是百分比值; 0%意味着灰色的阴影和100%是全彩。 明度也是百分比; 0%是黑色,100%是白色的。
例
定义不同的颜色HSL:
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark
green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
试一试» HSLA颜色
HSLA颜色值都在IE9 +,火狐3 +,Chrome浏览器,Safari和Opera中10+的支持。
HSLA颜色值是HSL颜色值的扩展,带有一个alpha通道 - 它指定对象的不透明度。
:一个HSLA颜色值与指定hsla(hue, saturation, lightness, alpha) ,其中所述α-参数定义的不透明度。 阿尔法参数之间0.0的数(fully transparent)和1.0 (fully opaque) 。
例
定义不同颜色的HSL与透明度:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
试一试» 预定义/跨浏览器颜色名称
140颜色名称预先定义的HTML和CSS颜色规范。
看看表预定义的颜色名称 。