再谈颜色模型:HSB(HSV)和RGB的关系

之前讨论过HSV模型(HSV和HSB相同,本文正文使用HSV,以区分RGB的B)的基本理论,但相对比较生涩。其实HSV模型可以从另一个角度切入理解,即和RGB模型结合。

由固定色相H引发的讨论

色相H,数值是0到360°,可以控制“光线”具体是什么颜色的。既然是从0到360°,可以想象色相H应该是环状,只是常规拾色器将它转化为了条状。如下图。

hsb and rgb color 03 - design, sharing - 再谈颜色模型:HSB(HSV)和RGB的关系

色相H可以决定对应RGB数值的总体偏向。

我们举个例子,当色相H为0的时,颜色为红色。此时会有如下数学关系:

  • V=R/255
  • 255≥R>G=B≥0

由以上数学关系,我们可以得到下面几组颜色值(设h为0到360中的任意值,n为0到100中的任意值):

  • RGB(255,0,0) = HSV(0,100,100)
  • RGB(255,255,255)= HSV(h,0,100)
  • RGB(0,0,0)=HSV(h,n,0)

由此我们有几个问题:

为什么V=R/255?

这关系到HSV中对于明度V的定义。HSV中明度V指的并不是所谓的“肉眼看到的亮度”,而是所有光线的“功率比例”。可以想象成:V是总闸的开关,不管有多少个灯亮着,只要拉低了V,所有灯都会等比例变暗。

也就是说,对于HSV中所谓的明度V,我们不能用“看起来亮不亮”来衡量。在HSV中,纯白色和纯红色的明度V是相等的;但肉眼看上去,纯白色显然更亮一些。

如果要给明度V重新下个定义的话,可以说:明度V是色相灯的亮度。H规定的是什么颜色,V就控制对应颜色的亮度,同时无视其他色相上的亮度。

为什么R>G=B?

在H为0的时候,G=B是很容易理解的。因为H为0对应的就是纯R的颜色,也就是红色。当G和B相等的时候,与任意数值的R混合,都相当于在纯红色上叠加一层灰色,不会把红色变成蓝色、绿色等其他颜色。

而R>G=B,同样是因为要保持色相H的颜色。如果G=B>R的话,那么色相H就会旋转180°,指向G和B之间的那个颜色。此时颜色就不再是红色了,而是比较亮的一种蓝色。

拾色器的假象

我们在设计软件中,看到的HSV拾色器一般都是正方形,如下方的左图这样(截取自Adobe Illustrator)。

hsb and rgb color 01 - design, sharing - 再谈颜色模型:HSB(HSV)和RGB的关系

但实际上,根据HSV模型,拾色器原本是上图右边这样的。大多数软件为了方便拾色,选择将拾色器通过数学映射的方式设计成正方形。但问题在于,拾色器设计成正方形后,颜色点的分布是“不均匀”的,如果你尝试用正方形拾色器理解HSV模型,就很容易犯错误。

hsb and rgb color 02 - design, sharing - 再谈颜色模型:HSB(HSV)和RGB的关系

在正确的HSV拾色器下,S和V的拾取方式是这样的:

  • 如何寻找V:根据V的数值,在V轴上找到对应的点,画一条水平线。水平线和三角形相交的部分,V的数值处处相同。
  • 如何寻找V:根据S的数值,在S轴上找到对应的点,和三角形底端的顶点连成一条线段。线段上,S的数值处处相同。

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注