原理
-
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色值,第二个参数为透明度,返回对象