CSS色彩

来源:互联网 发布:overlay网络是什么 编辑:程序博客网 时间:2024/05/16 18:18

1. 用颜色关键字指定


2. 十六进制记法

例如:#RRGGBB 或 #RGB

取值:

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

说明:

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

3. RGB记法
例如:RGB(R,G,B)

取值:

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

说明:

RGB记法。
  • 以上三个参数,正整数值的取值范围为: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)三个颜色通道的变化和它们相互之间的叠加来得到各式各样的颜色的。

4. RGBA记法

例如:RGBA(R,G,B,A)

取值:

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

说明:

RGBA记法。
  • 此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度。

5. 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%

6. 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相同,只是在HSL模式上新增了Alpha透明度。