JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 14
  • Score
    100M100P100Q38467F
  • License MIT

About a color processor.

Package Exports

  • color-processor
  • color-processor/dist/color-processor.cjs.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (color-processor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Website • Documentation

npm version vite version typescript version

Table of COntents

Features

Installing

Package manager

Using npm:

$ npm install xiaoyimi-color

Using bower:

$ bower install xiaoyimi-color

Using yarn:

$ yarn add xiaoyimi-color

Using pnpm:

$ pnpm add xiaoyimi-color

On demand import, you can handle it this way:

import { TO_HEX } from 'xiaoyimi-color';
console.log(TO_HEX({ r: 12, g: 34, b: 56 }));

Global import, you can handle it this way:

import * as ColorProcessor from 'xiaoyimi-color';
console.log(ColorProcessor.TO_HEX({ r: 12, g: 34, b: 56 }));

HTML Link Using:

<script type="module" src="/dist/xiaoyimi-color.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 'xiaoyimi-color';

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 'xiaoyimi-color';

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 'xiaoyimi-color';

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 'xiaoyimi-color';

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 'xiaoyimi-color';

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 'xiaoyimi-color';

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 'xiaoyimi-color';

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 'xiaoyimi-color';

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 'xiaoyimi-color';

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 'xiaoyimi-color';

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 'xiaoyimi-color';

console.log(BLEND_LEVEL_COLOR('#2e467f'));

License

MIT