blend
More color spaces for Dart Sass…
Very much a work in progress. Based heavily on js functions by Chris Lilley and Tab Atkins.
npm install @mirisuzanne/blend --save-dev
Usage
So far, there is very little user-facing API, and basically no documentation, but we'll get that fixed. Here are the basics:
@use '<path/to>/blend';
main {
// returns a Sass `color`
color: blend.lch(65% 75 0);
// optional alpha value
background: blend.lch(10% 15 280, 85%);
}
There is only one setting:
// $gamut-correct --
// - `true` [default]: Chroma is reduced until in-gamut
// - `false`: Individual RGB channels will be clipped
// - `null`: Return `null` for out-of-gamut colors
@use '<path/to>/blend' with ($gamut-correct: false);
If you want more explicit control,
use <path/to>/blend/sass/lab/lch
,
and access functions directly:
-
lch.to-rgb()
does the conversion math on an array of channels -
lch.in-gamut()
returns either the converted channels ornull
for out-of-gamut colors -
lch.gamut-correct()
uses chroma-reduction to get a color in-gamut -
lch.color()
takes LCH input and returns a Sass color based on the chosen form of gamut-correction
Development & Testing
git clone git@github.com:mirisuzanne/blend.git
cd blend
yarn
The demo html & sass are in demo/
.
- Change the values of
$channels
and$range
to generate a new gradient - Play with
blend.lch($lch, $a)
for direct access to colors -
yarn sass
to compile (gradients take ~6s) -
yarn test
to run the tests
ToDo:
- [ ] Option to return CSS string rather than Sass color
- [ ] Other color spaces
- [ ] Documentation