@kviewui/color-builder v1.0.5

kviewui组件库自用的颜色生成工具

该工具基于arco design的色彩生成算法，封装了一套轻量版的适合组件库打造自己的主题风格的色彩生成工具。

方法概览

安装插件

推荐pnpm作为包管理工具

pnpm add @kviewui/color-builder
    or
npm i @kviewui/color-builder --save
    or
yarn add @kviewui/color-builder

引入插件

import { colorBuilder } from '@kviewui/color-builder'

Generate

Genarate Props

Options 参数结构

示例代码

下面以颜色值格式为hex为例，rgb和hsl格式同理

生成暗黑模式下的色阶集合示例代码，明亮模式同理，调整dark参数即可

// 生成暗黑模式下的色阶集合
const colorList = colorBuilder.generate('#00BC79', {
    dark: true, // 暗黑模式
    list: true, // 生成色阶集合,
    format: 'hex'
})
console.log(colorList)

上面示例输出结果

['#004D3C', '#04684F', '#0B8462', '#13A073', '#1EBC84', '#28C98B', '#52D7A0', '#80E4B7', '#B3F2D3', '#EBFFF4']

获取指定颜色的暗黑模式颜色值示例代码，明亮模式同理，调整dark参数即可

// 生成指定颜色的暗黑模式颜色值
const darkColor = colorBuilder.generate('#00BC79', {
    dark: true, // 暗黑模式
    list: false, // 不生成色阶集合
    format: 'hex'
})
console.log(darkColor)

上面示例输出结果

#28C98B

---

GetPresetColors

GetPresetColors Props

该方法无需传参

示例代码

获取预设的主题色集合

const colorList = colorBuilder.getPresetColors()
console.log(JSON.stringify(colorList))

上面示例输出结果

列表了一个索引的结果，后面省略号省略了，自己可以实际运行体验

arcoblue: [
    // 暗黑模式
    dark: ['#000D4D', '#041B79', '#0E32A6', '#1D4DD2', '#306FFF', '#3C7EFF', '#689FFF', '#93BEFF', '#BEDAFF', '#EAF4FF'],
    // 明亮模式
    light: ['#E8F3FF', '#BEDAFF', '#94BFFF', '#6AA1FF', '#4080FF', '#165DFF', '#0E42D2', '#072CA6', '#031A79', '#000D4D']
    // 主色
    primary: "#165DFF"
]
...

GetRgbStr

GetRgbStr Props

示例代码

获取指定颜色色值的rgb格式

const rgbStr = colorBuilder.getRgbStr('#00BC79')
console.log(rgbStr)

上面示例输出结果

0,188,121