系统主题色组的快速生成

背景

最近在一个saas项目中，遇到了一个主题色的切换问题。要求用户选一个颜色，我要根据这个颜色将系统的一整套主题色更换掉。

解决方案

话不多说先摆出我选择的解决方案👇

1、使用混合黑色或白色的比例

/**生成对应比例的深浅色
 * @param color 基准色值（Hex类型  ）
 * @param factor 深浅比率（>0浅）
 * @returns
 */
export const generateLighterColor = (color, factor) => {
	factor= Math.max(-1, Math.min(1, factor));
    let whiteColorRgb = hexToRGB('#ffffff');
    let blackColorRgb = hexToRGB('#000000');
    let colorRgb = hexToRGB(color);
    let newColorRgb = colorRgb;
    if (factor > 0) {
        newColorRgb = {
            red: colorRgb.red + (whiteColorRgb.red - colorRgb.red) * factor,
            green: colorRgb.green + (whiteColorRgb.green - colorRgb.green) * factor,
            blue: colorRgb.blue + (whiteColorRgb.blue - colorRgb.blue) * factor,
        }
    } else {
        newColorRgb = {
            red: colorRgb.red - (colorRgb.red - blackColorRgb.red) * Math.abs(factor),
            green: colorRgb.green - (colorRgb.green - blackColorRgb.green) * Math.abs(factor),
            blue: colorRgb.blue - (colorRgb.blue - blackColorRgb.blue) * Math.abs(factor),
        }
    }

    return rgbToHex(newColorRgb);
}

这个方案的灵感是来源的element-ui的主题色

2、使用颜色值的透明度

/**生成对应比例的深浅色(改变alpha)
 * @param color 基准色值（Hex类型  ）
 * @param opacity 0~1 越大越浅
 * @returns
 */
export const generateColor = (color, opacity) => {
    opacity = Math.max(0, Math.min(1, opacity));
    let opacityHex = Math.round((1-opacity) * 255).toString(16);
    if (opacityHex.length === 1) {
       opacityHex = '0' + opacityHex;
    }                
   return color + opacityHex;
}

3、其他

有兴趣可以自己研究👉: hsl() 函数–mdn