@oddbird/blend

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'),
  ...,
);