@kviewui/color-builder
Version:
kviewui自用的颜色生成工具
131 lines (104 loc) • 3.8 kB
Markdown
该工具基于[arco design](https://arco.design)的色彩生成算法，封装了一套轻量版的适合组件库打造自己的主题风格的色彩生成工具。
---
| 方法名 | 说明
| --- | ---
| generate | 用来生成指定颜色的指定配置格式的颜色色阶集合或者颜色色值，具体可看下面示例代码
| getPresetColors | 获取插件预设的主题色集合，主题取色参考了[arco design](https://arco.design)
| getRgbStr | 获取给定颜色值的rgb格式的颜色值，具体可看下面示例代码
>推荐pnpm作为包管理工具
```shell
pnpm add @kviewui/color-builder
or
npm i @kviewui/color-builder --save
or
yarn add @kviewui/color-builder
```
```js
import { colorBuilder } from '@kviewui/color-builder'
```
---
| 参数名 | 说明 | 类型 | 默认值 | 必填
| --- | --- | --- | --- | ---
| color | 颜色值，可选值格式hex/rgb/hsl | String | - | 是
| options | 配置格式，见下方参数结构说明，options不填的话会默认输出`color`参数的`hex`格式颜色值 | Object | - | 否
| 参数名 | 说明 | 类型 | 默认值 | 必填
| --- | --- | --- | --- | ---
| dark | 是否为暗黑模式 | Boolean | `false` | 否
| list | 是否生成为色阶集合，色阶阶梯分为1-10个阶梯 | Boolean | `false` | 否
| index | 色阶值，可选值为1-10之间的数字 | Number | `6` | 否
| format | 颜色值格式，可选值为hex/rgb/hsl | String | 'hex' | 否
>下面以颜色值格式为`hex`为例，`rgb`和`hsl`格式同理
```js
// 生成暗黑模式下的色阶集合
const colorList = colorBuilder.generate('#00BC79', {
dark: true, // 暗黑模式
list: true, // 生成色阶集合,
format: 'hex'
})
console.log(colorList)
```
>
```shell
['#004D3C', '#04684F', '#0B8462', '#13A073', '#1EBC84', '#28C98B', '#52D7A0', '#80E4B7', '#B3F2D3', '#EBFFF4']
```
```js
// 生成指定颜色的暗黑模式颜色值
const darkColor = colorBuilder.generate('#00BC79', {
dark: true, // 暗黑模式
list: false, // 不生成色阶集合
format: 'hex'
})
console.log(darkColor)
```
>
```shell
```
---
该方法无需传参
```js
const colorList = colorBuilder.getPresetColors()
console.log(JSON.stringify(colorList))
```
>
```shell
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"
]
...
```
| 参数名 | 说明 | 类型 | 默认值 | 必填
| --- | --- | --- | --- | ---
| color | 指定的颜色色值，可选格式为`hex`/`rgb`/`hsl` | String | - | 是
```js
const rgbStr = colorBuilder.getRgbStr('#00BC79')
console.log(rgbStr)
```
>
```shell
0,188,121
```