@rgbyk/color
Version:
a node.js color model system.
196 lines (158 loc) • 6.9 kB
Markdown
@rgbyk/color
A color model system that generates a full range of accessible color palettes, and utility classes from a single color.
[View simulator](https://rgbyk.com/color/)
----
# Command Line
## Requirements
- [Node.js](https://nodejs.org/) v12.11.0
- [SASS](https://sass-lang.com/dart-sass) v1.26.0 (compiled with dart2js 2.7.1)
## Install anywhere (npm)
```shell
npm i @rgbyk/color --save-dev
```
## Install anywhere (standalone)
Install anywhere (standalone)
```shell
run checks and full installation
npm run rgbyk-unpack
```
## cli.color
```shell
compile `./src/scss/color.scss`
npm run color
```
## cli.color-rgb
```shell
compile `./src/scss/color-rgb.scss`
npm run color-rgb
```
## cli.color-ryb
```shell
compile `./src/scss/color-ryb.scss`
npm run color-rgb
```
----
# API
## Example (npm)
```scss
@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
```scss
color-model: rgb; // [rgb | ryb]
```
## Color Harmony
```scss
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
```scss
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
```scss
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
```scss
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)
```scss
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).
```scss
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
```scss
enable-root-colors: true;
// set `true` for => `var(--black)`
// set `false` for => `#000000`
```
----
# Resources
## Color Spaces
- [Munsell color system](https://en.wikipedia.org/wiki/Munsell_color_system)
- [Pantone matching system (pms)](https://en.wikipedia.org/wiki/Pantone)
- [Natural color system (ncs)](https://en.wikipedia.org/wiki/Natural_Color_System)
## Color Models
- [RYB color model](https://en.wikipedia.org/wiki/RYB_color_model)
- [RGB color model](https://en.wikipedia.org/wiki/RGB_color_model)
- [RGBA color model](https://en.wikipedia.org/wiki/RGBA_color_model)
## Color Schemes
- [Color schemes](https://en.wikipedia.org/wiki/Color_scheme)
- [Monochromatic](http://www.paletton.com/wiki/index.php?title=Monochromatic_color_scheme)
- [Complementary](http://www.paletton.com/wiki/index.php?title=Complementary_color_scheme)
- [Split-complementary](http://www.paletton.com/wiki/index.php?title=Split-complementary_color_scheme)
- [Split-complementary (accented)](http://www.paletton.com/wiki/index.php?title=Split-complementary_color_scheme_(accented))
- [Triadic color scheme](http://www.paletton.com/wiki/index.php?title=Triadic_color_scheme)
- [Analogous](http://www.paletton.com/wiki/index.php?title=Analogous_color_scheme)
- [Analogous (accented)](http://www.paletton.com/wiki/index.php?title=Analogous_color_scheme_(accented))
- [Dual](http://www.paletton.com/wiki/index.php?title=Dual_color_scheme)
- [Tetradic](http://www.paletton.com/wiki/index.php?title=Tetradic_color_scheme)
## Accessibility
- [Designing for (and with) color blindness](https://medium.com/@aaron10buuren/designing-for-and-with-color-blindness-48392aab3d87)
- [Accessible color contrast](http://www.w3.org/TR/AERT#color-contrast)
## Approach
- [Practical color theory for people who code](https://tallys.github.io/color-theory/)
- [Math based color theory](https://www.ethangardner.com/articles/2009/03/15/a-math-based-approach-to-color-theory-using-hue-saturation-and-brightness-hsb/)
## Misc.
- [Understanding different color modes](https://helpx.adobe.com/photoshop/using/color-modes.html)
- [Establishing color harmony](https://en.wikipedia.org/wiki/Harmony_(color)#Relationship)
- [Color space](https://en.wikipedia.org/wiki/Color_space)
- [Rgb color space](https://en.wikipedia.org/wiki/RGB_color_space)
- [Cielab color space](https://en.wikipedia.org/wiki/CIELAB_color_space)
- [Color spaces with rgb primaries](https://en.wikipedia.org/wiki/Color_spaces_with_RGB_primaries)
- [Web safe colors](https://www.rapidtables.com/web/color/Web_Safe.html)
- [Complementary colors](https://en.wikipedia.org/wiki/Complementary_colors)
## Tools
- [Adobe color](https://color.adobe.com/)
- [Color picker](https://htmlcolorcodes.com/color-picker/)
## Books
- [Color, archives by mark andrea](https://archive.org/details/@mark_andrea?and[]=subject%3A%22Color%22)
- [Field's chromatography, 1835](https://archive.org/details/gri_c00033125008687523/page/n96/mode/thumb)
- [Field's chromatography, 1854](https://archive.org/details/Fieldquotschrom00Fiel/page/i/mode/2up)
----
# Support
If you don't find the answer to your problem in the documentation, or have a suggestion for improvements, submit your question [here](https://github.com/rgbyk/color/issues).
----
# License
see the [LICENSE](LICENSE) file for details.