color-关于颜色值

1,716 阅读2分钟

css中<color>即颜色值可以是一个关键字也可以是一个数值规则,包括 Color Name(颜色名称), HEX, RGB, RGBA, HSL, HSLA, transparent, currentColor

Color Name

用颜色关键字来指定颜色。包括:

  • 基础颜色关键字
  • 系统颜色关键字
  • 扩展颜色关键字

查看示例

HEX-十六进制

#RRGGBB#RGB

取值

  • RR:红色值。十六进制正整数
  • GG:绿色值。十六进制正整数
  • BB:蓝色值。十六进制正整数

说明

  • 以上三个参数,取值范围为:00 - FF。
  • 参数必须是两位数。对于只有一位的,应在前面补零。
  • 如果每个参数各自在两位上的数字都相同,那么本单位也可缩写为 #RGB 的方式。例如:#FF8800 可以缩写为 #F80。
  • 此色彩模式与RGB色彩模式不同。

RGB

RGB(R,G,B)

取值

  • R:红色值。正整数 | 百分数
  • G:绿色值。正整数 | 百分数
  • B:蓝色值。正整数 | 百分数

说明

  • 以上三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。
  • 超出范围的数值将被截至其最接近的取值极限。如:rgb(300,0,0)会被解析为rgb(255,0,0)
  • 正整数值255对应百分比数值100%,如:rgb(255,255,255) = rgb(100%,100%,100%) = #FFFFFF = #FFF
  • RGB色彩是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化和它们相互之间的叠加来得到各式各样的颜色的。
  • 此RGB色彩模式与#RRGGBB/#RGB(HEX)不同。

RGBA

RGBA(R,G,B,A)

取值

  • R:红色值。正整数 | 百分数
  • G:绿色值。正整数 | 百分数
  • B:蓝色值。正整数 | 百分数
  • A:Alpha透明度。取值0 - 1之间。

说明

  • 此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度
  • IE6.0-8.0不支持使用 rgba 模式实现透明度,可使用 IE 滤镜处理

HSL

HSL(H,S,L)

取值

  • H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
  • S:Saturation(饱和度)。取值为:0.0% - 100.0%
  • L:Lightness(亮度)。取值为:0.0% - 100.0%

HSLA

HSLA(H,S,L,A)

取值

  • H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
  • S:Saturation(饱和度)。取值为:0.0% - 100.0%
  • L:Lightness(亮度)。取值为:0.0% - 100.0%
  • A:Alpha透明度。取值0 - 1之间。

说明:

此色彩模式与HSL相同,只是在HSL模式上新增了Alpha透明度。