@kviewui/color-builder

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