顏色空間--HSL

• 定義
• 轉換
• HLSL 實現

本文章主要介紹HSL顏色空間和RGB顏色空間的區別和用途，以及如何利用HLSL著色器語言進行互轉。

定義

HSL即色相、飽和度、亮度（英語：Hue, Saturation, Lightness）。
色相（H）是色彩的基本屬性，就是平常所說的顏色名稱，如紅色、黃色等。可以說和光譜對應。取值為0-360度。
飽和度（S）是指色彩的純度，越高色彩越純，低則逐漸變灰，取0-100%的數值。
明度（V），亮度（L），取0-100%。
如圖所示，圓柱從低向上，表示亮度，由中軸向外表示飽和度，水平截面的圓周角表示色相。

如果用圓錐表示則為雙圓錐：這種表示放法相比較圓柱更加直觀，最低端的只用一個點表示黑色，如果用圓柱，用了一面表示黑色，無太大意義。從圓錐上可以看出，亮度的調節會影響顏色的豐富程度。

這種表示相比RGB更加直觀，比如：白色可以直接將亮度設置為100%,而RGB需要設置三個通道。比如顏色想從黃色過度到紅色，只需要調整色相即可，飽和度和亮度保持不變，而RGB調節相對就比較復雜且不直觀。HSL一般更適用于用戶，而RGB更適用于顯示領域。

轉換

HSL和RGB的相互轉換百度百科有詳細介紹。此處截圖說明轉換公式：

HLSL 實現

void RGB2HSL(in float3 rgb, out float3 hsl) {float precision = 0.00001f;float rgbMax = max(max(rgb.r, rgb.g), rgb.b);float rgbMin = min(min(rgb.r, rgb.g), rgb.b);//hue[flatten]if (abs(rgbMax - rgbMin) < precision) // max == min{hsl.r = 0.0f;}else if (abs(rgbMax - rgb.r) < precision) // max == r{hsl.r = 60.0f * (rgb.g - rgb.b) / (rgbMax - rgbMin);if (rgb.g < rgb.b)hsl.r += 360.0f;}else if (abs(rgbMax - rgb.g) < precision) // max == g{hsl.r = 60.0f * (rgb.b - rgb.r) / (rgbMax - rgbMin) + 120.0f;}else if (abs(rgbMax - rgb.g) < precision) // max == b{hsl.r = 60.0f * (rgb.r - rgb.g) / (rgbMax - rgbMin) + 240.0f;}// lighthsl.b = (rgbMax + rgbMin) / 2.0f;// saturation[flatten]if (hsl.b <= precision || abs(rgbMax - rgbMin) < precision){hsl.g = 0.0f;}else if (hsl.b > 0.0f && hsl.b <= 0.5f){hsl.g = (rgbMax - rgbMin) / (rgbMax + rgbMin);}else if (hsl.b > 0.5f){hsl.g = (rgbMax - rgbMin) / (2 - (rgbMax + rgbMin));}}float ToColor(float p, float q, float t) {[flatten]if (t < 0.0f)t = t + 1.0f;else if (t > 1.0f)t = t - 1.0f;float c = 0.0f;[flatten]if (t < 0.166667f){c = p + ((q - p) * 6 * t);}else if (t >= 0.166667f && t < 0.5f){c = q;}else if (t >= 0.5f && t < 0.66667f){c = p + ((q - p) * 6 * (0.66667f - t));}else{c = p;}return c; }void HSL2RGB(in float3 hsl, out float3 rgb) {float precision = 0.00001f;[flatten]float hue = hsl.r;float sat = hsl.g;float light = hsl.b;if (sat < precision) // sat == 0{rgb = hsl.bbb;}else{float q = 0.0f, p = 0.0f, hk = 0.0;if (light < 0.5f){q = light * (1 + sat);}else{q = light + sat - (light * sat);}p = 2.0f * light - q;hk = hue / 360.0f;rgb.r = ToColor(p, q, hk + 0.33333f);rgb.g = ToColor(p, q, hk);rgb.b = ToColor(p, q, hk - 0.33333f);} }

總結

以上是生活随笔為你收集整理的颜色空间/格式转换:HSL-RGB的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。