功能说明:用 Canvas 实现基于 HSV 的调色板。这里复用了图像滤镜试验中的 hsv2rgb 算法。

使用说明:通过左边调色盘控制色调(逆时针角度)、饱和度(与圆心的距离),通过右侧控制明度值。

注意:本试验Demo没有考虑低版本浏览器兼容&性能问题!


词汇解释:

  色调H - 从红色开始按逆时针方向计算,红色为0°,绿色为120°,蓝色为240°,所以取值范围为0%(0°)~100%(360°)。
  饱和度S - 光谱色的白光成分的高低。纯白时饱和度为0%,无白光干扰时接近光谱色程度最高、饱和度为100%;圆锥颜色模型(参见下图)里,通常用锥底圆心到圆边的距离来表示,这里为了便于操作,分离出一个独立的饱和度控制条。
  明度V- 颜色明亮的程度。取值范围为0%(最暗)到100%(最明)。

HSV圆锥模型:

  


关于视频处理中经常看到的“YUV”颜色空间:
  在现代彩色电视系统中,通常采用三管彩色摄像机或彩色CCD(点耦合器件)摄像机,它把摄得的彩色图像信号,经分色、分别放大校正得到RGB,再经过矩阵变换电路得到亮度信号Y和两个色差信号R-Y、B-Y, 最后发送端将亮度和色差三个信号分别进行编码,用同一信道发送出去。
  这就是我们常用的YUV色彩空间。
  采用YUV色彩空间的重要性是它的亮度信号Y和色度信号U、V是分离的。如果只有Y信号分量而没有U、V分量, 那么这样表示的图就是黑白灰度图。
  彩色电视采用YUV空间正是为了用亮度信号Y解决彩色电视机与黑白电视机的兼容问题,使黑白电视机也能接收彩色信号。
  根据美国国家电视制式委员会,NTSC制式的标准,当白光的 亮度用Y来表示时,它和红、绿、蓝三色光的关系可用如下式的方程描述:Y=0.3R+0.59G+0.11B 这就是常用的亮度公式。
  如果要由YUV空间转化成RGB空间,只要进行相反的逆运算即可。