This project began as a part of research to identify ongoing issues with visual disabilities, and web accessibility, for a design system application that's been in development since 2013. In perspective, this code 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.
@rgbyk/color is developed and maintained by Daniel Haim.
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.
You can use this library to:
- Create a fully documented color system ready to be integrated into any application (web/app)
- Generate a suite of utility classes, and choose between CSS custom properties (variables) or HEX values as your output
- Switch between RGB/RYB color modes
- Establish color relationships (i.e., "harmonious mix") in color schemes
- Neutralize colors and establish a "neutral-tone" to go alongside chromatic colors
- Establish similar color temperature conditions in the grayscale palette
- Toggle on/off color palettes (i.e., Complementary, Analogous, Square, Split, Triaddic, Tetradic)
- Toggle on/off web accessibility features for color blindness (i.e., Protanopia, Protanomaly, Deuteranopia, Deuteranomaly, Tritanopia, Tritanomaly, Achromatopsia, Achromatomaly)
- Toggle on/off high-pitch colors to reverse the order to apply the correct contrast
- Create an "alert palette" to apply in user interface components to reflect status (i.e., error, warning, success)
- Toggle on/off utility classes (i.e.,
.bg-*
,.border-*
,color-*
)
The library is based on a mixture of color systems, with the main one being the Munsell's Color System.
If you are familiar with Munsell's theory, you will most likely notice that in this version there are 12 hues instead of only 10, and that the naming convention for color has been modernized.
Overall, the code runs through multiple level analyses along a cylinder, which determines the hue, lightness, and saturation levels of a given color.
Determining the spacing between colors along these dimensions happens by taking measurements of human visual responses. In each of these dimensions, the colors are as close to uniform as we could make them perceptually, but there are plenty of variables that can be adjusted for perfection.
Value | he measurement up a vertical pole. |
Chroma | The measurement on horizontal, away from a vertical pole. |
Hue | The measurement around a circle. |
Scroll down to learn more.
Hue = the measurement around a circle.
The 12 major colors of the color wheel, at 30° intervals on the HSV color wheel. This constitutes the complete set of primary, secondary, and tertiary color names.
- Red (0° or 360°)
- Orange (30°)
- Yellow (60°)
- Chartreuse Green (90°)
- Green (120°)
- Spring Green (150°)
- Cyan (180°)
- Azure (210°)
- Blue (240°)
- Violet (270°)
- Magenta (300°)
- Rose (330°)
Value = the measurement up a vertical pole.
Value, or "lightness", varies vertically along the color solid, from black ($value-0
) at the bottom, to white ($value-10
) at the top.
Neutral grays lie along the vertical axis between black and white.
Chroma = the measurement on horizontal, away from a vertical pole.
Chromas, measured radially from the center of each slice, represents the "purity" of a color (relating to Saturation). with lower chroma being less pure (more washed out, as in pastels).