arco.design-color色彩工具-动态梯度算法

官网：https://github.com/arco-design/color
色彩工具
对于给定的颜色，使用算法生成包含10种颜色的渐变样本。这适用于光模式和暗模式。

使用

npm i @arco-design/color

import { generate, getRgbStr, getPresetColors } from "@arco-design/color";

  // 色彩工具
  // 对于给定的颜色，使用算法生成包含10种颜色的渐变样本。这适用于光模式和暗模式。
  let list = generate("#3C7EFF", { list: true, dark: false });
  console.log("梯度列表", list);
  console.log("预设的颜色集", getPresetColors());
  console.log("hex转rgb", getRgbStr("#3C7EFF"));

可以在选取颜色的时候调用对应API，这里以设置自定义主题色为例：

// 主题色设置
const themeColorChange = (value: string) => {
  themeColor.value = value;
  // 对于给定的颜色，使用算法生成包含10种颜色的渐变样本。这适用于光模式和暗模式。
  let list = generate(themeColor.value, { list: true, dark: darkMode.value });
  list.forEach((color: string, index: number) => {
    // https://arco.design/palette/list
    // arco的颜色等级为1-10，这里需要index+1
    document.body.style.setProperty(`--primary-${index + 1}`, getRgbStr(color));
  });
};

---

下面是官网文档：

import { generate, getPresetColors } from '@arco-design/color';

console.log(generate('#123456'));

console.log(getPresetColors());
// {
//   red: {...},
//   orangered: {...},
//   orange: {...},
//   gold: {...},
//   yellow: {...},
//   lime: {...},
//   green: {...},
//   cyan: {...},
//   blue: {...},
//   arcoblue: {...},
//   purple: {...},
//   pinkpurple: {...},
//   magenta: {...},
//   gray: {...}
// }

API

generate(color: string, options: Object);
参数详情：
1、要生成的渐变颜色的索引(从1开始)
options.index {number | 1-10}

2、是否生成包含十种颜色的颜色数组
options.list {boolean}

3、是否为深色模式生成颜色
options.dark

4、颜色格式
options.format {'hex' | 'rgb' | 'hsl'}

5、包含14个预设的颜色集。
getPresetColors {Function}
● red
● orangered
● orange
● gold
● yellow
● lime
● green
● cyan
● blue
● arcoblue
● purple
● pinkpurple
● magenta
● gray

const { red } = getPresetColors();

console.log(red.light);
console.log(red.dark);
console.log(red.primary);

getRgbStr(color: string)

对于给定的颜色，获取字符串中的r, g, b值

getRgbStr('#F53F3F') // 245,63,63