@mcler/cie-color-functions
TypeScript icon, indicating that this package has built-in type declarations

0.3.0 • Public • Published

🌈 CIE Color Functions

npm package

Human perceived color functions based on CIE LAB/CIE LCH color spaces


Why?

Default color manipulation functions do not take into account color perception.

Available functions:

  • lighten
  • darken
  • desaturate
  • saturate
  • rotate or spin
  • mix
  • createPalette and createPaletteStop

Parsing and manipulations utilized via Colord. All functions return Colord instance.

Color Palettes

Default

Default

Linear

Linear

Ease

Ease

Ease In

Ease In

Ease Out

Ease Out

Ease In Out

Ease In Out

Ease In Out Sine

Ease In Out Sine

Usage

Installation

npm i @mcler/cie-color-functions

or

yarn add @mcler/cie-color-functions

As standalone functions

import {
    lighten, darken,
    desaturate, saturate,
    rotate, mix,
    createPalette, createPaletteStop,
} from '@mcler/cie-color-functions';

const baseColor = '#2b99ea';
const darkenColor = darken(baseColor, 15); // #0073c0
const lightenColor = lighten(baseColor, 15); // #64c1ff
const desaturatedColor = desaturate(baseColor, 15); // #5e97d0
const moreSaturatedColor = saturate(baseColor, 15); // #009cff
const rotatedColor = rotate(baseColor, -90); // #00a77f
const mixedColor = mix(baseColor, '#f00', 0.5); // #c66f7a

const baseColor100 = createPaletteStop(baseColor, 100); // #cce0f9
const baseColorPalette = createPalette(baseColor); // Record<string, Colord>

As Less plugin

cie.js:

const { CieColorFunctionsPlugin } = require('@mcler/cie-color-functions/plugins/less');
module.exports = CieColorFunctionsPlugin;

style.less:

@plugin "cie"; // means that plugin from `cie.js` is used
@base-color: #2b99ea;

.text {
    color: @base-color;
}

.text-light {
    color: cie_lighten(@base-color, 15%);
}

.text-dark {
    color: cie_darken(@base-color, 15%);
}

.text-desaturate {
    color: cie_desaturate(@base-color, 15%);
}

.text-saturate {
    color: cie_saturate(@base-color, 15%);
}

.text-rotate {
    color: cie_spin(@base-color, 120deg);
}

.text-mix {
    color: cie_mix(@base-color, #f00, 33%);
}

.text-50 {
    color: cie_palette_stop(@base-color, 50);
}

.text-300 {
    color: cie_palette_stop(@base-color, 300);
}

Output:

.text {
    color: #2b99ea;
}

.text-light {
    color: #64c1ff;
}

.text-dark {
    color: #0073c0;
}

.text-desaturate {
    color: #5e97d0;
}

.text-saturate {
    color: #009cff;
}

.text-rotate {
    color: #e26a76;
}

.text-mix {
    color: #a97f9f;
}

.text-50 {
    color: #dfebfc;
}

.text-300 {
    color: #76b2f0;
}

TODO

  • [ ] PostCSS plugin

Package Sidebar

Install

npm i @mcler/cie-color-functions

Weekly Downloads

1

Version

0.3.0

License

MIT

Unpacked Size

6.25 kB

Total Files

3

Last publish

Collaborators

  • mcler