Human perceived color functions based on CIE LAB/CIE LCH color spaces
Default color manipulation functions do not take into account color perception.
lighten
darken
desaturate
saturate
rotate
orspin
mix
createPalette
andcreatePaletteStop
Parsing and manipulations utilized via Colord. All functions return Colord
instance.
Color palette shades are generated via mixing with black and white. You can choose mixing strategy or even provide your own function.
npm i @mcler/cie-color-functions
or
yarn add @mcler/cie-color-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>
const { CieColorFunctionsPlugin } = require('@mcler/cie-color-functions/plugins/less');
module.exports = CieColorFunctionsPlugin;
@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);
}
.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;
}
- PostCSS plugin