CSS顏色模式轉換器的實現 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　在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;
                }

                var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
                var p = 2 * l - q;
                r = hue2rgb(p, q, h + 1/3);
                g = hue2rgb(p, q, h);
                b = 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;

            if(max == min){
                h = s = 0; // achromatic
            }else{
                var d = max - min;
                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                switch(max){
                    case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                    case g: h = (b - r) / d + 2; break;
                    case b: h = (r - g) / d + 4; break;
                }
                h /= 6;
            }
            return 'hsl(' + Math.round(h*360) + ',' + Math.round(s*100) + '%,' + 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