@rgbyk/color

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

View simulator

Command Line

Requirements

• Node.js v12.11.0
• SASS v1.26.0 (compiled with dart2js 2.7.1)

Install anywhere (npm)

$ npm i @rgbyk/color --save-dev

Install anywhere (standalone)

Install anywhere (standalone)

# run checks and full installation
$ npm run rgbyk-unpack

cli.color

# compile `./src/scss/color.scss`
$ npm run color

cli.color-rgb

# compile `./src/scss/color-rgb.scss`
$ npm run color-rgb

cli.color-ryb

# compile `./src/scss/color-ryb.scss`
$ npm run color-rgb

API

Example (npm)

@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";

Color Model

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

Color Harmony

$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

$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

$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

$color-scheme-primary: true; // [true | false] => primary scheme
$color-scheme-achromatic: true; // [true | false] => achromatic 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 (Alert)

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

$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

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

Resources

Color Spaces

• Munsell color system
• Pantone matching system (pms)
• Natural color system (ncs)

Color Models

• RYB color model
• RGB color model
• RGBA color model

Color Schemes

• Color schemes
• Monochromatic
• Complementary
• Split-complementary
• Split-complementary (accented)
• Triadic color scheme
• Analogous
• Analogous (accented)
• Dual
• Tetradic

Accessibility

• Designing for (and with) color blindness
• Accessible color contrast

Approach

• Practical color theory for people who code
• Math based color theory

Misc.

• Understanding different color modes
• Establishing color harmony
• Color space
• Rgb color space
• Cielab color space
• Color spaces with rgb primaries
• Web safe colors
• Complementary colors

Tools

• Adobe color
• Color picker

Books

• Color, archives by mark andrea
• Field's chromatography, 1835
• Field's chromatography, 1854

Support

If you don't find the answer to your problem in the documentation, or have a suggestion for improvements, submit your question here.

License

see the LICENSE file for details.