@kviewui/color-builder
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

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为例,rgbhsl格式同理

生成暗黑模式下的色阶集合示例代码,明亮模式同理,调整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

Package Sidebar

Install

npm i @kviewui/color-builder

Weekly Downloads

5

Version

1.0.5

License

MIT

Unpacked Size

119 kB

Total Files

11

Last publish

Collaborators

  • kviewui