Recently, we found this web page and thought: why not give it an upgrade and make a complete RYB color wheel? Therefore, we checked its About page and read the work of Dr. Nathan Gossett and Dr. Baoquan Chen from the University of Minnesota at Twin Cities. Finally, this tool was born! Hope it can help with your designs!
(PS: We slightly adjusted the blue color to make it brighter than the one set in the paper from the University of Minnesota.)
The RYB color model is a traditional color system that has its roots in art and design. This model is structured around three primary colors: Red, Yellow, and Blue. It includes the historical complementary relationships between these colors, such as red-green, yellow-violet/purple, and blue-orange.
Its secondary colors are created through the intermixing of the primary colors. For example:
The emergence of this set of primary colors was influenced by historical limitations. In earlier times, artists and designers had restricted access to a wide variety of pigments due to cost and availability. This constraint led to a focus on mastering the art of color mixing, using a limited range of available pigments to create a broader spectrum of hues.
To achieve a more extensive gamut of color nuances, artists would also add white and black pigments to the primary colors. This practice allows for creating tints (lighter versions) and shades (darker versions) of both primary and secondary colors, offering artists and designers even more versatility in their work.
One of the most common systems used in digital representation online is the RGB (Red, Green, Blue) model. Therefore, we converted RYB to RGB codes so that we can draw the color wheel on a web page. Here is what we do:
Imagine a 3D space shaped like a cube. Each of its axes represents a color from the RYB model: Red, Yellow, or Blue. The cube’s eight corners represent distinct combinations of these primary colors. For example, one corner might represent 100% Red, 0% Yellow, and 0% Blue (pure red), while another corner might signify 0% Red, 100% Yellow, and 100% Blue (a mix of blue and yellow).
Our conversion method utilizes a matrix of RGB values that correspond to each of these eight RYB combinations, essentially “mapping” the corners of the RYB cube to specific RGB colors.
After we get the RGB values for eight key points in our cube, how about the colors in between? Well, that is where trilinear interpolation comes into play. Interpolation is a technique used to estimate values between two known values. In our cube, it helps us determine the RGB value for any given RYB color that doesn’t exactly match one of the eight corners. When converting an RYB color to RGB, the method starts by normalizing the RYB values, transforming them from a 0-255 range to a 0-1 range for mathematical convenience. Then, it applies a series of cubic interpolations, first along the Blue axis, followed by the Yellow, and finally, the Red axis.
After obtaining interpolated values for each RGB component (Red, Green, and Blue), they are scaled back to the 0-255 range and rounded to give the final RGB representation of the original RYB color.
Following this process, we finally showed the traditional paint color model on modern digital devices.
Copyright © Sunica Design. All Rights Reserved. This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
Subscribe to our weekly newsletter and unlock:
