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

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<NSUInteger>(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<NSUInteger>(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 };}

文章首发：问我社区

**这个公众号会继续更新技术计划、关注业内技术动向，关注一下老本不高，错过干货损失不小。
↓↓↓**