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);

完整的例子可以看 这里。

（完）

284 0 0