顔色的相關知識及轉換方法

　　在網頁上的顔色通常使用RGB來表示，即紅色，綠色，藍色的組合色。每種顔色可以有256個值(0~255)，三種顔色組合起來可以達到0~16777215種。

256可以由8位二進制數字表示(例如255的二進制是11111111)，是以表現三原色需要24位數字，稱為24位顔色系統。另外還有一個32位顔色系統，其中的8位用來表示顔色的透明度。

顔色還可以使用16進制來表示，比如#FFFFFF就使用了16進制表示白色(rgb 255 255 255)， # 号表示使用16進制，js中使用16進制需要在前面加上 0X 。

例如 0X1c1 表示 (1X16X16 + 12X16 + 1X1) ，左邊的數字是右邊相鄰數字的16倍。

　　

　　用 (16755210).toString(16); 将16755210這個數字轉化成16進制，結果為FFAA0A，用24位顔色表示為111111111010101000001010，紅綠藍各占8位。

　　如果知道了三原色，那麼可以通過以下公式将其組合成一個顔色：

var color = red << 16 | green << 8 | blue;      

用上面的顔色代入：

var color = 0xFF << 16 | 0xAA << 8 | 0x0A;      

或者

var color = 255 << 16 | 170 << 8 | 10      

這裡用到了 按位或 | ，表示隻要對應的兩個二進位有一個為1時，結果位就為1，否則為0。

<<符号表示按位左移操作符，操作以後可以得到

紅色：111111110000000000000000

綠色：000000001010101000000000

藍色：000000000000000000001010

如果想從一個已知的顔色中提取三原色，可以采取以下公式：

red = color >> 16 & 0xFF;

green = color >> 8 & 0xFF;

blue = color & 0xFF;      

*針對紅色111111111010101000001010右移16位得到的結果是000000000000000011111111

*綠色右移8位的結果是000000001111111110101010，不過這樣一來紅色的值也取出來了，是以需要與0XFF做一次 按位與& 計算，對應的二進制數字都為1時，結果為1，     否則為0。

   000000001111111110101010

   000000000000000011111111

   這樣得到的結果就是000000000000000010101010。

*藍色直接與0XFF做按位與運算

111111111010101000001010

000000000000000011111111

得到結果000000000000000000001010。

有了以上概念，就可以用來定義一個轉換顔色的方法colorToRGB：

var colorToRGB = function(color, alpha) {
    if (typeof color === 'string' && color[0] === '#') {
        color = parseInt(color.slice(1), 16);
    }
    alpha = (alpha === undefined) ? 1 : alpha;

    var r = color >> 16 & 0xff,
    g = color >> 8 & 0xff,
    b = color >> 0xff,
    a = (alpha < 0) ? 0 : ((alpha > 1) ? 1 : alpha);

    if (a === 1) {
        return 'rgb(' + r + ',' + g + ',' + b + ')';
    } else {
        return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
    }
};

var c = colorToRGB("#ff0acc"); // rgb(255,10,0)
      

最後附上十進制與二進制互相轉換的方法：

首先将待轉的十進制數拆解成2的n次方形式，n則表示1後面有幾個0，最後将拆解後的數字相加，就變成了二進制。

反過來，可以将二進制拆解成1後面跟多個0的形式，然後變成2的n次方，最後将2的n次方相加。

用js可以很友善的進行轉換：

(25).toString(2);  //11001

parseInt(11001,2)  //25

(25).toString(16);  //19

parseInt(19,16);  //25

parseInt(0x19,10); //25