@electrovir/color
Version:
A wrapper for culori with an extremely simple API.
51 lines (36 loc) • 1.74 kB
Markdown
# @electrovir/color
A color package that wraps [the `culori` package](https://www.npmjs.com/package/culori) with an _extremely_ simple API for color string parsing and color space/model conversion. It is primarily built for https://electrovir.github.io/color-picker-app.
- Conversion examples: https://electrovir.github.io/color
- Reference docs: https://electrovir.github.io/color/docs
## Install
```sh
npm i @electrovir/color
```
## Usage
All functionality is accessed through the [`Color`](https://electrovir.github.io/color/docs/classes/Color.html) class:
<!-- example-link: src/readme-examples/color.example.ts -->
```TypeScript
import {Color} from '@electrovir/color';
/** Create a new color instance by parsing any valid CSS color string. */
const color = new Color('#123');
/** Update an individual color format's coordinate */
color.set({
hsl: {
h: 100,
},
});
/** Access the color values in multiple formats. */
console.info(color.hex); // #1c3311
console.info(color.rgb); // {r: 28, g: 51, b: 17}
console.info(color.lab); // {l: 18.6, a: -15, b: 18}
/** Express the color value as a valid CSS string. */
console.info(color.toCss().hsl); // hsl(100 50 13.3)
```
### Supported color formats / spaces
- [RGB](https://developer.mozilla.org/docs/Web/CSS/color_value/rgb)
- [HSL](https://developer.mozilla.org/docs/Web/CSS/color_value/hsl)
- [HWB](https://developer.mozilla.org/docs/Web/CSS/color_value/hwb)
- [LAB](https://developer.mozilla.org/docs/Web/CSS/color_value/lab)
- [LCH](https://developer.mozilla.org/docs/Web/CSS/color_value/lch)
- [Oklab](https://developer.mozilla.org/docs/Web/CSS/color_value/oklab)
- [Oklch](https://developer.mozilla.org/docs/Web/CSS/color_value/oklch)