Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/oddbird/blend

More color options for sass…
https://github.com/oddbird/blend

Last synced: 8 days ago
JSON representation

More color options for sass…

Awesome Lists containing this project

README 

        
# Blend



_CSS color spaces for [Dart Sass][]…_



[Dart Sass]: https://sass-lang.com/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.



[Level 4]: https://www.w3.org/TR/css-color-4/

[Level 5]: https://www.w3.org/TR/css-color-5/



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](https://css.land/lch/)

by [Lea Verou](https://lea.verou.me/).



We use the same conversion math,

originally written in JS by

[Chris Lilley](https://svgees.us/)

and [Tab Atkins](https://www.xanthir.com/).



## Usage



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



```

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

```



Import with Dart Sass



```scss

@use '/blend';

```



### Lab & LCH Formats



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



```scss

$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:



```scss

$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:



```scss

$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



```scss

$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:



```scss

$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][todo].



[todo]: https://github.com/oddbird/blend/issues?q=is%3Aissue+is%3Aopen+label%3Aenhancement



```scss

@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](https://www.oddbird.net/blend/#open-source-sponsors).



[Sponsor OddBird's OSS Work](https://opencollective.com/oddbird-open-source)