技術標籤：前端js

原理

• RGB色彩模式是工業界的一種顏色標準，是通過對紅®、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB即是代表紅、綠、藍三個通道的顏色，這個標準幾乎包括了人類視力所能感知的所有顏色，是運用最廣的顏色系統之一。

• 決定顏色的有三種:紅，綠，藍。每種都是0-255。這3個自由組合組成各種顏色。

• 255換成16進位制就是FF，#FFFFFF就是紅色255 ,綠色255，藍色255 ,組成白色

將rgb顏色轉成hex

// 將rgb顏色轉成hex  輸入(24,12,255)
function colorRGB2Hex(
 
r,g,b) {
    
    let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    return hex;
}

rgb色轉成hex : colorRGB2Hex(255,255,255);

返回hex值 如#cccccc

將hex顏色轉成rgb

// 將hex顏色轉成rgb
function hexToRgba(hex, opacity) {
    let RGBA = "rgba(" + parseInt
 
("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," + parseInt( "0x" + hex.slice(5, 7)) + "," + opacity + ")";
    return {
        red: parseInt("0x" + hex.slice(1, 3)),
        green: parseInt("0x"
 
 + hex.slice(3, 5)),
        blue: parseInt("0x" + hex.slice(5, 7)),
        rgba: RGBA
    }
}

hex轉成rgba: hexToRgba("#cccccc", 1);

第一個引數為hex色值，第二個引數為透明度，返回物件