Blend

CSS color spaces for Dart Sass...

CSS Color Module Level 4 & Level 5 include several new CSS color formats, new color-adjustment syntax, and a contrast function. Blend provides early access to many of these features, while working with Sass colors.

Note that conversion between color-spaces requires gamut-adjustments and rounding. While we use the same conversion math recommended for browsers, pre-processing can result in slight variations in each step. Converting a color from one format to another and back again, may result in slight differences.

Our Top Priority right now is full support for color(display-p3 r g b / a) which can already be used for wide-gamut colors in Safari. The conversion math is already supported, we just need to finalize the user-facing API. Help is welcome.

Color Picker

To get started with new CSS color formats (and LCH in particular), check out the wonderful LCH Color Picker by Lea Verou.

We use the same conversion math, originally written in JS by Chris Lilley and Tab Atkins.

Usage

Download the files from GitHub, or install the npm package:

npm install @oddbird/blend [--save-dev]

Import with Dart Sass

@use '<path-to>/blend';

Lab & LCH Formats

(CIE) LCH & Lab color-conversion into (sRGB) sass colors:

$cie-to-sass: (
 blend.lch(30% 50 300),
 blend.lab(60% -60 60),
 blend.lch(60% 75 120, 50%), // as %
 blend.lab(60% -60 60, 0.5), // or as fraction
);

Color Contrast

Based on the proposed Level 5 color-contrast() function:

$contrast: (
 // default black or white for best contrast
 blend.contrast($color),
 // highest contrast
 blend.contrast($color, maroon, rebeccapurple, cyan),
 // first color with contrast >= 4.5
 blend.contrast($color, maroon, rebeccapurple, 4.5),
);

Inspecting Colors

Inspect LCH & Lab values of Sass colors:

$inspect: (
 blend.lightness($color),
 blend.a($color),
 blend.b($color),
 blend.chroma($color),
 blend.hue($color),
);

Relative Colors

Relative Sass color adjustments using LCH & Lab channels

$adjust: (
 // set chroma to 10
 blend.set($color, $chroma: 10),
 // adjust hue by -10
 blend.adjust($color, $hue: -10),
 // scale lightness 10% lighter
 blend.scale($color, $lightness: 10%),
);

A relative-color shorthand, based on rough interpretation of the Level 5 relative color syntax:

$from: (
 // set chroma to 20
 blend.from($color, l, 20, h),
 // linear adjustments to a channel
 blend.from($color, l, c, h -60),
 // relative scale, e.g. "half-way to white"
 blend.from($color, l 50%, c, h),
 // multiply the channel value
 blend.from($color, 2l, c, h),
);

Todo

The initial version is mostly focused on CIE colors, but Level 4 includes an array of new formats. We're working on it.

See the full list of planned enhancements.

@use 'blend';
$new-formats: (
 blend.hwb(120deg 15% 15%),
 blend.color(display-p3 0.728 0.2824 0.4581),
 blend.color(rec-2020 0.6431 0.2955 0.4324),
 ...,
);
$from-sass: (
 blend.get($color, 'lch'),
 blend.get($color, 'lab'),
 blend.get($color, 'display-p3'),
 ...,
);
$output: (
 blend.string($color, 'lch'),
 blend.string($color, 'lab'),
 blend.string($color, 'display-p3'),
 ...,
);

Sponsor OddBird's OSS Work

At OddBird, we love contributing to the languages & tools developers rely on. We're currently working on polyfills for new Popover & Anchor Positioning functionality, as well as CSS specifications for functions, mixins, and responsive typography. Help us keep this work sustainable and centered on your needs as a developer! We display sponsor logos and avatars on our website.

Sponsor OddBird's OSS Work