RGB|CMY Color Wheel
|
[ The 30 Step RGB|CMY Digital Color Wheel ]
Color Design on and for computer screens and related digital devices starts with the understanding of the additive color system and its color circle. |
RGB|CMY Color Wheel (White Background)
|
[DRAFT - WRITING IN PROGRESS]
Posted: December 9, 2014
Revised: December 12, 2014 ||
Posted: December 9, 2014
Revised: December 12, 2014 ||
The RGB|CMY Digital Color Wheel: A Banquet of Color!
How is color produced in the computer?
|
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. 
[ 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. |
"The Mini Microscope for iPhone allows the camera of an iPhone 4 to get close-up images of tiny objects" (Photo: Firebox)
|
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
[ TEST PATTERN IMAGE]
Caption
Caption
How to Make Millions of Colors
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!
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
TO BE CONTINUED...
I will take this opportunity to introduce some technical terms. The RGB|CMY Digital Color System is an additive color system. That is the physics of mixing light to create all the beautiful colors that you see in your digital gadgets' screens.
I will take this opportunity to introduce some technical terms. The RGB|CMY Digital Color System is an additive color system. That is the physics of mixing light to create all the beautiful colors that you see in your digital gadgets' screens.
Posted: December 08, 2014
Color Circle: RGB|CMY Digital Color Wheel Summary
The RGB|CMY Digital Color Wheel is made up of three primary colors. The colors are represented by the beginning letter of their names:
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 perceptual predominance of either a primary or secondary color. The capital letter indicates the predominant color:
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 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
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
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.