CSS 中有一种表示颜色值的方式,就是 hsla(Hue, Saturation, Lightness , Alpha)

Hue 指色调,Saturation 指饱和度,Lightness 指亮度,Alpha 指透明度。它们的取值范围如下:

  1. 色调:0~360。0/360 表示红色,120 表示绿色,240 表示蓝色。
  2. 饱和度:0.0%~100.0%。0.0% 是一样的灰色,100.0% 是某个色调能达到的最鲜亮、充沛的显示效果。
  3. 亮度:0.0%~100.0%。0.0% 是纯黑色,100.0% 是纯白色。
  4. 透明度:0~1。0 是完全透明的,1 是完全不透明的。

这种命名方式非常粗暴、直接,原来是工业界的一种颜色标准。

  background: red;

/* 等价于 */
background: hsla(0, 100%, 50%, 1);

  background: blue;

/* 等价于 */
background: hsla(240, 100%, 50%, 1);

但是绿色不是 hsla(240, 100%, 50%, 1)!浏览器渲染的绿色亮度调低了。

  background: green;

/* 等价于 */
background: hsla(120, 100%, 25%, 1);

完整的例子可以看 这里

(完)


226 0 0