yl-view/libs/utils/color.js

一个基于uniapp的ui框架

//将hex颜色值str转化成rgb数组
function $HexToRgb (str) {
	let r = /^\#?[0-9a-fA-F]{6}$/;
	//test方法检查在字符串中是否存在一个模式，如果存在则返回true，否则返回false
	if (!r.test(str)) return console.error("输入错误的hex颜色值");
	//replace替换查找的到的字符串
	str = str.replace("#", "");
	//match得到查询数组
	let hxs = str.match(/../g);
	for (let i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16);
	return hxs;
}
//将rgb颜色值为a,b,c转化成hex颜色值
function $RgbToHex (a, b, c) {
    let r = /^\d{1,3}$/;
    if (!r.test(a) || !r.test(b) || !r.test(c)) return console.error("输入错误的rgb颜色值");
    let hexs = [a.toString(16), b.toString(16), c.toString(16)];
    for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = "0" + hexs[i];
    return "#" + hexs.join("");
}
//得到hex颜色值为color的加深颜色值，level为加深的程度，限0-1之间
function $getDarkColor (color, level) {
	color = color.toLowerCase()
        let r = /^\#?[0-9a-f]{6}$/;
            if (!r.test(color)) return console.error("输入错误的hex颜色值");
                let rgbc = $HexToRgb(color);
                    //floor 向下取整
                        for (let i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level));
                            return $RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
                            }
//得到hex颜色值为color的减淡颜色值，level为减淡的程度，限0-1之间
function $getLightColor (color, level) {
	color = color.toLowerCase()
    let r = /^\#?[0-9a-f]{6}$/;
    if (!r.test(color)) return console.error("输入错误的hex颜色值");
    let rgbc = $HexToRgb(color);
    for (let i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]);
    return $RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
}

export default {
	$HexToRgb,
	$RgbToHex,
	$getDarkColor,
	$getLightColor
}