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

最近的需求与颜色转换有关，所以本文梳理了发展过程中常见的 四种颜色 。

一、RGB颜色空间

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

这时你可能要问，YUV、HSV、HSL也可以描述所有的颜色，为什么？RGB捏是最常用的捏吗？

这将回归现实。实际上，当显示器显示图像时，每个像素点对应 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_二 更亮。

所以，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转换方程式

typedef struct    NSUInteger r;    NSUInteger g;    NSUInteger b;    CGFloat a;} RGB;typedef struct    NSUInteger h;    CGFloat s;    CGFloat l;    CGFloat a;} HSL;typedef struct    NSUInteger h;    CGFloat s;    CGFloat v;    CGFloat a;} HSV;/** * Converts an RGB color value to HSL. Conversion formula * adapted from http://en.wikipedia.org/wiki/HSL_color_space. * Assumes r,g,and b are contained in the set [0,255] and * returns h, s, and l in the set [0, 1]. * * @param   Number  r       The red color value * @param   Number  g       The green color value * @param   Number  b       The blue color value * @return  Array           The HSL representation */HSL RGBToHSL(RGB rgb) {    CGFloat r = rgb.r / 255.0, g = rgb.g / 255.0, b = rgb.b / 255.0;    CGFloat max = MAX(MAX(r, g), b), min = MIN(MIN(r, g), b);    CGFloat h = 0, s = 0, l = (max + min) / 2;    if (max == min) {        h = s = 0; // achromatic    } else {        CGFloat d = max - min;        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);        if (max == r) {            h = (g - b) / d + (g < b ? 6 : 0);        } else if (max == g) {            h = (b - r) / d + 2;        } else {            h = (r - g) / d + 4;        }        h /= 6;    }    return (HSL){ .h = static_cast(round(h * 360.0)), .s = s, .l = l, .a = rgb.a };}/** * Converts an HSL color value to RGB. Conversion formula * adapted from http://en.wikipedia.org/wiki/HSL_color_space. * Assumes h, s, and l are contained in the set [0, 1] and * returns r, g, and b in the set [0, 255]. * * @param   Number  h       The hue * @param   Number  s       The saturation * @param   Number  l       The lightness * @return  Array           The RGB representation */RGB HSLToRGB(HSL hsl) {    CGFloat h = hsl.h / 360.0, s = hsl.s, l = hsl.l;    CGFloat r = 0, g = 0, b = 0;    if (s == 0) {        r = g = b = l; // achromatic    } else {        CGFloat (^hue2rgb)(CGFloat, CGFloat, CGFloat) = ^CGFloat(CGFloat p, CGFloat q, CGFloat t) {            if (t < 0.0)                t += 1;            if (t > 1.0)                t -= 1;            if (t < 1 / 6.0)                return p + (q - p) * 6 * t;            if (t < 1 / 2.0)                return q;            if (t < 2 / 3.0)                return p + (q - p) * (2 / 3.0 - t) * 6;            return p;        };        CGFloat q = l < 0.5 ? l * (1 + s) : l + s - l * s;        CGFloat p = 2 * l - q;        r = hue2rgb(p, q, h + 1 / 3.0);        g = hue2rgb(p, q, h);        b = hue2rgb(p, q, h - 1 / 3.0);    }    NSUInteger red = round(r * 255);    NSUInteger green = round(g * 255);    NSUInteger blue = round(b * 255);    return (RGB){ .r = red, .g = green, .b = blue, .a = hsl.a };}/** * Converts an RGB color value to HSV. Conversion formula * adapted from http://en.wikipedia.org/wiki/HSV_color_space. * Assumes r, g, and b are contained in the set [0, 255] and * returns h, s, and v in the set [0, 1]. * * @param   Number  r       The red color value * @param   Number  g       The green color value * @param   Number  b       The blue color value * @return  Array           The HSV representation */HSV RGBToHSV(RGB rgb) {    CGFloat r = rgb.r / 255.0, g = rgb.g / 255.0, b = rgb.b / 255.0;    CGFloat max = MAX(MAX(r, g), b), min = MIN(MIN(r, g), b);    CGFloat h = 0, s = 0, v = max;    CGFloat d = max - min;    s = max == 0 ? 0 : d / max;    if (max == min) {        h = 0; // achromatic    } else {        if (max == r) {            h = (g - b) / d + (g < b ? 6 : 0);        } else if (max == g) {            h = (b - r) / d + 2;        } else {            h = (r - g) / d + 4;        }        h /= 6;    }    return (HSV){ .h = static_cast(round(h * 360)), .s = s, .v = v, .a = rgb.a };}/** * Converts an HSV color value to RGB. Conversion formula * adapted from http://en.wikipedia.org/wiki/HSV_color_space. * Assumes h, s, and v are contained in the set [0, 1] and * returns r, g, and b in the set [0, 255]. * * @param   Number  h       The hue * @param   Number  s       The saturation * @param   Number  v       The value * @return  Array           The RGB representation */RGB HSVToRGB(HSV hsv) {    CGFloat r = 0, g = 0, b = 0, h = hsv.h / 360.0, s = hsv.s, v = hsv.v;    NSUInteger i = floor(h * 6);    CGFloat f = h * 6 - i;    CGFloat p = v * (1 - s);    CGFloat q = v * (1 - f * s);    CGFloat t = v * (1 - (1 - f) * s);    switch (i % 6) {        case 0: {            r = v;            g = t;            b = p;            break;        }        case 1: {            r = q;            g = v;            b = p;            break;        }        case 2: {            r = p;            g = v;            b = t;            break;        }        case 3: {            r = p;            g = q;            b = v;            break;        }        case 4: {            r = t;            g = p;            b = v;            break;        }        case 5: {            r = v;            g = p;            b = q;            break;        }    }    NSUInteger red = round(r * 255);    NSUInteger green = round(g * 255);    NSUInteger blue = round(b * 255);    return (RGB){ .r = red, .g = green, .b = blue, .a = hsv.a };}

---

文章首发：问我社区

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