Color Schemes

Primary

Complementary

Analogous

Square

Split

Triadic

Tetradic

Hues

Alerts

Grayscale

Black/white

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

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 I've been developing since 2013.

In perspective, @rgbyk/color 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 maintained by Daniel Haim.

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.

3
3
3
3