aotearoan / sass-farbig

SASS color palette generation using HCL color space

SASS Farbig

Introduction

SASS Farbig is an HCL (aka LCH) color space based SASS lib to help generate color palettes for use in design systems and applications based on any input color. The aim is to create light and dark theme palettes that provide WCAG compliant contrast ratios of at least 4.5:1 for readability.

SASS Farbig provides the basic SASS functions for palette generation from a single reference color.

All color calculations were ported directly from chroma.js

What's new in Version 3.0.0

The fixed palettes have been removed in favour of dynamically generated palettes based on the reference colors. This allows for generation of palettes with wider color ranges which more closely (if not exactly) match the reference color.

How it works

The generator determines the L1 color i.e, the closest color with the same hue as the reference color which is light enough to meet a contrast ratio of 4.5 with dark (#242424) text. Similarly the D1 color is determined by finding the closest color to the reference color which is dark enough to meet a contrast ratio of 4.5 with light (#eeeeee) text.

Once these colors are determined the HCL/LCH chroma and luminance curves are generated specifically for the reference color and used to create the remaining color steps.

How to use

Basic usage

View the test palettes here.

First import the project:

yarn add -D @aotearoan/sass-farbig

Then add the SASS import:

@use '~@aotearoan/sass-farbig'

And generate a palette for a given base color:

$color: #6c29d4
$palette: sass-farbig.generate-palette($color)

This will output the following palette map:

$palette: (
  l5: #f6e9ff,
  l4: #ebd4ff,
  l3: #ddbcfe,
  l2: #cba1fa,
  l1: #b683f3,
  d1: #7f50ba,
  d2: #644190,
  d3: #4d346b,
  d4: #39294c,
  d5: #292033,
);

There are also three Neutral (grayscale) palettes available (neutral, low-contrast and high-contrast). These can be generated by calling:

$neutral-palette: sass-farbig.neutral-palette();
$low-contrast-palette: sass-farbig.low-contrast-palette();
$high-contrast-palette: sass-farbig.high-contrast-palette();

Use the generate-color-classes mixin to generate classes for each step:

$prefix: 'app-primary'
$color: #6c29d4
$palette: sass-farbig.generate-palette($color)
@include sass-farbig.generate-color-classes($prefix, $palette)

This will generate classes for colors and background colors e.g.:

.app-primary-color-l5 {
  color: #f6e9ff
}

.app-primary-bg-color-l5 {
  background-color: #f6e9ff
}
// and so on...

Global variables

The default text colors are defined as:

$color-text-light: #242424 !default // light mode dark text color
$color-text-dark: #eeeeee !default // dark mode light text color

Luminance curves (steps) are defined for neutral, low & high contrast color palettes only. For generating color palettes luminance and chroma curves are derived from the reference color:

// hcl luminance curves used to generate neutral color palettes
$neutral-luminance-curve: (94, 88, 81, 73, 64, 44, 35, 27, 20, 14)!default;
$low-contrast-luminance-curve: (88, 81, 72, 60, 48, 68, 55, 44, 35, 28)!default;
$high-contrast-luminance-curve: (100, 95, 90, 85, 80, 20, 15, 10, 5, 0)!default;

NOTE: Low contrast fails readability at L1, D1 & D2 - it is recommended to invert the text color if using these (as seen on the demo page).

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

Run your unit tests

yarn run test:unit

Customize configuration

See Configuration Reference.

sass-farbig's Issues

Material Design 3 Colors and 13 Tones

Thoughts on adapting the code to support Material Design 3? The method is similar to how they pick their colors and 13 tones per color.