HSL HSB HSV RGB

时间:2024-04-06 18:42:17

色生心中:人性化的HSL模型

https://cdc.tencent.com/2011/05/09/%E8%89%B2%E7%94%9F%E5%BF%83%E4%B8%AD%EF%BC%9A%E4%BA%BA%E6%80%A7%E5%8C%96%E7%9A%84hsl%E6%A8%A1%E5%9E%8B/

HSL同样使用了3个分量来描述色彩,与RGB使用的三色光不同,HSL色彩的表述方式是:H(hue)色相,S(saturation)饱和度,以及L(lightness)亮度。听起来一样复杂?稍后你就会发现,与“反人类”的RGB模型相比,HSL是多么的友好。

HSL的H(hue)分量,代表的是人眼所能感知的颜色范围,这些颜色分布在一个平面的色相环上,取值范围是0°到360°的圆心角,每个角度可以代表一种颜色。色相值的意义在于,我们可以在不改变光感的情况下,通过旋转色相环来改变颜色。在实际应用中,我们需要记住色相环上的六大主色,用作基本参照:360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红,它们在色相环上按照60°圆心角的间隔排列,如下图:
HSL HSB HSV RGB

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

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

HSL HSV

https://en.wikipedia.org/wiki/HSL_and_HSV

作者:Forrest
链接:https://www.zhihu.com/question/22077462/answer/280114578
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

首先, HSB 和 HSV 是同一个东西,只是名称不同,本文后面仅使用 HSB,当提到它的时候,也代表 HSV。

HSB 和 HSL 在字面意思上是一样的:

  • H 指的是色相(Hue),就是颜色名称,例如“红色”、“蓝色”;
  • S 指的是饱和度(Saturation),即颜色的纯度;
  • L(Lightness) 和 B(Brightness)是明度,颜色的明亮程度

在原理和表现上,HSL 和 HSB 中的 H(色相) 完全一致,但二者的 S(饱和度)不一样, L 和 B (明度 )也不一样:

  • HSB 中的 S 控制纯色中混入白色的量,值越大,白色越少,颜色越纯
  • HSB 中的 B 控制纯色中混入黑色的量,值越大,黑色越少,明度越高
  • HSL 中的 S 和黑白没有关系,饱和度不控制颜色中混入黑白的多寡;
  • HSL 中的 L 控制纯色中的混入的黑白两种颜色

原理说完,结合实际应用场景看看。下面是 Photoshop 和 Affinity Designer 的拾色器

HSL HSB HSV RGB

两者分别使用了 HSB 和 HSL 颜色模型。两个拾色器都是 X 轴表示饱和度,越往右,饱和度越高;Y 轴表示明度,越往上明度越高。

先看 Photoshop 的 HSB 颜色模型拾色器,如下图所示,HSB 的 B(明度)控制纯色中混入黑色的量,越往上,值越大,黑色越少,颜色明度越高。

HSL HSB HSV RGB

如下图所示,HSB 的 S(饱和度)控制纯色中混入白色的量,越往右,值越大,白色越少,颜色纯度越高。

HSL HSB HSV RGB

接下来看 Affinity Designer 的 HSL 颜色模型拾色器。如下图所示,Y 轴明度轴,从下至上,混入的黑色逐渐减少,直到 50% 位置处完全没有黑色,也没有白色,纯度达到最高。继续往上走,纯色混入的白色逐渐增加,到达最高点变为纯白色,明度最高。

HSL HSB HSV RGB

HSB 和 HSL 的区别解释完毕。

提问中提到,二者有什么优劣?

因为 RGB 色彩模型是通过不同量的红绿蓝来描述一个颜色的,对人类来说很不直观,难以理解。人类更习惯这样去描述一个颜色:它是什么颜色?是鲜艳还是灰暗?HSB 和 HSL 都是基于此被创造出来的。在弄清楚二者的原理和表现之后,你觉得哪个更符合你的直觉,对你来说,它就更优秀。

就日常使用来说,即便你不知道他们的原理,也不会影响你做出优秀的作品。但是,知其然就不会惧怕某天有小白指着 Photoshop 拾色器的右上角问你,这里明度最高,为什么不是白色的呢?

https://www.zhihu.com/question/22077462