|
amu226
| 来自北京
知友 @王赟 Maigo 的答案很棒,不过,说明的方式更接近数学语言,理解起来相对较难。
下面我用更加「通俗」的语言来解释 色相、亮度 和 饱和度 ,作为一个补充。
打开 Windows 系统自带的画图软件,在上方的「工具」中选择「编辑颜色」,你就可以看到一个经典的色域图,如下图所示:
「画图」软件中的「编辑颜色」界面
通过这个图,我们就可以直观上理解色相、亮度、饱和度了,如下图所示。(需要注意的是,在画图中,色相、饱和度和亮度的范围都是 0~240)
色相、饱和度、亮度
- 色相,简而言之,代表了一个颜色的 RGB 主色。其中,红色为 0°,绿色为 120°,蓝色为 240°。如下图所示:
色相(色调)
- 饱和度,简而言之,代表着一种颜色的「纯度」。饱和度越高,其混浊的部分,也就是偏灰色的成分就越少。
- 亮度,简而言之,代表的一种颜色与「白色」的距离。亮度越高,颜色越白,反之则越黑。
我们知道,通常来讲, RGB 的范围通常是 0~255,那么,我们应该怎样用 RGB 来描绘 色相、饱和度和亮度呢?
下面,我们以 RGB =(60,120,100)为例,算出这个颜色的 色相、饱和度和亮度吧。
RGB=(60,120,100)
A 色相
在「编辑颜色」界面的首行,从左到右滑动光标,我们会发现,RGB 是以下面的方式变动的:
(255,0,0)(红,0°)—> (255,255,0)(黄,60°)—>(0,255,0)(绿,120°)—>
(0,255,255)(青,180°)—>(0,0,255)(蓝,240°)—>(255,0,255)(品红,300°)
可见:0°、120°、240° 对应光的三原色(红、绿、蓝);
60°、180°、300° 对应颜料三原色(黄、青、品红)。
反映到 RGB 上,我们先找到一个主色,也就是 RGB 中最大的数值。
对于 RGB =(60,120,100):
数值最大的是 G,也就是绿色,所以色相是在 120° 附近。
由于 R=60,B=100,颜色更偏蓝一点,所以色相的范围在 120°~180° 之间。
易见:120° 对应的是 (60,120,60),180° 对应的是 (60,120,120)
于是容易计算:
* 如果将 160° 从 (0,360°)映射到 (0,240) 的范围内,那么色相大约是 107。 B 亮度
在讨论「饱和度」前,我们先讨论「亮度」。
上面所提到的 红、黄、绿、青、蓝、品红 六种颜色,它们的亮度都是 0.5,从它们的 RGB 中,我们能发现什么?显然: RGB 中的最大值都是 255,而最小值都是 0;
于是,可以猜到,亮度的定义也非常简洁:
其中 M 为 RGB 的理论最大值,一般为 255
对于 RGB =(60,120,100):
* 如果将 0.353 从(0,1)映射到(0,240),大约为 85。 C 饱和度
相对来说,饱和度的计算会比较复杂,我试图用更直观的方式解释它。
直观感受:RGB 中最大值和最小值越接近,饱和度越低,反之,饱和度越高。
另外,当我们在「编辑颜色」的顶行移动光标并且调节「亮度」时,会发现一个现象:
当饱和度为最高(240)时,RGB 总有一个为 255 或 0,反之亦然。并且,亮度大于 0.5 时,RGB 中必存在 255,亮度小于 0.5 时,RGB 中必存在 0。
于是,我们可以直观的感受到:「饱和度」公式中,分子应该是类似 max(R,G,B)-min(R,G,B) 之类的表达式,分母应该包括 max(R,G,B)+min(R,G,B) 以及 M。
由亮度的表达式可知,其为 0.5 时, max(R,G,B)+min(R,G,B) = M,为了让饱和度表达式分母的函数在亮度为 0.5 处出现拐点,表达式应该包含绝对值函数:
|max(R,G,B)+min(R,G,B) - M|
进一步地,数学直觉告诉我,分母的表达式就是:
M- |max(R,G,B)+min(R,G,B) - M|
于是:
对于 RGB=(60,120,100):
* 如果将 0.333 从(0,1)映射到(0,240),其值为 80。 综上所述,我们从直观上理解了 色相、亮度、和饱和度的含义,并且求得当 RGB =(60,120,100)时,我们算得:
- 色相为 160°(107/240);
- 亮度为 0.353(85/240);
- 饱和度为 0.333(80/240)。
而画图的「编辑颜色」告诉我,我的计算结果是 正确 的。
RGB=(60,120,100)
【总结】
当我们已知 R、G、B 的值时,我们可以将其映射到 色相E、亮度L 和饱和度S。
根据之前的分析,其映射公式如下:
分成 6 段讨论:
1) R≥G≥B 时,E =0°+60°·(G-B)/(R-B)
2) G≥R≥B 时, E =120°-60°·(R-B)/(G-B)
3) G≥B≥R 时, E =120°+60°·(B-R)/(G-R)
4) B≥G≥R 时, E =240°-60°·(G-R)/(B-R)
5) B≥R≥G 时, E =240°+60°·(R-G)/(B-G)
6) R≥B≥G 时, E =360°-60°·(B-G)/(R-G)
|
|