Skip to content
a node.js color model system
CSS Shell JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
src/scss
.browserlistrc
.gitattributes
.gitignore
LICENSE
README.md
package-lock.json
package.json
postcss.config.js

README.md

@rgbyk/color

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

Simulator demo


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-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 (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

Color Models

Color Schemes

Accessibility

Approach

Misc.

Tools

Books


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.

You can’t perform that action at this time.