计算机中的颜色III——HSV表示方法

  1. 云栖社区>
  2. 博客>
  3. 正文

计算机中的颜色III——HSV表示方法

万仓一黍 2009-12-14 08:28:00 浏览496
展开阅读全文

  在计算机中的实际应用中,除了RGB表示方法外,还有一种用的比较多的表示方法就是HSV(又称HSB)表示方法。它把颜色分为三个参量,一个是色相Hue,具体表示在色相环上的一种纯色,一个是饱和Saturation,具体表示纯色在颜色中的百分比,当S=1时,表示颜色最纯,当S=0时,表示灰度值。一个是亮度Value,表示颜色的亮度,当V=0时,表示黑色。

  HSV颜色系统在不破坏图像结构的基础上更该颜色方面起着不小的作用。比方说,我们在网上看到一种按钮设计觉得非常好,但是他的颜色不符合我们的要求,我们可以模仿他的样式,自己重新制作一个按钮,不过由于美术功底不足,无论怎么调整都做不出原来的感觉来。原因就是原来的按钮各种颜色搭配是有一定的道理的,自己重新选择颜色感觉就是不协调。我们可以利用HSV,直接更改按钮的各个颜色的色相值,这样由于是整体更改颜色的色相值,各种颜色搭配还是比较协调的。

  下面这个图右边的包是左边的包通过更改色相值实现的。

img_118854041c8b9be4fd29622c0eab4639.jpg 

以下内容来源于维基百科,有删减。

HSV(也叫做 HSB)是对RGB 色彩空间中点的有关系的表示,它们尝试描述比 RGB 更准确的感知颜色联系,并仍保持在计算上简单。HSL 表示 hue(色相)、saturation(饱和度)、lightness(亮度),HSV 表示 hue、 saturation、value HSV 二者都把颜色描述在圆柱体内的点,这个圆柱的中心轴取值为自底部的黑色到顶部的白色而在它们中间是的灰色,绕这个轴的角度对应于“色相”,到这个轴的距离对应于“饱和度”,而沿着这个轴的距离对应于“亮度”,“value”或“明度”。艺术家有时偏好使用 HSV 颜色模型而不选择 RGB 或 CMYK 模型,因为它类似于人类感觉颜色的方式。RGB 和 CMYK 分别是加法原色和减法原色模型,以原色组合的方式定义颜色,而 HSV 以人类更熟悉的方式封装了关于颜色的信息:“这是什么颜色?深浅如何?明暗如何?”。

  img_8e2b3e3096fc7d8880cdb1f8a24a0710.pngimg_e71d71809f70cca4b9742def619821e5.png

HSV 模型通常用于计算机图形应用中。在用户必须选择一个颜色应用于特定图形元素各种应用环境中,经常使用 HSV 色轮。在其中,色相表示为圆环;可以使用一个独立的三角形来表示饱和度和明度。典型的,这个三角形的垂直轴指示饱和度,而水平轴表示明度。在这种方式下,选择颜色可以首先在圆环中选择色相,在从三角形中选择想要的饱和度和明度。

HSV 模型的另一种可视方法是圆锥体。在这种表示中,色相被表示为绕圆锥中心轴的角度,饱和度被表示为从圆锥的横截面的圆心到这个点的距离,明度被表示为从圆锥的横截面的圆心到顶点的距离。某些表示使用了六棱锥体。这种方法更适合在一个单一物体中展示这个 HSV 色彩空间;但是由于它的三维本质,它不适合在二维计算机界面中选择颜色。

HSV 色彩空还可以表示为类似于上述圆锥体的圆柱体,色相沿着圆柱体的外圆周变化,饱和度沿着从横截面的圆心的距离变化,明度沿着横截面到底面和顶面的距离而变化。这种表示可能被认为是 HSV 色彩空间的更精确的数学模型;但是在实际中可区分出的饱和度和色相的级别数目随着明度接近黑色而减少。此外计算机典型的用有限精度范围来存储 RGB 值;这约束了精度,再加上人类颜色感知的限制,使圆锥体表示在多数情况下更实用。

从 RGB 到HSV 的转换

设 (r, g, b) 分别是一个颜色的红、绿和蓝坐标,它们的值是在 0 到 1 之间的实数。设 max 等价于 r, g 和 b 中的最大者。设 min 等于这些值中的最小者。要找到在 HSL 空间中的 (h, s, v) 值,这里的 h ∈ [0, 360)是角度的色相角,而 s, v ∈ [0,1] 是饱和度和亮度,计算为:

img_c15decaf53914d2aa18a974a941cb0ef.png

img_c0c9bebf643b6949c71a34ca03fb560c.png 

img_470942f4f5cf7f7e5109de588aa032d9.png

从 HSV 到 RGB 的转换

类似的,给定在 HSV 中 (h, s, v) 值定义的一个颜色,带有如上的 h,和分别表示饱和度和明度的 s 和 v 变化于 0 到 1 之间,在 RGB 空间中对应的 (r, g, b) 三原色可以计算为:

img_41d02b60a49dc7f37ad0e74ff79373d6.png

img_7837e83fcd69c1e044d6a73ee516a91d.png

网友评论

登录后评论
0/500
评论
万仓一黍
+ 关注