# @kviewui/color-builder

> kviewui自用的颜色生成工具

Latest version **1.0.5** (published 2023-01-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @kviewui/color-builder
pnpm add @kviewui/color-builder
yarn add @kviewui/color-builder
bun add @kviewui/color-builder
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2023-01-18 |
| First published | 2022-12-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 115.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | kviewui@163.com |
| Maintainers | kviewui |
| Keywords | kviewui-color, color-builder, color, kviewui |

## Links

- npm: https://www.npmjs.com/package/@kviewui/color-builder
- Repository: https://gitcode.net/kviewui/color-builder
- npm.io page: https://npm.io/package/@kviewui/color-builder

## Dependencies (3)

- [fs](https://npm.io/package/fs.md) ^0.0.1-security
- [color](https://npm.io/package/color.md) ^4.2.1
- [@types/node](https://npm.io/package/@types/node.md) ^18.11.14

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 1.0.5 (latest) — 2023-01-18
- 1.0.4 — 2023-01-16
- 1.0.3 — 2022-12-31
- 1.0.2 — 2022-12-16
- 1.0.1 — 2022-12-13
- 1.0.0 — 2022-12-13

## README

# kviewui组件库自用的颜色生成工具
该工具基于[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'
```

---

## 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`参数即可
```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']
```

#### 获取指定颜色的暗黑模式颜色值示例代码，明亮模式同理，调整`dark`参数即可
```js
// 生成指定颜色的暗黑模式颜色值
const darkColor = colorBuilder.generate('#00BC79', {
    dark: true, // 暗黑模式
    list: false, // 不生成色阶集合
    format: 'hex'
})
console.log(darkColor)
```

>#### 上面示例输出结果
```shell
#28C98B
```
---

## GetPresetColors
### GetPresetColors Props
该方法无需传参

### 示例代码

#### 获取预设的主题色集合
```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"
]
...
```

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

### 示例代码

#### 获取指定颜色色值的rgb格式
```js
const rgbStr = colorBuilder.getRgbStr('#00BC79')
console.log(rgbStr)
```

>#### 上面示例输出结果
```shell
0,188,121
```

---
_Source: https://npm.io/package/@kviewui/color-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._