RGB|CMY Digital Color Wheel
RGB|CMY Digital Color Wheel
The 30 Step RGB|CMY Digital Color Wheel
The RGB|CMY Digital Color Wheel
Posted: December 08, 2014 / Updated March 22, 2019
21st Century Color Wheel
Color Design on and for computer screens and related digital media calls for a solid understanding of the RGB color system and its color circle. The RGB|CMY Digital Color wheel is based on the RGB Color Model (a.k.a. RGB Color Cube) which is used to produce colors on digital devices, ranging from smart watches and digital projections to interactive environmental systems.
The RGB|CMY Digital Color Wheel was designed by Petronio Bendito, a new media artist, designer, and educator. The color wheel has evolved since its original design in the early 2000s from Bendito's color theory teachings, and an updated version was presented at the 10th Congress of the International Colour Association in Granada Spain (2005). The current version was produced in 2014 and published online. A Google image search for "digital color wheel" or "RGB color wheel" for example, reveals that it appears organically on the top of search results, suggesting its longevity and online popularity.
For artists and designers, color wheels are perceptual systems that provide insights about color relationships. The RGB/CMY digital color wheel is not only a design tool, but also an interface to promote the understanding on how colors are produced on the computer and their connection to human vision, technology, art, and design.
Departure from Traditional Models
The RGB/CMY Digital Color Wheel is a departure from traditional color wheels, such as the ones with 10 color steps by Albert Munsell and the 12 color steps by Johannes Itten. The RGB/CMY Digital Color Wheel is critical to our understanding of color in the 21st Century as it addresses color and its relationship with RGB color cube's mathematical configuration. An isometric view of the RGB color cube in the center of the color wheel indicates relationships and origins of the adopted 30 colors steps.
Structurally the digital color wheel is made up of three primary colors, secondary colors, and other transitions. Below is a summary of the color wheel perceptual organization:
The digital color primaries are:
Red (R), Green (G) and Blue (B)
There are three secondary colors on the wheel that are produced when primary colors are mixed:
Blue and Red mixed create Magenta (M)
Red and Green create Yellow (Y)
Green and Blue create Cyan (C)
Tertiary colors are made from a combination of primary and secondary colors. For example, Red (R) and Yellow (Y) produces the set of four tertiary Red-Yellows.
The transition steps in between the primary and secondary colors are what make up the tertiary color sets. Between a primary and secondary, each tertiary color set is divided into four transitionary sub-categories.
The notation for the tertiary color is the combination of the two beginning letters of the colors they are made of.
For example, the Red-Yellow sub-set is labeled Ry, RY, YR, Yr. The upper and lowercase letter are used to represent the level of a perceptual predominance of either a primary or secondary color. The capital letter indicates the predominant color:
Color Design on and for computer screens and related digital media calls for a solid understanding of the RGB color system and its color circle. The RGB|CMY Digital Color wheel is based on the RGB Color Model (a.k.a. RGB Color Cube) which is used to produce colors on digital devices, ranging from smart watches and digital projections to interactive environmental systems.
The RGB|CMY Digital Color Wheel was designed by Petronio Bendito, a new media artist, designer, and educator. The color wheel has evolved since its original design in the early 2000s from Bendito's color theory teachings, and an updated version was presented at the 10th Congress of the International Colour Association in Granada Spain (2005). The current version was produced in 2014 and published online. A Google image search for "digital color wheel" or "RGB color wheel" for example, reveals that it appears organically on the top of search results, suggesting its longevity and online popularity.
For artists and designers, color wheels are perceptual systems that provide insights about color relationships. The RGB/CMY digital color wheel is not only a design tool, but also an interface to promote the understanding on how colors are produced on the computer and their connection to human vision, technology, art, and design.
Departure from Traditional Models
The RGB/CMY Digital Color Wheel is a departure from traditional color wheels, such as the ones with 10 color steps by Albert Munsell and the 12 color steps by Johannes Itten. The RGB/CMY Digital Color Wheel is critical to our understanding of color in the 21st Century as it addresses color and its relationship with RGB color cube's mathematical configuration. An isometric view of the RGB color cube in the center of the color wheel indicates relationships and origins of the adopted 30 colors steps.
Structurally the digital color wheel is made up of three primary colors, secondary colors, and other transitions. Below is a summary of the color wheel perceptual organization:
The digital color primaries are:
Red (R), Green (G) and Blue (B)
There are three secondary colors on the wheel that are produced when primary colors are mixed:
Blue and Red mixed create Magenta (M)
Red and Green create Yellow (Y)
Green and Blue create Cyan (C)
Tertiary colors are made from a combination of primary and secondary colors. For example, Red (R) and Yellow (Y) produces the set of four tertiary Red-Yellows.
The transition steps in between the primary and secondary colors are what make up the tertiary color sets. Between a primary and secondary, each tertiary color set is divided into four transitionary sub-categories.
The notation for the tertiary color is the combination of the two beginning letters of the colors they are made of.
For example, the Red-Yellow sub-set is labeled Ry, RY, YR, Yr. The upper and lowercase letter are used to represent the level of a perceptual predominance of either a primary or secondary color. The capital letter indicates the predominant color:
Ry = Mostly red, a little yellow
RY = Almost even, more red
YR = Almost even, more yellow
Yr = Mostly yellow, a little red
The complete sets between Primaries (R,G,B) and Secondaries (C,M,Y) are labeled as follows:
(R)
Red-Yellow: Ry, RY, YR, Yr
(Y)
Green-Yellow: Yg, YG, GY, Gy
(G)
Green-Cyan: Gc, GC, CG, Cg
(C)
Blue-Cyan: Cb, CB, BC, Bc
(B)
Blue-Magenta: Bm, BM, MB, Mb
(M)
Red-Magenta: Mr, MR, RM, Rm
Red Experiment
...
Green Experiment
...
Blue Experiment
...
Red + Green = Yellow Experiment
...
Green + Blue = Cyan Experiment
...
Blue + Red = Magenta Experiment
...
White and Black Experiment
Now we will take a closer look at white. You will notice that the white area of the screen is filled with filaments of intense reds, greens and blues. When you look at the black section of the screen, you will notice that the red, green and blue lights are gone.
Gray Scale Experiment
Now let's watch how the the colors will dim as you move from White to Black in the gray scale of the RGB Test Pattern.
...
Transition Colors Experiments
...
Additive Colors
...
How is color produced in the computer?
We will use the RGB|CMY Digital Color Wheel above to explain how this works. If you have the microscope you can download the free test pattern below and try it yourself.
The RGB Test Pattern includes the main color families of the RGB|CMY Color Spectrum, black, white and grays. It was designed so you can look one color at a time for comparison and contrast
The RGB Test Pattern includes the main color families of the RGB|CMY Color Spectrum, black, white and grays. It was designed so you can look one color at a time for comparison and contrast
Viewing Computer Screen Colors with a Microscope
These images were taken with a Mini Bras microscope attached to an iPhone while looking at images on an iPad.
These images were taken with a Mini Bras microscope attached to an iPhone while looking at images on an iPad.
Developing color palettes on the computer screen is much more efficient and fun when you understand the RGB color space and its RGB|CMY Digital Color Wheel. Once you learn about the color wheel, you can learn other aspects of digital colors, design techniques, and color combination.
The experiment
The best way to learn how colors are produced in the computer is by looking at the screen with a microscope. Seeing is believing!
Here's the good news: there are several brands selling inexpensive portable ones online. If you get a microscope you can follow my tutorials. Otherwise, keep reading.
The photos below were created by looking at images on a pixel level on the iPad's screen with a Mini Bras microscope attached to an iPhone. Depending on where you direct your gaze, you will find on the screen tiny filaments of red, green, and blue lights.
The experiment
The best way to learn how colors are produced in the computer is by looking at the screen with a microscope. Seeing is believing!
Here's the good news: there are several brands selling inexpensive portable ones online. If you get a microscope you can follow my tutorials. Otherwise, keep reading.
The photos below were created by looking at images on a pixel level on the iPad's screen with a Mini Bras microscope attached to an iPhone. Depending on where you direct your gaze, you will find on the screen tiny filaments of red, green, and blue lights.
An average computer screen can produce millions of colors, but what you will find through the microscopic experiment are only three colors: Red, Green and Blue. (Not even white! The one you are seeing right now. Nor oranges, turquoises, pinks, fuchsia, etc.)
So what is going on? The screen projects red, green and blue lights with various intensity to produce the colors you see. Colors are wavelengths captured by the rods and cones in your eyes and interpreted by the brain. Your brain is a color mixing machine!
So what is going on? The screen projects red, green and blue lights with various intensity to produce the colors you see. Colors are wavelengths captured by the rods and cones in your eyes and interpreted by the brain. Your brain is a color mixing machine!
[ TEST PATTERN IMAGE]
Caption
Caption
How to Make Millions of Colors
COLOR DESIGN METHODS
How to Put this Knowledge to Use
...
Case 1
...
Case 2
...
To follow the development of this page, join our mailing list.
References
Birren, Faber. The Color Primer: A Basic Treatise on the Color System of Wilhelm Ostwald, New York: Van Nostrand Reinhold Co., 1969.
Munsell, Albert. A Color Notation: A Measured Color System, Based on the Three Qualities Hue, Value and Chroma, Boston: George H. Ellis Co., 1907
A more detailed explanation of this notation can be found in the following paper: Bendito, Petronio. RGB Colour Palette Based on Hue Relationships [proceedings]. 10th Congress of the International Colour Association, Granada, Spain, 2005.
Munsell, Albert. A Color Notation: A Measured Color System, Based on the Three Qualities Hue, Value and Chroma, Boston: George H. Ellis Co., 1907
A more detailed explanation of this notation can be found in the following paper: Bendito, Petronio. RGB Colour Palette Based on Hue Relationships [proceedings]. 10th Congress of the International Colour Association, Granada, Spain, 2005.