AI专业者开发社区 1 号成员
  •  0 回帖  •  8 浏览  •  4 个月前
   

CSS颜色模式转换器的实现

前面的话

　　在 CSS 中，颜色的表示方式主要包括关键字、16 进制、RGB 模式、RGBA 模式、HSL 模式、HSLA 模式。关于颜色模式的详细信息移步至此。本文就 16 进制、RGB 模式及 HSL 模式的互相转换进行实现。

 

模式转换

【1】16 进制 -> RGB

　　16 进制是设置颜色值的常用方式，将三个介于 00-FF 的十六进制数连接起来，若 16 进制的 3 组数各自成对，则可简写为 3 位。

　　16 进制与 RGB 模式的对应关系为：16 进制的前两位对应 RGB 的 red 部分；16 进制的中间两位对应 RGB 的 green 部分；16 进制的后两位对应 RGB 的 blue 部分。而 16 进制使用的 16 进制的数字格式，而 RGB 使用的 10 进制的数字格式。所以还需要数字进制的变换

function sixteenToRgb(str){
    var r,g,b,rgb;
    if(str.length == 7){
        r = parseInt(str.substr(1,2),16);
        g = parseInt(str.substr(3,2),16);
        b = parseInt(str.substr(5,2),16);}else if(str.length == 4){
        r = parseInt('' + str.substr(1,1) + str.substr(1,1),16);
        g = parseInt('' + str.substr(2,1) + str.substr(2,1),16);
        b = parseInt('' + str.substr(3,1) + str.substr(3,1),16);}else{
        return 'false'
    }
    rgb = 'rgb(' + r +',' + g +','+b +')';
    return  rgb;
}
console.log(sixteenToRgb('#123456'));//rgb(18,52,86)    
console.log(sixteenToRgb('#123'));//rgb(17,34,51)
console.log(sixteenToRgb('#1234'));//false

 

【2】RGB -> 16 进制

　　通过组合不同的红色、绿色、蓝色分量创造出的颜色成为 RGB 模式的颜色。显示器是由一个个像素构成，利用电子束来表现色彩。像素把光的三原色: 红色 (R)、绿色(G)、蓝色(B) 组合起来。每像素包含 8 位元色彩的信息量，有 0-255 的 256 个单元，其中 0 是完全无光状态，255 是最亮状态

　　在 RGB 模式转换为 16 进制模式要注意的是，转换的成 R、G、B 三个分量的 16 进制值如果是一位数，则需要在前一位补 0

function rgbToSixteen(str){
    var r16,g16,b16,sixteen;
    if(/^rgb\((\d+)\,(\d+)\,(\d+)\)$/.test(str)){
           if( RegExp.$1 >= 0 && RegExp.$1 <=255 || RegExp.$2 >= 0 && RegExp.$2 <=255 || RegExp.$3 >= 0 && RegExp.$3 <=255){
               r16 = addZero(Number(RegExp.$1).toString(16));
               g16 = addZero(Number(RegExp.$2).toString(16));
               b16 = addZero(Number(RegExp.$3).toString(16));
            　 sixteen = '#' + r16 + g16 + b16 ;
            　 return  sixteen;
           }else{
               return 'false';
           }
    }else{
        return 'false';
    }
}
function addZero(str){
    if(str.length == 1){
        return '0' + str;
    }else{
        return str;
    }
}
console.log(rgbToSixteen('rgb(10,44,3)'));//#0a2c03    
console.log(rgbToSixteen('rgb(-10,44,3)'));//false
console.log(rgbToSixteen('rgb(123)'));//false

 

【3】HSL -> RGB

　　HSL 模式是通过对色调 (H)、饱和度(S)、亮度(L) 三个颜色通道的变化以及它们相互的叠加得到各式各样的颜色。HSL 标准几乎可以包括人类视力所能感知的所有颜色

　　h: 色调 (hue) 可以为任意整数。0(或 360 或 -360)表示红色，60 表示黄色，120 表示绿色，180 表示青色，240 表示蓝色，300 表示洋红(当 h 值大于 360 时，实际的值等于该值模 360 后的值)

　　s: 饱和度 (saturation)，就是指颜色的深浅度和鲜艳程度。取 0-100% 范围的值，其中 0 表示灰度 (没有该颜色)，100% 表示饱和度最高 (颜色最鲜艳)

　　l: 亮度 (lightness)，取 0-100% 范围的值，其中 0 表示最暗 (黑色)，100% 表示最亮 (白色)

//参考 http://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
function hslToRgb(str){
    var r, g, b;
    var h, s, l;
    if(/^hsl\((\d+)\,(\d+)%\,(\d+)%\)$/.test(str)){
           if( RegExp.$1 >= 0 && RegExp.$1 <=360 && RegExp.$2 >= 0 && RegExp.$2 <=100 && RegExp.$3 >= 0 && RegExp.$3 <=100){
               h = RegExp.$1/360;
               s = RegExp.$2/100;
               l = RegExp.$3/100;
            if(s == 0){
                r = g = b = l; 
            }else{
                var hue2rgb = function hue2rgb(p, q, t){
                    if(t < 0) t += 1;
                    if(t > 1) t -= 1;
                    if(t < 1/6) return p + (q - p) * 6 * t;
                    if(t < 1/2) return q;
                    if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                    return p;
                }

            </span><span style="color: #0000ff;">var</span> q = l &lt; 0.5 ? l * (1 + s) : l + s - l *<span style="color: #000000;"> s;
            </span><span style="color: #0000ff;">var</span> p = 2 * l -<span style="color: #000000;"> q;
            r </span>= hue2rgb(p, q, h + 1/3);
            g =<span style="color: #000000;"> hue2rgb(p, q, h);
            b </span>= hue2rgb(p, q, h - 1/3);



            }
return 'rgb(' + Math.round(r * 255) + ','+ Math.round(g * 255)+ ',' + Math.round(b * 255) + ')';
}else{
return 'false';
}
}else{
return 'false';
}
}
console.log(hslToRgb('hsl(248,64%,39%)'));//rgb(53,36,163)    
console.log(hslToRgb('hsl(-248,64%,39%)'));//false    
console.log(hslToRgb('hsl(300,40%,50%)'));//rgb(179,77,178)

 

【4】RGB -> HSL

//参考 http://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
function rgbToHsl(str){
    var r,g,b;
    if(/^rgb\((\d+)\,(\d+)\,(\d+)\)$/.test(str)){
           if( RegExp.$1 >= 0 && RegExp.$1 <=255 && RegExp.$2 >= 0 && RegExp.$2 <=255 && RegExp.$3 >= 0 && RegExp.$3 <=255){
            r = RegExp.$1/255, g = RegExp.$2/255, b = RegExp.$3/255;
            var max = Math.max(r, g, b), min = Math.min(r, g, b);
            var h, s, l = (max + min) / 2;

        </span><span style="color: #0000ff;">if</span>(max ==<span style="color: #000000;"> min){
            h </span>= s = 0; <span style="color: #008000;">//</span><span style="color: #008000;"> achromatic</span>
        }<span style="color: #0000ff;">else</span><span style="color: #000000;">{
            </span><span style="color: #0000ff;">var</span> d = max -<span style="color: #000000;"> min;
            s </span>= l &gt; 0.5 ? d / (2 - max - min) : d / (max +<span style="color: #000000;"> min);
            </span><span style="color: #0000ff;">switch</span><span style="color: #000000;">(max){
                </span><span style="color: #0000ff;">case</span> r: h = (g - b) / d + (g &lt; b ? 6 : 0); <span style="color: #0000ff;">break</span><span style="color: #000000;">;
                </span><span style="color: #0000ff;">case</span> g: h = (b - r) / d + 2; <span style="color: #0000ff;">break</span><span style="color: #000000;">;
                </span><span style="color: #0000ff;">case</span> b: h = (r - g) / d + 4; <span style="color: #0000ff;">break</span><span style="color: #000000;">;
            }
            h </span>/= 6;



            }
return 'hsl(' + Math.round(h360) + ',' + Math.round(s100)+ '%,' + Math.round(l*100) + '%)';
}else{
return 'false';
}
}else{
return 'false';
}
}
console.log(rgbToHsl('rgb(53,36,163)'));//hsl(248,64%,39%)
console.log(rgbToHsl('rgb(179,77,178)'));//hsl(301,40%,50%)
console.log(rgbToHsl('rgb(300,1,1)'));//false

 

DEMO 实现

简易拾色器

 

16 进制颜色转换器

 

RGB 颜色转换器

 

HSL 颜色转换器