Colorimetry NPM

Colorimetry

A color model system that generates a full range of accessible color palettes, and utility classes from a single color.

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.

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
Switch between color modes: RGB/RYB
Establish color relationships ("harmonious mix") in palettes
Neutralize colors to establish a neutral-tone to go alongside chromatic colors
Establish similar color temperature conditions in the grayscale palette

Features:

Toggle on/off color palettes (i.e., secondary, analogous, split, triadic, tetradic, grayscale)
Toggle on/off web accessibility features for color blindness (i.e., deuteranopia, tritanopia)
Toggle on/off high-pitch colors to reverse the order to apply the correct contrast
Create an "alert palette" to apply in user interface components to reflect status (i.e., error, warning, success)
Toggle on/off utility classes (i.e., .bg-$foo, .border-$foo)

The library contains a variety of advanced functions that can help analyze and determine color temperature, contrast, and more design system automation for your next project.

Getting started

Requirements

Node v12.14.1 LTS

Install

$ cd ./colorimetry
$ npm run go

Watch & Compile

$ npm run dev

Install via npm

You can also import the library directly into your node project

$ npm i colorimetry

Import in sass project

// ! settings will overwrite the default settings in the repository
// $enable-utility-bg: false !default;
@import "./node_modules/colorimetry/src/scss/style.color.scss";

Starting the application

Start the application by running npm run dev
Change the value of $primary in _core-settings.scss, and save the file.
Open dist/index.html in any browser to view your color system.
Download the dist folder and retrieve the files when you're satisfied.

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.

The color space specifies colors based on three color dimensions: hue, value (color lightness), and chroma (color purity).

The system consists of three indepdendent dimensions which can be represented cylindrically in three dimensions as an irregular color solid (see demo illustration).

Hue: measured by degrees around horizontal circles;
Chroma: ("purity") measured radially outward from the neutral (gray) vertical axis;
Value: ("lightness") measured vertically from 0 (black) to 10 (white).

Configurations

Most settings are located in _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 Settings

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

Color Blindness

Color blindness (color vision deficiency, or CVD) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. 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-primary: true !default; // ! set `false` to disable secondary palette
$enable-palette-secondary: true !default; // ! set `false` to disable secondary palette
$enable-palette-analogous: true !default; // ! set `false` to disable analogous palette
$enable-palette-split: true !default; // ! set `false` to disable split palette
$enable-palette-triadic: true !default; // ! set `false` to disable triadic palette
$enable-palette-tetradic: true !default; // ! set `false` to disable tetradic palette
$enable-palette-danger: true !default; // ! set `false` to disable danger palette
$enable-palette-warning: true !default; // ! set `false` to disable warning palette
$enable-palette-success: true !default; // ! set `false` to disable success palette
$enable-palette-info: true !default; // ! set `false` to disable info palette
$enable-palette-grayscale: true !default; // ! set `false` to disable grayscale palette

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