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

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

方法概览

| 方法名 | 说明 | --- | --- | generate | 用来生成指定颜色的指定配置格式的颜色色阶集合或者颜色色值，具体可看下面示例代码 | getPresetColors | 获取插件预设的主题色集合，主题取色参考了arco design | getRgbStr | 获取给定颜色值的rgb格式的颜色值，具体可看下面示例代码

安装插件

推荐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

| 参数名 | 说明 | 类型 | 默认值 | 必填 | --- | --- | --- | --- | --- | color | 颜色值，可选值格式hex/rgb/hsl | String | - | 是 | options | 配置格式，见下方参数结构说明，options不填的话会默认输出color参数的hex格式颜色值 | Object | - | 否

Options 参数结构

| 参数名 | 说明 | 类型 | 默认值 | 必填 | --- | --- | --- | --- | --- | dark | 是否为暗黑模式 | Boolean | false | 否 | list | 是否生成为色阶集合，色阶阶梯分为1-10个阶梯 | Boolean | false | 否 | index | 色阶值，可选值为1-10之间的数字 | Number | 6 | 否 | format | 颜色值格式，可选值为hex/rgb/hsl | String | 'hex' | 否

示例代码

下面以颜色值格式为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

| 参数名 | 说明 | 类型 | 默认值 | 必填 | --- | --- | --- | --- | --- | color | 指定的颜色色值，可选格式为hex/rgb/hsl | String | - | 是

示例代码

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

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

上面示例输出结果

0,188,121