RGB 和 HSL 的转换和应用

一丶HSL

HSL即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。

色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等，取0-360。

饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%(0-1)的数值。

明度（V），亮度（L），取0-100%(0-1)。

二丶RGB

光的三原色：红绿蓝，RGB这三种颜色的组合，几乎能形成所有的颜色。所以显示器使用这种原理去显示图像。

RGB的取值范围：R(0~255) G(0~255) B(0~255) 

16进制表示方式：#FF FF FF

三丶将RGB转换成HSL

四丶将HSL转换成RGB

五丶在游戏开发中的应用(我自己用到的QAQ)

①高亮显示精灵

当鼠标悬停于按钮上的时候可以通过设置L改变亮度。

②精灵变色 通过shader去改变精灵色相 ，饱和度，明度。.

#ifdef GL_ES
        precision mediump float;
#endif
        varying vec2 v_texCoord;
        uniform float u_dH;//设置色相
        uniform float u_dS;//设置饱和度
        uniform float u_dL;//设置亮度
        uniform float u_dA;//设置透明度
        void main() { 
            vec4 texColor = texture2D(CC_Texture0, v_texCoord); 
            float r = texColor.r; 
            float g = texColor.g; 
            float b = texColor.b; 
            float a = texColor.a; 
            //convert rgb to hsl 
            float h; 
            float s; 
            float l; 
            { 
                float max = max(max(r, g), b); 
                float min = min(min(r, g), b); 
                //----h 
                if (max == min){ 
                    h = 0.0; 
                } 
                else if (max == r&&g >= b){ 
                    h = 60.0*(g - b) / (max - min) + 0.0; 
                } 
                else if (max == r&&g < b){ 
                    h = 60.0*(g - b) / (max - min) + 360.0; 
                } 
                else if (max == g){ 
                    h = 60.0*(b - r) / (max - min) + 120.0; 
                } 
                else if (max == b){ 
                    h = 60.0*(r - g) / (max - min) + 240.0; 
                } 
                //----l 
                l = 0.5*(max + min); 
                //----s 
                if (l == 0.0 || max == min){ 
                    s = 0.0; 
                } 
                else if (0.0 <= l&&l <= 0.5){ 
                    s = (max - min) / (2.0*l); 
                } 
                else if (l > 0.5){ 
                    s = (max - min) / (2.0 - 2.0*l); 
                } 
                
            } 
            //(h,s,l)+(dH,dS,dL) -> (h,s,l) 
            h = h + u_dH; 
            s = min(1.0, max(0.0, s + u_dS)); 
            l = l + u_dL; 
            //convert (h,s,l) to rgb and got final color 
            vec4 finalColor; 
            { 
                float q; 
                if (l < 0.5){ 
                    q = l*(1.0 + s); 
                } 
                else if (l >= 0.5){ 
                    q = l + s - l*s; 
                } 
                float p = 2.0*l - q; 
                float hk = h / 360.0; 
                
                float t[3]; 
                t[0] = hk + 1.0 / 3.0; 
                t[1] = hk; 
                t[2] = hk - 1.0 / 3.0;  
                
                float c[3]; 
                for (int i = 0; i < 3; i++){ 
                    if (t[i] < 0.0)t[i] += 1.0; 
                    if (t[i] > 1.0)t[i] -= 1.0; 
                    
                    if (t[i] < 1.0 / 6.0){ 
                        c[i] = p + ((q - p)*6.0*t[i]); 
                    } 
                    else if (1.0 / 6.0 <= t[i] && t[i] < 0.5){ 
                        c[i] = q; 
                    } 
                    else if (0.5 <= t[i] && t[i] < 2.0 / 3.0){ 
                        c[i] = p + ((q - p)*6.0*(2.0 / 3.0 - t[i])); 
                    } 
                    else{ 
                        c[i] = p; 
                    }
                } 
                finalColor = vec4( c[0],c[1], c[2],  (texColor.a<0.9)?a: (u_dA==0)?1:u_dA); 
            } 
            finalColor += vec4(u_dL, u_dL, u_dL, 0.0); 
            gl_FragColor = finalColor; 
        }