ElementPlus颜色工具

使用：

function themeColorChange(color: string) {
  const appDom = document.getElementById("app");
  appDom.style.setProperty("--el-color-primary", color);
  appDom.style.setProperty("--el-color-primary-dark-2", ColorTool.darken(color, 0.2));
  for (let c = 1; c <= 9; c++) {
    appDom.style.setProperty(`--el-color-primary-light-${c}`, ColorTool.lighten(color, c / 10));
  }
  appDom.style.setProperty(`--el-color-primary-darken-1`, ColorTool.darken(color, 0.1));
}

工具实现：

class ColorTool {
  //hex颜色转rgb颜色
  static HexToRgb(str: string) {
    str = str.replace('#', '');
    const hxs: any = str.match(/../g);
    for (let i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16);
    return hxs;
  }
  //rgb颜色转hex颜色
  static RgbToHex(a: number, b: number, c: number) {
    const 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('');
  }
  //加深
  static darken(color: string, level: number) {
    const rgbc = this.HexToRgb(color);
    for (let i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level));
    return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
  }
  //变淡
  static lighten(color: string, level: number) {
    const rgbc = this.HexToRgb(color);
    for (let i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]);
    return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
  }
}

效果：

element的css变量分9个层级，循环使用darken和lighten函数，传入不同level，获得9个不同色阶的色值