十六进制颜色转换（3 位、4 位、6 位）、生成颜色渐变、确定颜色值是深还是浅
最编程
2024-05-04 17:02:16
...
export function getColor(color, amount) {
// 是#开头的十六进制的色值
if (/^#[0-9A-Fa-f]?/.test(color)) {
// 如果是4位数的色值，补全成6位，并且取出透明度值，要不计算num会有问题
const fourReg = /^#[0-9A-Fa-f]{4}$/;
let alpa = 0;
if (fourReg.test(color)) {
const fourLengthReg = /^#([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])/;
const colorCopy = color;
color = color.replace(fourLengthReg, `#$1$1$2$2$3$3`);
alpa = colorCopy.replace(fourLengthReg, `$4`);
}
// 如果是3位数的色值，补全成6位，
const threeReg = /^#[0-9A-Fa-f]{3}$/;
if (threeReg.test(color)) {
const testReg = /^#([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])/;
color = color.replace(testReg, `#$1$1$2$2$3$3`);
}
const fill = str => ('00' + str).slice(-2);
const rgb = getRgb(color.substr(1), amount);
const newColor =
'#' + fill(rgb.red.toString(16)) + fill(rgb.green.toString(16)) + fill(rgb.blue.toString(16));
// 如果颜色有透明度，则生成的渐变色也加上一样的透明度
if (alpa) {
return set16ToRgb(newColor, alpa / 16);
}
return newColor;
// 如果色值是 rgba 形式的
} else if (/rgba\(/.test(color)) {
return getColor16(color.replace(/;/, ''), amount);
}
}
// rgba 格式的色值，取渐变色
export function getColor16(rgba, amount) {
const deleteRegular = /((^rgba\()|(\)))/gi;
// 去除开头的 'rgba(' 和后面的 '）'
const newColor = rgba.replace(deleteRegular, '');
const rgbaList = newColor.split(',');
const alpa = Number(rgbaList[3]);
const color16 = `${Number(rgbaList[0]).toString(16)}${Number(rgbaList[1]).toString(16)}${Number(
rgbaList[2]
).toString(16)}`;
const fill = str => ('00' + str).slice(-2);
const rgb = getRgb(color16, amount);
const resolveColor =
'#' + fill(rgb.red.toString(16)) + fill(rgb.green.toString(16)) + fill(rgb.blue.toString(16));
if (alpa) {
const returnColor = set16ToRgb(resolveColor, alpa);
return returnColor;
} else {
const returnColor = set16ToRgb(resolveColor, '0.1');
return returnColor;
}
}
function getRgb(color, amount) {
const clamp = val => Math.min(Math.max(val, 0), 0xff);
const num = parseInt(color, 16);
// 用>>不用考虑小于零 或者大于 ffffff 的情况
const red = clamp((num >> 16) + amount);
const green = clamp(((num >> 8) & 0x00ff) + amount);
const blue = clamp((num & 0x0000ff) + amount);
return {
red,
green,
blue
};
}
// 给十六进制颜色加上透明度，转换成rgba
export function set16ToRgb(str, alpha) {
const reg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
if (reg.test(str)) {
let newStr = str.toLowerCase().replace(/#/g, '');
const len = newStr.length;
if (len === 3) {
let t = '';
for (let i = 0; i < len; i++) {
t += newStr.slice(i, i + 1).concat(newStr.slice(i, i + 1));
}
newStr = t;
}
const arr = [];
for (let i = 0; i < 6; i = i + 2) {
const s = newStr.slice(i, i + 2);
arr.push(parseInt('0x' + s));
}
return `rgba(${arr[0]},${arr[1]},${arr[2]},${alpha || '0'})`;
}
const rgbaReg = /^(rgba\()(\d+,?){3}/;
if (rgbaReg.test(str)) {
const deleteRegular = /((^rgba\()|(\)))/gi;
const newColor = str.replace(deleteRegular, '');
const arr = newColor.split(',');
const alpa = Number(arr[3]);
return `rgba(${arr[0]},${arr[1]},${arr[2]},${(alpa * alpha).toFixed(3)})`;
}
}
上一篇： 十六进制颜色代码表