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 };
}
文章首發：問我社區
這個公眾號會持續更新技術方案、關注業內技術動向，關注一下成本不高，錯過干貨損失不小，
↓↓↓
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/445608.html
標籤：其他