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};
}
文章首发:问我社区
** 这个公众号会继续更新技术计划、关注业内技术动向,关注一下老本不高,错过干货损失不小。
↓↓↓**