Color Wheels and Triads

I made these diagrams to explore the relationships between computer video colors and perceived colors, to show how color mixing works, and as a tool for choosing colors in web page design.

Color Triads

Additive Colors     3C-RGB-2.png

Red, green, and blue are the primary colors of light in TVs and computer monitors.  Red and green light add together to produce the color yellow in a human eye.  Red and blue light add together to produce magenta.  Green and blue add together to produce cyan.  All three primary colors added together produce white.

Adding colors of light together produces a brighter color.

Subtractive Colors     3C-RYB-2.png

Red, yellow, and blue are the primary colors of opaque pigments in oil paints, colored chalks, and crayons.  Red pigment reflects red light but absorbs other colors.  Blue pigment reflects blue light but absorbs other colors.  Red and blue pigments mixed together reflect much of the red and blue light striking them, but absorb most of the yellow and green, producing the color purple (or dark magenta) in a human eye.

Yellow pigment reflects red, orange, yellow, and green light, absorbing only blue.  That is why yellow is so bright.  Red and yellow pigments mixed together reflect much of the red, orange, and yellow light striking them, but absorb blue and some green, producing the color orange.  Yellow and blue pigments mixed together reflect yellow, green, and blue light, absorbing red and orange, resulting in the color green.

Mixing opaque pigments together produces a color with roughly the average brightness of the pigments.

Transparent Colors     3C-YCM-2.png

Yellow, cyan, and magenta are the primary colors of transparent pigments in printing inks and watercolor paints.  A white surface reflects all colors of light which strike it.  Yellow ink on that surface transmits red, orange, yellow, and green light, but absorbs blue, so only the red, orange, yellow, and green light passes through the yellow ink, reflects off the white surface, and passs through the yellow ink again to reach the eye.  Cyan (also called "process blue") ink transmits green and blue light, but absorbs red, orange, and yellow.  Magenta (or "process red") ink transmits red and blue light, but absorbs orange, yellow, and green.

Mixing transparent pigments together produces a color which is darker than the individual pigments.

Color Wheels

These color wheels show how additive colors work on computer monitors using 24-bit color.  The first has the colors distributed in the simplest possible relationship between RGB values and position around the wheel.

Wheel7a has 24 colors evenly distributed along the video card's spectrum, with red, green, and blue equidistant from each other.  The distribution is shown in linear7a.  The colors adjacent to red, green and blue are practically indistinguishable from each other, while the colors between have strong contrast.

The second wheel distributes the colors in a way which gives more nearly equal contrast steps.

Wheel7b has 24 colors distributed as evenly as possible by eyeball judgement, keeping red, green, and blue equidistant from each other.  The distribution is shown in linear7b.  Colors around green and between red and magenta still have low contrast, while colors between red and yellow and between blue and cyan have high contrast.  Note that the range from blue to cyan gives more of an impression of a range of brightness rather than a range of hue.

I tried moving the positions of red, green, and blue to allow varying numbers of colors between them.

Wheel7c has 24 colors distributed as evenly as possible by eyeball judgement, with the positions of red, green, and blue arbitrary, except that I maintained the relationships across the wheel: red and cyan are still opposite; green and magenta are still opposite.  Blue is no longer exactly opposite yellow, but it is opposite a yellow-orange which seems to have a pretty good claim to be the appropriate opposite color, and violet is opposite yellow, which also seems appropriate.

I put red, green, and blue back in their standard positions in the next wheel, but allowed the sizes of the sectors to vary as needed to make the distribution of colors as even as possible.

Wheel7d has 31 colors distributed as evenly as possible by eyeball judgement, keeping red, green, and blue equidistant from each other.  It has one color between green and cyan, two colors between green and yellow, three colors between red and magenta, five colors between magenta and blue, seven colors between blue and cyan, and seven between red and yellow.

If you squint at this wheel, you will probably not see any lines between sectors.  It should appear to be a continuum.

The distribution of colors shows that a little green in red or blue is easily noticeable, while a little blue in green has almost no effect, a little red in green has only slightly more effect, a little blue in red has slightly more effect than that, and a little red in blue has moderate effect.

I tried to make all the colors in the next wheel have the same brightness, as nearly as possible.  That meant reducing the brightness of the brighter colors to that of the least bright color, which is blue.

Wheel7e has 31 colors distributed as evenly as possible by eyeball judgement, keeping red, green, and blue equidistant from each other.  All colors except blue have been dimmed to approximate the brightness of blue.  This is very subjective and highly dependant on the monitor.  Adjusting the brightness of your monitor so that the two colors on either side of blue are nearly indistinguishable from blue should approximate the conditions under which I made all the color wheels.

The final wheel is an attempt to render a color wheel with the primary colors of opaque pigments: red, yellow, and blue.

Wheel7f has 24 colors distributed as evenly as possible by eyeball judgement, keeping red, yellow, and blue equidistant from each other.

Home To my Space and Science home page

Jeff Root
February 9, 2007