The RGBYK Color System is a comprehensive color model system designed to generate a full range of accessible color palettes and utility classes from a single color. It offers a variety of advanced functions to analyze and determine color temperature, contrast, and more for design system automation.
The RGBYK Color System was developed as part of a research project on web accessibility for visual disabilities, but it can be used by anyone looking to create a comprehensive color system for their web or app development project. With RGBYK, you can:
- Create fully documented color systems for easy integration into web or app development.
- Generate a suite of utility classes with customizable CSS custom properties (variables) or HEX values.
- Switch between RGB/RYB color modes.
- Establish color relationships for harmonious color schemes.
- Neutralize colors to create a "neutral-tone" palette to complement chromatic colors.
- Establish similar color temperature conditions in grayscale palettes.
- Creating a consistent color palette across a website or app.
- Automatically generating utility classes for text color, background color, and border color.
- Generating accessible color palettes for users with color vision deficiencies.
- Creating a cohesive color scheme for a brand or product.
- Create fully documented color systems for easy integration into web or app development.
- Generate a suite of utility classes with customizable CSS custom properties (variables) or HEX values.
- Switch between RGB/RYB color modes.
- Establish color relationships for harmonious color schemes.
- Neutralize colors to create a "neutral-tone" palette to complement chromatic colors.
- Establish similar color temperature conditions in grayscale palettes.
- Complementary, Analogous, Square, Split, Triaddic, and Tetradic color palettes.
- Web accessibility features for color blindness, including Protanopia, Protanomaly, Deuteranopia, Deuteranomaly, Tritanopia, Tritanomaly, Achromatopsia, and Achromatomaly.
- High-pitch color toggles for optimal contrast.
- Alert palette to indicate status (e.g., error, warning, success).
- Utility classes (e.g., .bg-, .border-, color-*).
Please note that @rgbyk/color is currently being upgraded to use Dart-Sass. More advanced functions and updated documentation will be made available as the branch is merged.
You can install @rgbyk/color anywhere using NPM:
$ npm i @rgbyk/color --save-devAlternatively, you can install it as a standalone package using the following command:
# Run checks and complete installation
$ npm run rgbyk-unpack@rgbyk/color comes with several CLI commands that you can use to compile SCSS files. These include:
This command compiles ./src/scss/color.scss:
$ npm run colorThis command compiles ./src/scss/color-rgb.scss:
$ npm run color-rgbThis command compiles ./src/scss/color-ryb.scss:
$ npm run color-rgb@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";cs.calc.calc-luminance($color)// calculate the luminance for a color.cs.calc.calc-contrast($back, $front)// calculate the contrast ratio between two colors.cs.calc.calc-brightness($color)// calculate brightness of a given color.
is-color-grayscale($color)// determine if color is grayscaleis-color-cool($color)// determine if color is "cool" or "warm"is-color-high-key-value($color)// determine if color is high key valueis-color-dark($color)// determine if a color is dark (based on lightness and hue)
make-color-harmony($mix, $base)// establish similar light conditions between two colorsmake-color-harmony-grayscale($color)// establish color relationship in your grayscale palette.make-color-neutral($color)// convert a color to its neutral formmake-color-mono($color, $weight)// establish monochromatic scaling using the $chroma/$value systemmake-color-pastel($color)// convert a color to its pastel formget-color-contrast($color)// determine whether to use dark or light text on top of given colorcolor-mix($color1, $color2, $percent, $model)// mix two colors by percent in a color color model.find-hue-ryb($degree);// return the degree of rgb color in rybadjust-hue-ryb($color, $degrees);// return a color with adjusted hueset-hue-ryb($color, $degree)// set a new hue in the ryb modelcomplement-ryb($color)// return the complement of a color in rybinvert-ryb($color)// return the inverse of a color in rybcolor-tint($color, $percent)// mix a color with white to reduces darknesscolor-shade($color, $percent)// mix a color with black to increases darknesscolor-tone($color, $percent)// add percentage of grey to a colorcolor-equalize($color)// equalize a given color
$color-model: rgb; // [rgb | ryb]
These variables are used to customize the behavior of the color generation. The @forward rule allows you to use the core code from the package while forwarding the passed variables.
- The
color-modelvariable determines whether the color model used will beRGBorRYB. - The
color-mode-harmonyvariable determines whether the colors generated will have a color harmony. - The
color-mode-harmony-grayscalevariable determines whether a color harmony is applied to the grayscale colors. - The
color-mode-harmony-grayscale-cool-mixvariable determines the percentage of mixing if the primary color is cool. - The
color-mode-harmony-grayscale-warm-mixvariable determines the percentage of mixing if the primary color is warm.
// Enable or disable color harmony
$color-mode-harmony: false; // [true | false], create harmony in color scheme
// Enable or disable color harmony in grayscale
$color-mode-harmony-grayscale: false; // [true | false], create harmony in grayscale scheme
// Set the percentage mix for cool and warm colors in grayscale mode
$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 warmTo ensure better accessibility for users with color vision deficiencies, the $color-mode-cvd variable can be used to simulate different types of color vision deficiencies. By default, this feature is disabled ($color-mode-cvd: false), but it can be enabled by setting this variable to one of the following values:
"protanopia": A type of red-green color blindness that affects the ability to distinguish between red and green hues."protanomaly": A milder form of protanopia that still affects the ability to distinguish between red and green hues, but to a lesser extent."deuteranopia": Another type of red-green color blindness that affects the ability to distinguish between red and green hues, but with a different mechanism than protanopia."deuteranomaly": A milder form of deuteranopia that still affects the ability to distinguish between red and green hues, but to a lesser extent."tritanopia": A type of blue-yellow color blindness that affects the ability to distinguish between blue and yellow hues."tritanomaly": A milder form of tritanopia that still affects the ability to distinguish between blue and yellow hues, but to a lesser extent."achromatopsia": A complete absence of color vision, also known as monochromacy."chromatomaly": A general term for any type of color vision deficiency that affects the ability to distinguish between hues.
// Enable or disable color vision deficiency (CVD) simulation
$color-mode-cvd: false;
// Set the type of CVD simulation to apply
$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-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 schemeThese schemes can be useful to reflect the status of user interface components, such as error, warning, success, and info. The available options include $color-scheme-danger, $color-scheme-warning, $color-scheme-success, and $color-scheme-info. Each option can be set to true or false to enable or disable the corresponding scheme.
$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-scheme-neutral: false; // [true | false] => neutral palette
$color-scheme-pastel: false; // [true | false] => pastel palette
$color-scheme-alpha: false; // [true | false] => alpha palette$enable-utility-classes- Enables or disables all the utility classes. Default value is true.$enable-utility-bg- Enables or disables background-related utility classes (.bg-). Default value is true.$enable-utility-color- Enables or disables text color-related utility classes (`.color-). Default value is true.$enable-utility-border- Enables or disables border-related utility classes (`.border-). Default value is true.$enable-utility-fill- Enables or disables fill-related utility classes (.fill-). Default value is false.$enable-utility-stroke- Enables or disables stroke-related utility classes (.stroke-). Default value is false.
$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$enable-root-colors: true;
// set `true` for => `var(--black)`
// set `false` for => `#000000`- Color schemes
- Monochromatic
- Complementary
- Split-complementary
- Split-complementary (accented)
- Triadic color scheme
- Analogous
- Analogous (accented)
- Dual
- Tetradic
- 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
If you don't find the answer to your problem in the documentation, or have a suggestion for improvements, submit your question here.
see the LICENSE file for details.