chroma-js进行颜色操作

安装

shell

pnpm add chroma-js
pnpm add @types/chroma-js -D

chroma-js 官网

重要说明

这个包还是比较大的，实际生产过程中，建议直接生成几套主题变量，在这几套主题变量中进行切换，从而达到主题切换的效果，而不是像现在这样完全的动态切换

颜色混入

在一种颜色中混入另一种颜色，并设置混入色的占比

import chroma from 'chroma-js'
// 基础颜色
const baseColor = 'blue'
// 混入的颜色
const mixColor = 'white'
// 混入颜色占比
const mixColorPercent = 0.25
// 色彩模式(rgb:适用于显示器，如果不是用于显示器，请调整色彩模式)
const colorMode = 'rgb'
// 进行颜色混合
const mixColor = chroma.mix(baseColor, mixColor, mixColorPercent, colorMode)
// 获取颜色的16进制值
console.log(mixColor.hex())