RGB、YUV、HSV和HSL区别和关联

近期在做的一个需求和颜色转换有关系,所以本篇将开发过程中比较常见的 四种颜色 进行一番梳理。

一、RGB颜色空间

从我们最常见的RGB颜色出发,RGB分别对应着 Red(红)、Green(绿)、Blue(蓝),也就是我们平时所说的三原色,调整这三种颜色的比例,可以搭配出所有的色彩。

这时你可能就要问了,YUV、HSV、HSL也能描述所有色彩啊,为啥RGB是最常用的捏?

这就要回归到现实了,现实里显示器显像时,每一个像素点后面对应着 3个发光二极管,这3个二极管可以分别发出 红、绿、蓝 三种颜色,因此绝大部分人所能接触的颜色只与RGB有关系。

RGB(红绿蓝)是依据人眼识别的颜色定义出的空间,可表示大部分颜色。但在科学研究一般不采用RGB颜色空间,因为它的细节难以进行数字化的调整。它将色调,亮度,饱和度三个量放在一起表示,很难分开。它是最通用的面向硬件的彩色模型。该模型用于彩色监视器和一大类彩色视频摄像。

二、YUV颜色空间

YUV 多出现在音视频合成领域,音视频合成领域要求在表达同样内容时,争取占用更少的空间。同个视频,YUV空间要比RGB空间描绘省下来一半的空间消耗(YUV4:2:0)。

YUV(也称:YCbCr):Y表示明亮度,UV的作用是描述影像色彩及饱和度。

主要的采样格式有 YUV4:2:0(最常用)、YUV4:2:2 和 YUV4:4:4 ,也就是说 RGB 主要用于屏幕图像的展示,而 YUV 多用于采集与编码。

YUV 和 RGB 相互转换的公式为:

三、HSV(HSB) 和 HSL

可以发现 RGB 主要为硬件显示器服务,YUV 主要为音视频编解码服务,这么说下来和色彩最亲密的 设计师 该用哪种颜色呢?

他们也有自己行业特别关注的颜色,主要使用 HSV 和 HSL。

(一)为什么RGB不适用于图像处理

人眼对于RGB这三种颜色分量的敏感程度是不一样的,在单色中,人眼对红色最不敏感,蓝色最敏感,所以 RGB 颜色空间是一种均匀性较差的颜色空间。如果颜色的相似性直接用欧氏距离来度量,其结果与人眼视觉会有较大的偏差。对于某一种颜色,我们很难推测出较为精确的三个分量数值来表示。

简单来说,如果计算不同颜色之间的对比度,如果使用 RGB 来计算:

(R1-R2)^2 + (G1-G2)^2 + (B1-B2)^2

即使两组颜色数值相同,人的感触还是不一样的,比如这里我选三个颜色:

  • RGB_1:110,0,110
  • RGB_2:60,0,100
  • RGB_3:160,0,110

可以看到尽管 RGB_1 和 RGB_3 距离 RGB_2 计算的欧式偏差是一样的,但我们还是会明显觉得 RGB_1 相比 RGB_3 更接近 RGB_2 ,因为 RGB_3 看上去比 RGB_1 和 RGB_2 更亮一些。

所以,RGB 颜色空间适合于显示系统,却并不适合于图像处理,图像处理强调的更多是 感触。

(二)HSV颜色空间

根据颜色的直观特性创建的一种颜色空间,有 A.R. Smith 在 1978年创建的一种颜色空间,也称 六角椎体模型。

  • 色调 Hue
  • 饱和度 Saturation
  • 明度(亮度)Value

HSV 对用户来说是一种 直观的颜色模型,我们可以从一种纯色彩开始,即指定色彩角H,并让V=S=1,然后我们可以通过向其中加入黑色和白色,来得到我们需要的颜色。

  • 增加黑色可以减小V而S不变
  • 同样增加白色可以减少S而V不变

例如:要得到深蓝色:V=0.4,S=1,H=240度。

此外需要额外注意的是,HSV和HSB代指的是同一种颜色空间算法。

(三)HSL 颜色空间。

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

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

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

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

(四)PS上的示例

下面是 Photoshop 和 Affinity Designer 的拾色器。

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

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

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

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

(五)RGB、HSV、HSL转换方程式

  1. typedef struct {
  2. NSUInteger r;
  3. NSUInteger g;
  4. NSUInteger b;
  5. CGFloat a;
  6. } RGB;
  7. typedef struct {
  8. NSUInteger h;
  9. CGFloat s;
  10. CGFloat l;
  11. CGFloat a;
  12. } HSL;
  13. typedef struct {
  14. NSUInteger h;
  15. CGFloat s;
  16. CGFloat v;
  17. CGFloat a;
  18. } HSV;
  19. /**
  20. * Converts an RGB color value to HSL. Conversion formula
  21. * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
  22. * Assumes r, g, and b are contained in the set [0, 255] and
  23. * returns h, s, and l in the set [0, 1].
  24. *
  25. * @param Number r The red color value
  26. * @param Number g The green color value
  27. * @param Number b The blue color value
  28. * @return Array The HSL representation
  29. */
  30. HSL RGBToHSL(RGB rgb) {
  31. CGFloat r = rgb.r / 255.0, g = rgb.g / 255.0, b = rgb.b / 255.0;
  32. CGFloat max = MAX(MAX(r, g), b), min = MIN(MIN(r, g), b);
  33. CGFloat h = 0, s = 0, l = (max + min) / 2;
  34. if (max == min) {
  35. h = s = 0; // achromatic
  36. } else {
  37. CGFloat d = max - min;
  38. s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  39. if (max == r) {
  40. h = (g - b) / d + (g < b ? 6 : 0);
  41. } else if (max == g) {
  42. h = (b - r) / d + 2;
  43. } else {
  44. h = (r - g) / d + 4;
  45. }
  46. h /= 6;
  47. }
  48. return (HSL){ .h = static_cast<NSUInteger>(round(h * 360.0)), .s = s, .l = l, .a = rgb.a };
  49. }
  50. /**
  51. * Converts an HSL color value to RGB. Conversion formula
  52. * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
  53. * Assumes h, s, and l are contained in the set [0, 1] and
  54. * returns r, g, and b in the set [0, 255].
  55. *
  56. * @param Number h The hue
  57. * @param Number s The saturation
  58. * @param Number l The lightness
  59. * @return Array The RGB representation
  60. */
  61. RGB HSLToRGB(HSL hsl) {
  62. CGFloat h = hsl.h / 360.0, s = hsl.s, l = hsl.l;
  63. CGFloat r = 0, g = 0, b = 0;
  64. if (s == 0) {
  65. r = g = b = l; // achromatic
  66. } else {
  67. CGFloat (^hue2rgb)(CGFloat, CGFloat, CGFloat) = ^CGFloat(CGFloat p, CGFloat q, CGFloat t) {
  68. if (t < 0.0)
  69. t += 1;
  70. if (t > 1.0)
  71. t -= 1;
  72. if (t < 1 / 6.0)
  73. return p + (q - p) * 6 * t;
  74. if (t < 1 / 2.0)
  75. return q;
  76. if (t < 2 / 3.0)
  77. return p + (q - p) * (2 / 3.0 - t) * 6;
  78. return p;
  79. };
  80. CGFloat q = l < 0.5 ? l * (1 + s) : l + s - l * s;
  81. CGFloat p = 2 * l - q;
  82. r = hue2rgb(p, q, h + 1 / 3.0);
  83. g = hue2rgb(p, q, h);
  84. b = hue2rgb(p, q, h - 1 / 3.0);
  85. }
  86. NSUInteger red = round(r * 255);
  87. NSUInteger green = round(g * 255);
  88. NSUInteger blue = round(b * 255);
  89. return (RGB){ .r = red, .g = green, .b = blue, .a = hsl.a };
  90. }
  91. /**
  92. * Converts an RGB color value to HSV. Conversion formula
  93. * adapted from http://en.wikipedia.org/wiki/HSV_color_space.
  94. * Assumes r, g, and b are contained in the set [0, 255] and
  95. * returns h, s, and v in the set [0, 1].
  96. *
  97. * @param Number r The red color value
  98. * @param Number g The green color value
  99. * @param Number b The blue color value
  100. * @return Array The HSV representation
  101. */
  102. HSV RGBToHSV(RGB rgb) {
  103. CGFloat r = rgb.r / 255.0, g = rgb.g / 255.0, b = rgb.b / 255.0;
  104. CGFloat max = MAX(MAX(r, g), b), min = MIN(MIN(r, g), b);
  105. CGFloat h = 0, s = 0, v = max;
  106. CGFloat d = max - min;
  107. s = max == 0 ? 0 : d / max;
  108. if (max == min) {
  109. h = 0; // achromatic
  110. } else {
  111. if (max == r) {
  112. h = (g - b) / d + (g < b ? 6 : 0);
  113. } else if (max == g) {
  114. h = (b - r) / d + 2;
  115. } else {
  116. h = (r - g) / d + 4;
  117. }
  118. h /= 6;
  119. }
  120. return (HSV){ .h = static_cast<NSUInteger>(round(h * 360)), .s = s, .v = v, .a = rgb.a };
  121. }
  122. /**
  123. * Converts an HSV color value to RGB. Conversion formula
  124. * adapted from http://en.wikipedia.org/wiki/HSV_color_space.
  125. * Assumes h, s, and v are contained in the set [0, 1] and
  126. * returns r, g, and b in the set [0, 255].
  127. *
  128. * @param Number h The hue
  129. * @param Number s The saturation
  130. * @param Number v The value
  131. * @return Array The RGB representation
  132. */
  133. RGB HSVToRGB(HSV hsv) {
  134. CGFloat r = 0, g = 0, b = 0, h = hsv.h / 360.0, s = hsv.s, v = hsv.v;
  135. NSUInteger i = floor(h * 6);
  136. CGFloat f = h * 6 - i;
  137. CGFloat p = v * (1 - s);
  138. CGFloat q = v * (1 - f * s);
  139. CGFloat t = v * (1 - (1 - f) * s);
  140. switch (i % 6) {
  141. case 0: {
  142. r = v;
  143. g = t;
  144. b = p;
  145. break;
  146. }
  147. case 1: {
  148. r = q;
  149. g = v;
  150. b = p;
  151. break;
  152. }
  153. case 2: {
  154. r = p;
  155. g = v;
  156. b = t;
  157. break;
  158. }
  159. case 3: {
  160. r = p;
  161. g = q;
  162. b = v;
  163. break;
  164. }
  165. case 4: {
  166. r = t;
  167. g = p;
  168. b = v;
  169. break;
  170. }
  171. case 5: {
  172. r = v;
  173. g = p;
  174. b = q;
  175. break;
  176. }
  177. }
  178. NSUInteger red = round(r * 255);
  179. NSUInteger green = round(g * 255);
  180. NSUInteger blue = round(b * 255);
  181. return (RGB){ .r = red, .g = green, .b = blue, .a = hsv.a };
  182. }

文章首发:问我社区

这个公众号会持续更新技术方案、关注业内技术动向,关注一下成本不高,错过干货损失不小。

↓↓↓


RGB、YUV、HSV和HSL区别和关联的更多相关文章

  1. Atitit  rgb yuv  hsv HSL 模式和 HSV(HSB) 图像色彩空间的区别

    Atitit  rgb yuv  hsv HSL 模式和 HSV(HSB) 图像色彩空间的区别 1.1. 色彩的三要素 -- 色相.明度.纯度1 1.2. YUV三个字母中,其中"Y&quo ...

  2. [图像类名词解释][ RGB YUV HSV相关解释说明]

    一.概述 颜色通常用三个独立的属性来描述,三个独立变量综合作用,自然就构成一个空间坐标,这就是颜色空间.但被描述的颜色对象本身是客观的,不同颜色空间只是从不同的角度去衡量同一个对象.颜色空间按照基本机 ...

  3. 颜色空间RGB与HSV(HSL)的转换

    一般的3D编程只需要使用RGB颜色空间就好了,但其实美术人员更多的是使用HSV(HSL),因为可以方便的调整饱和度和亮度. 有时候美术需要程序帮助调整饱和度来达到特定风格的渲染效果,这时候就需要转换颜 ...

  4. RGB, YUV及相关标准

    最近在一次排查问题的过程中发现色彩空间及色彩空间转换也有很多技术细节,而理清这些细节能帮助我们更准确的定位视频方面的问题. 1. 色彩空间 色彩空间一词源于英文的“Color Space”,色彩学中, ...

  5. Atitit 颜色平均值cloor grb hsv模式的区别对比

    Atitit 颜色平均值cloor grb hsv模式的区别对比 使用hsv模式平均后会变得更加的靓丽一些..2 public class imgT { public static void main ...

  6. 最简单的视音频播放示例7:SDL2播放RGB/YUV

    本文记录SDL播放视频的技术.在这里使用的版本是SDL2.实际上SDL本身并不提供视音频播放的功能,它只是封装了视音频播放的底层API.在Windows平台下,SDL封装了Direct3D这类的API ...

  7. 最简单的视音频播放示例5:OpenGL播放RGB/YUV

    本文记录OpenGL播放视频的技术.OpenGL是一个和Direct3D同一层面的技术.相比于Direct3D,OpenGL具有跨平台的优势.尽管在游戏领域,DirectX的影响力已渐渐超越OpenG ...

  8. 由RGB到HSV颜色空间的理解

    1. RGB模型 2. HSV模型 3. 如何理解RGB与HSV的联系 4. HSV在图像处理中的应用 5. opencv中RGB-->HSV实现 在图像处理中,最常用的颜色空间是RGB模型,常 ...

  9. 最简单的视音频播放演示样例5:OpenGL播放RGB/YUV

    ===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...

随机推荐

  1. jdk1.5出现的新特性---->增强for循环

    import java.util.HashMap; import java.util.HashSet; import java.util.Iterator; import java.util.Map; ...

  2. JAVA! static的作用

    是静态修饰符,什么叫静态修饰符呢?大家都知道,在程序中任何变量或者代码都是在编译时由系统自动分配内存来存储的,而所谓静态就是指在编译后所分配的内存会一直存在,直到程序退出内存才会释放这个空间,也就是只 ...

  3. 手势仿QQ侧滑---秀清

    // // SlideViewController.h // qqcehua // // Created by 张秀清 on 15/5/25. // Copyright (c) 2015年 张秀清. ...

  4. MHA高可用配置及故障切换

    MHA高可用配置及故障切换 目录 MHA高可用配置及故障切换 一.案例概述 二.案例前置知识点 1. MHA概述 2. MHA的组成 (1)MHA Manager(管理节点) (2)MHA Node( ...

  5. docker基础——4.网络待补

    docker network ls bridge:NAT桥 host:共用宿主机namespace的UTS.IPC.Network none:只有lo,没有网卡 其他待补

  6. Spark算子 - aggregateByKey

    释义 aggregateByKey逻辑类似 aggregate,但 aggregateByKey针对的是PairRDD,即键值对 RDD,所以返回结果也是 PairRDD,结果形式为:(各个Key, ...

  7. 将自己的web应用发布到Tomcat

    方法一:(用这个方法最好先把ROOT文件夹备份好,不建议使用) 1,打开tomcat 的目录,在webapps 的目录下, 把命名为ROOT 的文件夹删掉, 然后把自己的war 包更名为 ROOT.w ...

  8. 高可用 & 七层负载均衡与四层负载均衡

    内容概要 高可用 七层负载均衡 和 四层负载均衡 内容详细 一.高可用 1.什么是高可用 一般是指2台机器启动着完全相同的业务系统,当有一台机器down机了,另外一台服务器就能快速的接管,对于访问的用 ...

  9. Solution -「UR #21」「UOJ #632」挑战最大团

    \(\mathcal{Description}\)   Link.   对于简单无向图 \(G=(V,E)\),定义它是"优美"的,当且仅当 \[\forall\{a,b,c,d\ ...

  10. 我是如何破解你的WINDOWS密码的 ?(1)

    我是如何破解你的WINDOWS密码的 ?(1) 密码可以看作我们主要,甚至某些情况下唯一可用于防范入侵的防线.就算入侵者无法在物理上接触到计算机,对于对外的Web应用,他们依然可以通过远程桌面协议或身 ...