第02节_HSL

HSL色彩模式是工业界的另一种颜色标准,是通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL即是代表色相,饱和度,明度open in new window三个通道的颜色。

HSL表示色相(Hue)、饱和度(Saturation)、亮度(Lightness)。结构是:hsl(hue, saturation%, lightness%)。其中饱和度和亮度是百分比,不是数值。

  • 色相(Hue)
  • 饱和度(Saturation)
  • 亮度(Lightness)。

1.色相(Hue)

HSL的H(hue)分量,代表的是人眼所能感知的颜色范围,这些颜色分布在一个平面的色相环上,取值范围是0°到360°的圆心角,每个角度可以代表一种颜色。色相值open in new window的意义在于,我们可以在不改变光感的情况下,通过旋转色相环来改变颜色。在实际应用中,我们需要记住色相环上的六大主色,用作基本参照:

  • 360°/0°红
  • 60°黄
  • 120°绿
  • 180°青
  • 240°蓝
  • 300°洋红

它们在色相环上按照60°圆心角的间隔排列。

img

2.饱和度(Saturation)

HSL的S(saturation)分量,指的是色彩的饱和度,它用0%至100%的值描述了相同色相、明度下色彩纯度的变化。数值越大,颜色中的灰色越少,颜色越鲜艳,呈现一种从灰度到纯色的变化。

img

3.亮度(Lightness)。

HSL的L(lightness)分量,指的是色彩的明度,作用是控制色彩的明暗变化。它同样使用了0%至100%的取值范围。数值越小,色彩越暗,越接近于黑色;数值越大,色彩越亮,越接近于白色。

img