0.0.7 • Published 2 years ago
color-processor v0.0.7
Table of COntents
Statement
- 版本
v0.0.1为基础版本,软件包的类型声明引用存在问题; - 版本
v0.0.5及之前版本,处于开发探索、修复阶段,切勿直接使用; - 版本
v0.0.6,处于稳定阶段,但README.md文档未更新; - 版本
v0.0.7及之后版本,处于稳定阶段,README.md文档已更新;可放心使用;
Features
Installing
Package manager
Using npm:
$ npm install color-processorUsing bower:
$ bower install color-processorUsing yarn:
$ yarn add color-processorUsing pnpm:
$ pnpm add color-processorOn demand import, you can handle it this way:
import { TO_HEX } from 'color-processor';
console.log(TO_HEX({ r: 12, g: 34, b: 56 }));Global import, you can handle it this way:
import * as ColorProcessor from 'color-processor';
console.log(ColorProcessor.TO_HEX({ r: 12, g: 34, b: 56 }));HTML Link Using:
/** 本地测试: 需开启本地服务进行测试; 否则出现跨域报错提示; */
<script
type="module"
src="/node_modules/color-processor/dist/color-processor.umd.js"
></script>
<script type="module">
/** 全局变量 ColorProcessor */
console.log(ColorProcessor);
</script>API
RGB_TO_HSL(rgb: RGB): HSL
颜色转换: RGB颜色对象转换为HSL颜色对象;
Parameters
| Name | Type | Description |
|---|---|---|
| rgb | RGB | RGB颜色对象 |
Return
HSL
Example
import { RGB_TO_HSL } from 'color-processor';
console.log(RGB_TO_HSL({ r: 12, g: 34, b: 56 }));HSL_TO_RGB(hsl: HSL): RGB
颜色转换: HSL颜色对象转换为RGB颜色对象;
Parameters
| Name | Type | Description |
|---|---|---|
| hsl | HSL | HSL颜色对象 |
Return
RGB
Example
import { HSL_TO_RGB } from 'color-processor';
console.log(HSL_TO_RGB({ h: 0.5, s: 0.3, l: 0.25 }));RGB_TO_HEX(rgb: RGB): HEX
颜色转换:RGB颜色对象转换为HEX颜色对象;
Parameters
| Name | Type | Description |
|---|---|---|
| rgb | RGB | RGB颜色对象 |
Return
HEX
Example
import { RGB_TO_HEX } from 'color-processor';
console.log(RGB_TO_HEX({ r: 12, g: 34, b: 56 }));HEX_TO_RGB(hex: HEX): RGB
颜色转换:HEX颜色对象转换为RGB颜色对象;
Parameters
| Name | Type | Description |
|---|---|---|
| hex | HEX | HEX颜色对象 |
Return
RGB
Example
import { HEX_TO_RGB } from 'color-processor';
console.log(HEX_TO_RGB('#2e467f'));HEX_TO_HSL(hex: HEX): HSL
颜色转换:HEX颜色对象转换为HSL颜色对象;
Parameters
| Name | Type | Description |
|---|---|---|
| hex | HEX | HEX颜色对象 |
Return
HSL
Example
import { HEX_TO_HSL } from 'color-processor';
console.log(HEX_TO_HSL('#2e467f'));HSL_TO_HEX(hsl: HSL): HEX
颜色转换:HSL颜色对象转换为HEX颜色对象;
Parameters
| Name | Type | Description |
|---|---|---|
| hsl | HSL | HSL颜色对象 |
Return
HEX
Example
import { HSL_TO_HEX } from 'color-processor';
console.log(HSL_TO_HEX({ h: 0.5, s: 0.3, l: 0.25 }));TO_HEX(color: HEX | HSL | RGB): HEX
颜色转换: 任意格式颜色对象转换为HEX颜色对象;
Parameters
| Name | Type | Description |
|---|---|---|
| color | HEX | HSL | RGB | 任意格式颜色对象 |
Return
HEX
Example
import { TO_HEX } from 'color-processor';
console.log(TO_HEX('#2e467f'));
console.log(TO_HEX({ r: 12, g: 34, b: 56 }));
console.log(TO_HEX({ h: 0.5, s: 0.3, l: 0.25 }));TO_HSL(color: HEX | HSL | RGB): HSL
颜色转换: 任意格式颜色对象转换为HSL颜色对象;
Parameters
| Name | Type | Description |
|---|---|---|
| color | HEX | HSL | RGB | 任意格式颜色对象 |
Return
HSL
Example
import { TO_HSL } from 'color-processor';
console.log(TO_HSL('#2e467f'));
console.log(TO_HSL({ r: 12, g: 34, b: 56 }));
console.log(TO_HSL({ h: 0.5, s: 0.3, l: 0.25 }));TO_RGB(color: HEX | HSL | RGB): RGB
颜色转换: 任意格式颜色对象转换为RGB颜色对象;
Parameters
| Name | Type | Description |
|---|---|---|
| color | HEX | HSL | RGB | 任意格式颜色对象 |
Return
RGB
Example
import { TO_RGB } from 'color-processor';
console.log(TO_RGB('#2e467f'));
console.log(TO_RGB({ r: 12, g: 34, b: 56 }));
console.log(TO_RGB({ h: 0.5, s: 0.3, l: 0.25 }));BLEND_COLOR(base: HEX | HSL | RGB, blend: HEX | HSL | RGB, level: number ): RGB
颜色混合: 获取基础色、混合色所构成一定亮度的色值
Parameters
| Name | Type | Description |
|---|---|---|
| base | HEX | HSL | RGB | 基础色 |
| blend | HEX | HSL | RGB | 混合色 |
| level | number | 亮度,取值范围 0-1,0 为基础色,1 为混合色 |
Return
RGB
Example
import { BLEND_COLOR } from 'color-processor';
console.log(BLEND_COLOR('#2e467f', '#ff0000', 0.5));
console.log(BLEND_COLOR({ r: 12, g: 34, b: 56 }, { r: 12, g: 34, b: 56 }, 0.5));BLEND_LEVEL_COLOR(base: HEX | HSL | RGB): BlendLevelColor
颜色混合: 获取基础色与不同亮度下的色值
Parameters
| Name | Type | Description |
|---|---|---|
| base | HEX | HSL | RGB | 基础色 |
Return
BlendLevelColor
Example
import { BLEND_LEVEL_COLOR } from 'color-processor';
console.log(BLEND_LEVEL_COLOR('#2e467f'));