Colorimetry

A color model system for creating a full range of accessible color palettes and utility classes from a single primary color.

View Source Code

Introduction

This project began as a part of research to identify ongoing issues with color blindness and web accessibility, for a design system that I've been developing since 2013.

In perspective, Colorimetry is the color system component that is utilized by that application.

The library contains more more advanced features that can help determine color temperature, color contrast, and automate the design process for your next project.

Use this library to:

  • Create a fully documented color system ready to be integrated into any application.
  • Generate a suite of utility classes, and choose between CSS custom properties (variables) or HEX values as your output.
  • Choose between two color modes: RGB / RYB and regenerate a new color system.
  • Establish color relationships ("harmonious mix") in color palettes by applying similar lighting conditions.
  • Neutralize colors and create a neutral-tone set to go alongside chromatic colors.
  • Create an alert palette to apply in user interface components to reflect status (i.e., error, warning, success).
  • Toggle on/off color palettes (i.e., analogous, split, triadic, tetradic).
  • Toggle on/off color accessibility features and preview color blindness modes (i.e. protanopia, protanomaly).
  • Toggle on/off high-pitch colors (eg. Snapchat Yellow) and reverse the order to apply the correct contrast.


Getting started

Requirements

  • Node v12.14.1 LTS

Install

cd into folder and run the install command.

$ npm install

Watch & Compile

$ npm run dev

Step by step

  1. Edit the $primary variable in ./src/scss/_core-settings.scss, and save the file.
  2. Visit ./demo/index.html in any browser to view the updated color system.
  3. Download the contest of the ./dist when you're satisfied.

Configuration

  • Most settings are located in ./src/scss/_core-settings.scss.
  • Advanced settings can be found in the ./src/scss/lib folder.

Primary

The system generates palettes from the value of the $primary color.

$primary: #2776fb !default;

Color Models

Switch between two color modes: RGB or RYB.

$color-model: rgb !default; // models: [rgb | ryb]

Color Accessibility

$color-mode-contrast: false !default; // set `true` if $primary is high-pitch
                        $color-harmonize: false !default; // ! set `true` to harmonize palettes
                        $color-neutralize: false !default; // ! set `true` to neutralize palettes

Color Blindness

Toggling any of these filters to view what your color system looks like.

$color-mode-blindness: null !default; // [protanopia | protanomaly | deuteranopia | deuteranomaly | tritanopia | tritanomaly | achromatopsia | achromatomaly]

Palettes

Set true or false to enable or disable a specific color palette.

$enable-palette-secondary: true !default;
                        $enable-palette-analogous: true !default;
                        $enable-palette-split: true !default;
                        $enable-palette-triadic: true !default;
                        $enable-palette-tetradic: true !default;
                        $enable-palette-danger: true !default;
                        $enable-palette-warning: true !default;
                        $enable-palette-success: true !default;
                        $enable-palette-info: true !default;

Utility classes

Set true or false to enable or disable a specific utility class.

$enable-utility-classes: true !default; // ! set `false` to disable all utilities
                        $enable-utility-bg: true !default; // ! set `true` to create `.bg-` classes
                        $enable-utility-color: true !default; // ! set `true` to create `.color-` classes
                        $enable-utility-border: true !default; // ! set `true` to create `.border-` classes
                        $enable-utility-fill: true !default; // ! set `true` to create `.fill-` classes
                        $enable-utility-stroke: true !default; // ! set `true` to create `.stroke-` classes

Output

  • set true to use --var($color-name)
  • set false to use #{$color-hex}
$enable-root-colors: true !default;


How it works

This library uses a mixture of color theories, with the main one being Munsell's.

Colorimetry runs through multiple level analyses along a cylinder, which determines the hue, lightness, and saturation levels of a given color.

Determining the spacing between colors along these dimensions happens by taking measurements of human visual responses. In each of these dimensions, the colors are as close to uniform as we could make them perceptually, but there are plenty of variables that can be adjusted for perfection.

Scroll down to learn more.

The example above shows: a circle of hues at value 5 chroma 6; the neutral values from 0 to 10; and the chromas of purple-blue (5PB) at value 5. The colors are automatically generated by the given $primary variable.


Values

Values, or lightness, varies vertically along with the color solid, from black ($value-0) at the bottom, to white ($value-10) at the top. Neutral grays lie along the vertical axis between black and white.

$value = the measurement up a vertical pole

$value-10: #FFFFFF !default; // Snow
                        $value-9: #E0E0E0 !default; // Mercury
                        $value-8: #CCCCCC !default; // Silver
                        $value-7: #B8B8B8 !default; // Magnesium
                        $value-6: #A3A3A3 !default; // Aluminum
                        $value-5: #8F8F8F !default; // Nickel
                        $value-4: #7A7A7A !default; // Tin
                        $value-3: #666666 !default; // Steel
                        $value-2: #3D3D3D !default; // Iron
                        $value-1: #141414 !default; // Tungsten
                        $value-0: #000000 !default; // Lead
path: ./src/scss/lib/system/_color-values.scss


Chromas

Chromas, measured radially from the center of each slice, represents the "purity" of a color (relating to Saturation). with lower chroma being less pure (more washed out, as in pastels).

$chroma = the measurement on horizontal, away from a vertical pole

$num: 7.692307692307692%;

                        $chroma-0: 0;
                        $chroma-1: $num;
                        $chroma-2: $num * 2;
                        $chroma-3: $num * 3;
                        $chroma-4: $num * 4;
                        $chroma-5: $num * 5;
                        $chroma-6: $num * 6;
                        $chroma-7: $num * 7;
                        $chroma-8: $num * 8;
                        $chroma-9: $num * 9;
                        $chroma-10: $num * 10;
                        $chroma-11: $num * 11;
                        $chroma-12: $num * 12;
path: ./src/scss/lib/system/_color-chromas.scss


Hues

$hue = the measurement around a circle

$hue-red: 0;
                        $hue-red-orange: 30;
                        $hue-orange: 60;
                        $hue-orange-yellow: 90;
                        $hue-yellow: 120;
                        $hue-yellow-green: 150;
                        $hue-green: 180;
                        $hue-green-blue: 210;
                        $hue-blue: 240;
                        $hue-blue-violet: 270;
                        $hue-violet: 300;
                        $hue-violet-red: 330;
./src/scss/lib/system/_color-hues.scss


Mixing Hues with Values, with Chromas

Chroma, measured radially from the center of each slice, represents the “purity” of a color (related to saturation), with lower chroma being less pure (more washed out, as in pastels). Note that there is no intrinsic upper limit to chroma. Different areas of the color space have different maximal chroma coordinates. For instance, light yellow colors have considerably more potential chroma than bright purples, due to the nature of the eye and the physics of color stimuli.

mix($primary, nth($value-9), $chroma-6)
mix($primary, nth($value-4), $chroma-6)

Color spectrum

This color spectrum exists for every hue.

C1 C2 C3 C4 C5 C6 C7 C8 C9 C10 C11 C12
V10
V9
V8
V7
V6
V5
V4
V3
V2
V1
V0

Palettes

Palette / Primary


Palette / Grayscale


Palette / Complementary


Palette / Triadic


Palette / Rectangle (Tetradic)


Palette / Analogous


Palette / Split-Complementary


Palette / Success


Palette / Danger


Palette / Warning


Palette / Info


MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.