Color Schemes

Primary

Complementary

Analogous

Square

Split

Triadic

Tetradic

Hues

Alerts

Grayscale

Black/white

About

This project began as a part of research to identify ongoing issues with visual disabilities, and web accessibility, for a design system application that's been in development since 2013. In perspective, this code is the color system component that is utilized by that application.

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.


Maintenance & Support

@rgbyk/color is developed and maintained by Daniel Haim.


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.


Cases

You can use this library to:

  • Create a fully documented color system ready to be integrated into any application (web/app)
  • Generate a suite of utility classes, and choose between CSS custom properties (variables) or HEX values as your output
  • Switch between RGB/RYB color modes
  • Establish color relationships (i.e., "harmonious mix") in color schemes
  • Neutralize colors and 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., Complementary, Analogous, Square, Split, Triaddic, Tetradic)
  • Toggle on/off web accessibility features for color blindness (i.e., Protanopia, Protanomaly, Deuteranopia, Deuteranomaly, Tritanopia, Tritanomaly, Achromatopsia, Achromatomaly)
  • 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-*, .border-*, color-*)

Color Theory

Introduction

The library is based on a mixture of color systems, with the main one being the Munsell's Color System.

If you are familiar with Munsell's theory, you will most likely notice that in this version there are 12 hues instead of only 10, and that the naming convention for color has been modernized.

Overall, the code 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.

Value he measurement up a vertical pole.
Chroma The measurement on horizontal, away from a vertical pole.
Hue The measurement around a circle.

Scroll down to learn more.

In the example above: a circle of hues at $value-5 $chroma-12; the neutral values from 0 to 10; and the chromas of $hue-9 at $value-5. The colors are automatically generated by the given $primary variable.


01. Hues

Hue = the measurement around a circle.

The 12 major colors of the color wheel, at 30° intervals on the HSV color wheel. This constitutes the complete set of primary, secondary, and tertiary color names.

  • Red (0° or 360°)
  • Orange (30°)
  • Yellow (60°)
  • Chartreuse Green (90°)
  • Green (120°)
  • Spring Green (150°)
  • Cyan (180°)
  • Azure (210°)
  • Blue (240°)
  • Violet (270°)
  • Magenta (300°)
  • Rose (330°)

The example above: the view of the circle of hues from the top, where the center is the top of the cylinder, at $value-10.


02. Values

Value = the measurement up a vertical pole.

Value, or "lightness", varies vertically along 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.

The example above shows: a visual of the cylinder.


03. Chromas

Chroma = the measurement on horizontal, away from a vertical pole.

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).

The example above shows: a visual of the chroma slice, specifically $hue-9 from $chroma-12 to $chroma-0 at $value-5.

Command Line Tools

Requirements

sass

 $ sass --version $ 1.26.0 compiled with dart2js 2.7.1 

Install anywhere (npm)

Install anywhere (standalone)

cli.rgbyk-unpack

 $ npm run rgbyk-unpack 

cli.color

 $ npm run color 

cli.color-ryb

 $ npm run color-ryb 

cli.color-rgb

 $ npm run color-rgb 

API

Examples (npm)

@forward and @use

intermediate
@forward "@rgbyk/color/src/scss/core" with (
    $brand-color: #432dd9,
    $color-model: ryb,
    $color-mode-harmony: true
);

@use "../../node_modules/@rgbyk/color/src/scss/functions";
@use "../../node_modules/@rgbyk/color/src/scss/schemes";
@use "../../node_modules/@rgbyk/color/src/scss/utilities";

Settings

Color Harmony

Advanced
$color-mode-harmony: false; // [true | false], create harmony in color scheme
$color-mode-harmony-grayscale: false; // [true | false], create harmony in grayscale scheme
$color-mode-harmony-grayscale-cool-mix: 3%; // [integer], the % amount to mix if primary is cool
$color-mode-harmony-grayscale-warm-mix: 2%; // [integer], the % amount to mix if primary is warm

Color Accessibility (CVD)

Advanced
$color-mode-cvd: false;
$color-mode-cvd: "protanopia";
$color-mode-cvd: "protanomaly";
$color-mode-cvd: "deuteranopia";
$color-mode-cvd: "deuteranomaly";
$color-mode-cvd: "tritanopia";
$color-mode-cvd: "tritanomaly";
$color-mode-cvd: "achromatopsia";
$color-mode-cvd: "chromatomaly";

Color Utilities

Advanced
$enable-utility-classes: true; // [true | false] => _all_ utilities
$enable-utility-bg: true; // [true | false] => `.bg-` classes
$enable-utility-color: true; // [true | false] => `.color-` classes
$enable-utility-border: true; // [true | false] => `.border-` classes
$enable-utility-fill: false; // [true | false] => `.fill-` classes
$enable-utility-stroke: false; // [true | false] => `.stroke-` classes

Color Schemes

Advanced
$color-scheme-primary: true; // [true | false] => primary scheme
$color-scheme-achromatic: true; // [true | false] => achromatic scheme
$color-scheme-chromatic: false; // [true | false] => chromatic scheme
$color-scheme-analogous: false; // [true | false] => analogous scheme
$color-scheme-complementary: false; // [true | false] => complementary scheme
$color-scheme-hues: false; // [true | false] => hue scheme
$color-scheme-split: false; // [true | false] => split scheme
$color-scheme-square: false; // [true | false] => split scheme
$color-scheme-tetradic: false; // [true | false] => tetradic scheme
$color-scheme-triadic: false; // [true | false] => triadic scheme

Color Schemes (Alerts)

Advanced
$color-scheme-danger: false; // [true | false] => danger scheme
$color-scheme-warning: false; // [true | false] => warning scheme
$color-scheme-success: false; // [true | false] => success scheme
$color-scheme-info: false; // [true | false] => info scheme

Color Schemes (Misc.)

Advanced
$color-scheme-neutral: false; // [true | false] => neutral palette
$color-scheme-pastel: false; // [true | false] => pastel palette
$color-scheme-alpha: false; // [true | false] => alpha palette

Code Output

Advanced
$enable-root-colors: true;
// set `true` for => `var(--black)`
// set `false` for => `#000000`

Calculus Functions

@use

@use "@rgbyk/color/src/scss/functions/color-func-calc" as *;

cs.calc.calc-luminance($color)

@debug calc-luminance(#FF0000); // 0.2126
@debug calc-luminance(#FF8000); // 0.3669834297
@debug calc-luminance(#FFFF00); // 0.9278
@debug calc-luminance(#80FF00); // 0.7610919423
@debug calc-luminance(#00FF00); // 0.7152
@debug calc-luminance(#00FF80); // 0.7307851281
@debug calc-luminance(#00FFFF); // 0.7874
@debug calc-luminance(#0080FF); // 0.2265834297
@debug calc-luminance(#0000FF); // 0.0722
@debug calc-luminance(#7F00FF); // 0.117320259
@debug calc-luminance(#FF00FF); // 0.2848
@debug calc-luminance(#FF007F); // 0.2279230607

cs.calc.calc-contrast($back, $front)

@debug calc-contrast(#FF0000, #FFFFFF); // 3.9984767708
@debug calc-contrast(#FF8000, #FFFFFF); // 2.5180856726
@debug calc-contrast(#FFFF00, #FFFFFF); // 1.0738392309
@debug calc-contrast(#80FF00, #FFFFFF); // 1.2945511417
@debug calc-contrast(#00FF00, #FFFFFF); // 1.3721902771
@debug calc-contrast(#00FF80, #FFFFFF); // 1.3448002046
@debug calc-contrast(#00FFFF, #FFFFFF); // 1.2538810604
@debug calc-contrast(#0080FF, #FFFFFF); // 3.7963228716
@debug calc-contrast(#0000FF, #FFFFFF); // 8.5924713584
@debug calc-contrast(#7F00FF, #FFFFFF); // 6.2753907155
@debug calc-contrast(#FF00FF, #FFFFFF); // 3.1362007168
@debug calc-contrast(#FF007F, #FFFFFF); // 3.7780240237

cs.calc.calc-brightness($color)

@debug calc-brightness(#FF0000); // 29.9%
@debug calc-brightness(#FF8000); // 59.3%
@debug calc-brightness(#FFFF00); // 88.6%
@debug calc-brightness(#80FF00); // 73.7%
@debug calc-brightness(#00FF00); // 58.7%
@debug calc-brightness(#00FF80); // 64.4%
@debug calc-brightness(#00FFFF); // 70.1%
@debug calc-brightness(#0080FF); // 40.8%
@debug calc-brightness(#0000FF); // 11.4%
@debug calc-brightness(#7F00FF); // 26.2%
@debug calc-brightness(#FF00FF); // 41.3%
@debug calc-brightness(#FF007F); // 35.5%

Is Functions

@use

@use "@rgbyk/color/src/scss/functions/color-func-is" as *;

is-color-grayscale($color)

@debug is-color-grayscale(#DEDED9); // true
@debug is-color-grayscale(#E2E2D5); // false

is-color-cool($color)

@debug is-color-cool(#FF0000); // false
@debug is-color-cool(#FF7F00); // false
@debug is-color-cool(#FFFF00); // false
@debug is-color-cool(#7FFF00); // false
@debug is-color-cool(#00FF00); // false
@debug is-color-cool(#00FF7F); // true
@debug is-color-cool(#00FFFF); // true
@debug is-color-cool(#007FFF); // true
@debug is-color-cool(#0000FF); // true
@debug is-color-cool(#7F00FF); // true
@debug is-color-cool(#FF00FF); // false
@debug is-color-cool(#FF007F); // false

is-color-high-key-value($color)

@debug is-color-high-key-value(#FF0000); // false
@debug is-color-high-key-value(#FF7F00); // false
@debug is-color-high-key-value(#FFFF00); // true
@debug is-color-high-key-value(#7FFF00); // true
@debug is-color-high-key-value(#00FF00); // true
@debug is-color-high-key-value(#00FF7F); // false
@debug is-color-high-key-value(#00FFFF); // false
@debug is-color-high-key-value(#007FFF); // false
@debug is-color-high-key-value(#0000FF); // false
@debug is-color-high-key-value(#7F00FF); // false
@debug is-color-high-key-value(#FF00FF); // false
@debug is-color-high-key-value(#FF007F); // false

is-color-highest-key-value($color)

@debug is-color-highest-key-value(#FF0000); // false
@debug is-color-highest-key-value(#FF7F00); // false
@debug is-color-highest-key-value(#FFFF00); // true
@debug is-color-highest-key-value(#7FFF00); // false
@debug is-color-highest-key-value(#00FF00); // false
@debug is-color-highest-key-value(#00FF7F); // false
@debug is-color-highest-key-value(#00FFFF); // false
@debug is-color-highest-key-value(#007FFF); // false
@debug is-color-highest-key-value(#0000FF); // false
@debug is-color-highest-key-value(#7F00FF); // false
@debug is-color-highest-key-value(#FF00FF); // false
@debug is-color-highest-key-value(#FF007F); // false

is-color-dark($color)

@debug is-color-dark(#FF0000); // true
@debug is-color-dark(#FF7F00); // false
@debug is-color-dark(#FFFF00); // false
@debug is-color-dark(#7FFF00); // false
@debug is-color-dark(#00FF00); // false
@debug is-color-dark(#00FF7F); // false
@debug is-color-dark(#00FFFF); // false
@debug is-color-dark(#007FFF); // true
@debug is-color-dark(#0000FF); // true
@debug is-color-dark(#7F00FF); // true
@debug is-color-dark(#FF00FF); // true
@debug is-color-dark(#FF007F); // true

Make Functions

@use

@use "@rgbyk/color/src/scss/functions/color-func-make" as *;

make-color-harmony($mix, $base)

@debug make-color-harmony(#FF0000, #3b00c4); // #680097
@debug make-color-harmony(#FF8000, #3b00c4); // #681d97
@debug make-color-harmony(#FFFF00, #3b00c4); // #683b97
@debug make-color-harmony(#80FF00, #3b00c4); // #4b3b97
@debug make-color-harmony(#00FF00, #3b00c4); // #2d3b97
@debug make-color-harmony(#00FF80, #3b00c4); // #3229b9
@debug make-color-harmony(#00FFFF, #3b00c4); // #3229cd
@debug make-color-harmony(#0080FF, #3b00c4); // #3214cd
@debug make-color-harmony(#0000FF, #3b00c4); // #3200cd
@debug make-color-harmony(#7F00FF, #3b00c4); // #4600cd
@debug make-color-harmony(#FF00FF, #3b00c4); // #6800d2
@debug make-color-harmony(#FF007F, #3b00c4); // #6800b4

make-color-harmony-grayscale($color)

@debug make-color-harmony-grayscale(#FF0000, #EEEEEE); // #f0d3d3
@debug make-color-harmony-grayscale(#FF8000, #EEEEEE); // #f0e1d3
@debug make-color-harmony-grayscale(#FFFF00, #EEEEEE); // #f0f0d3
@debug make-color-harmony-grayscale(#80FF00, #EEEEEE); // #e1f0d3
@debug make-color-harmony-grayscale(#00FF00, #EEEEEE); // #d3f0d3
@debug make-color-harmony-grayscale(#00FF80, #EEEEEE); // #dbefe5
@debug make-color-harmony-grayscale(#00FFFF, #EEEEEE); // #dbefef
@debug make-color-harmony-grayscale(#0080FF, #EEEEEE); // #dbe5ef
@debug make-color-harmony-grayscale(#0000FF, #EEEEEE); // #dbdbef
@debug make-color-harmony-grayscale(#7F00FF, #EEEEEE); // #e5dbef
@debug make-color-harmony-grayscale(#FF00FF, #EEEEEE); // #f0d3f0
@debug make-color-harmony-grayscale(#FF007F, #EEEEEE); // #f0d3e1

make-color-neutral($color)

@debug make-color-neutral(#FF0000); // #c43b3b
@debug make-color-neutral(#FF8000); // #de8021
@debug make-color-neutral(#FFFF00); // #dede21
@debug make-color-neutral(#80FF00); // #80c43b
@debug make-color-neutral(#00FF00); // #3bc43b
@debug make-color-neutral(#00FF80); // #3bc480
@debug make-color-neutral(#00FFFF); // #3bc4c4
@debug make-color-neutral(#0080FF); // #3b80c4
@debug make-color-neutral(#0000FF); // #4f4fb0
@debug make-color-neutral(#7F00FF); // #7f42bd
@debug make-color-neutral(#FF00FF); // #bd42bd
@debug make-color-neutral(#FF007F); // #c43b7f

make-color-mono($color, $weight)

@debug make-color-mono(#8e43e7, 100); // #f6effd
@debug make-color-mono(#8e43e7, 200); // #e3d0f9
@debug make-color-mono(#8e43e7, 300); // #d0b1f5
@debug make-color-mono(#8e43e7, 400); // #8e43e7
@debug make-color-mono(#8e43e7, 500); // #7638c1
@debug make-color-mono(#8e43e7, 600); // #6b32ad
@debug make-color-mono(#8e43e7, 700); // #532787
@debug make-color-mono(#8e43e7, 800); // #3b1c60
@debug make-color-mono(#8e43e7, 900); // #180b27

make-color-pastel($color)

@debug make-color-pastel(#FF0000); // #ff8080
@debug make-color-pastel(#FF8000); // #ffc080
@debug make-color-pastel(#FFFF00); // #ffff80
@debug make-color-pastel(#80FF00); // #c0ff80
@debug make-color-pastel(#00FF00); // #80ff80
@debug make-color-pastel(#00FF80); // #80ffc0
@debug make-color-pastel(#00FFFF); // #80ffff
@debug make-color-pastel(#0080FF); // #80c0ff
@debug make-color-pastel(#0000FF); // #8080ff
@debug make-color-pastel(#7F00FF); // #bf80ff
@debug make-color-pastel(#FF00FF); // #ff80ff
@debug make-color-pastel(#FF007F); // #ff80bf

Get Functions

@use

@use "@rgbyk/color/src/scss/functions/color-func-get" as *;

get-color-contrast($color)

@debug get-color-contrast(#FF0000); // #000000
@debug get-color-contrast(#FF8000); // #000000
@debug get-color-contrast(#FFFF00); // #000000
@debug get-color-contrast(#80FF00); // #000000
@debug get-color-contrast(#00FF00); // #000000
@debug get-color-contrast(#00FF80); // #000000
@debug get-color-contrast(#00FFFF); // #000000
@debug get-color-contrast(#0080FF); // #000000
@debug get-color-contrast(#0000FF); // #FFFFFF
@debug get-color-contrast(#7F00FF); // #FFFFFF
@debug get-color-contrast(#FF00FF); // #000000
@debug get-color-contrast(#FF007F); // #000000

RYB Functions

@use

@use "@rgbyk/color/src/scss/functions/color-func-ryb" as *;

color-mix($color1, $color2, $percent, $model)

// RGB
@debug color-mix(#FF4000, #00FF80, 50%, rgb); // #9fff00
@debug color-mix(#800080, #158466, 60%, rgb); // #130882
@debug color-mix(#FFBF00, #0247FE, 60%, rgb); // #10ff01

// RYB
@debug color-mix(#FF4000, #00FF80, 50%, ryb); // #ffdb00
@debug color-mix(#800080, #158466, 60%, ryb); // #340882
@debug color-mix(#FFBF00, #0247FE, 60%, ryb); // #d8ff01

find-hue-ryb($degree);

@debug find-hue-ryb(30);  // 27.2941176471deg
@debug find-hue-ryb(60);  // 40deg
@debug find-hue-ryb(90);  // 49.6470588235deg
@debug find-hue-ryb(120); // 60deg
@debug find-hue-ryb(150); // 79.9159663866deg
@debug find-hue-ryb(180); // 120deg
@debug find-hue-ryb(210); // 180deg
@debug find-hue-ryb(240); // 221.9607843137deg
@debug find-hue-ryb(270); // 254.3225806452deg
@debug find-hue-ryb(300); // 278.7577639752deg
@debug find-hue-ryb(330); // 326.0487804878deg

adjust-hue-ryb($color, $degrees);

@debug adjust-hue-ryb(#8e43e7, 0);   // #bd43e7
@debug adjust-hue-ryb(#8e43e7, 30);  // #e743b6
@debug adjust-hue-ryb(#8e43e7, 60);  // #e74368
@debug adjust-hue-ryb(#8e43e7, 90);  // #e75943
@debug adjust-hue-ryb(#8e43e7, 120); // #e78243
@debug adjust-hue-ryb(#8e43e7, 150); // #e7ab43
@debug adjust-hue-ryb(#8e43e7, 180); // #e7d443
@debug adjust-hue-ryb(#8e43e7, 210); // #d4e743
@debug adjust-hue-ryb(#8e43e7, 240); // #a5e743
@debug adjust-hue-ryb(#8e43e7, 270); // #43e788
@debug adjust-hue-ryb(#8e43e7, 300); // #43b7e7
@debug adjust-hue-ryb(#8e43e7, 330); // #434ee7

set-hue-ryb($color, $degree)

@debug set-hue-ryb(#FF0000, 0);   // #ff1700
@debug set-hue-ryb(#FF0000, 30);  // #ff4000
@debug set-hue-ryb(#FF0000, 60);  // #ff8000
@debug set-hue-ryb(#FF0000, 90);  // #ffbf00
@debug set-hue-ryb(#FF0000, 120); // #FFFF00
@debug set-hue-ryb(#FF0000, 150); // #c5ff00
@debug set-hue-ryb(#FF0000, 180); // #69ff00
@debug set-hue-ryb(#FF0000, 210); // #00ffba
@debug set-hue-ryb(#FF0000, 240); // #0046ff
@debug set-hue-ryb(#FF0000, 270); // #6500ff
@debug set-hue-ryb(#FF0000, 300); // #ff00ff
@debug set-hue-ryb(#FF0000, 330); // #ff004f

complement-ryb($color)

@debug complement-ryb(#bd43e7); // #e2e743
@debug complement-ryb(#e743b6); // #c8e743
@debug complement-ryb(#e74368); // #a1e743
@debug complement-ryb(#e75943); // #48e743
@debug complement-ryb(#e78243); // #43e7a5
@debug complement-ryb(#e7ab43); // #4384e7
@debug complement-ryb(#e7d443); // #ac43e7
@debug complement-ryb(#d4e743); // #e743cc
@debug complement-ryb(#a5e743); // #e74373
@debug complement-ryb(#43e788); // #e75643
@debug complement-ryb(#43b7e7); // #e77943
@debug complement-ryb(#434ee7); // #e7a443

invert-ryb($color)

@debug invert-ryb(#bd43e7); // #b7bc18
@debug invert-ryb(#e743b6); // #9dbc18
@debug invert-ryb(#e74368); // #76bc18
@debug invert-ryb(#e75943); // #1dbc18
@debug invert-ryb(#e78243); // #18bc7a
@debug invert-ryb(#e7ab43); // #1859bc
@debug invert-ryb(#e7d443); // #8118bc
@debug invert-ryb(#d4e743); // #bc18a1
@debug invert-ryb(#a5e743); // #bc1848
@debug invert-ryb(#43e788); // #bc2b18
@debug invert-ryb(#43b7e7); // #bc4e18
@debug invert-ryb(#434ee7); // #bc7918

Misc. Functions

color-tint($color, $percent)

@debug color-tint(#8e43e7, 10%); // #9956e9
@debug color-tint(#8e43e7, 50%); // #c7a1f3
@debug color-tint(#8e43e7, 80%); // #e8d9fa

color-shade($color, $percent)

@debug color-shade(#8e43e7, 10%); // #803cd0
@debug color-shade(#8e43e7, 50%); // #472274
@debug color-shade(#8e43e7, 80%); // #1c0d2e

color-tone($color, $percent)

@debug color-shade(#8e43e7, 10%);
@debug color-shade(#8e43e7, 50%);
@debug color-shade(#8e43e7, 80%);

color-equalize($color)

@debug color-equalize(#8e43e7); // #7500ff
@debug color-equalize(#1db954); // #00ff5a
@debug color-equalize(#1da1f2); // #009eff
@debug color-equalize(#ed1c16); // #ff0700