The RGB Color Wheel

By Dawn Pedersen · 03/08/2009 ·

RGB Color Wheel

RGB stands for Red-Green-Blue, which are the primary colors of light. RGB is the color mode used on computer monitors because they shine light into your eyes. When you add all three RGB primary colors together, you get pure white light. That’s why RGB is called “additive color”. After the jump, learn more!

When you remove red, green, and blue light you get black, or no light at all. Mixing these primaries together in various ways gives us all the colors in the rainbow – literally. On a monitor, it’s only 16.8 millions colors. But that’s a lot, right?

Click on the image below to view a much larger version.

RGB Color Wheel

The color wheel above shows three colors in addition to the primary colors. In between each pair of primaries is a secondary color (a mix of two primaries), and two tertiary colors (a mix between a primary and a secondary). Red and green make yellow (I know, weird, huh?) Green and blue make cyan, and blue and red make magenta.

I’ve shown two formulas for each color. The first is the degree around the circle, the top (red) being 0° and a full rotation clockwise being 360°. You will see color expressed as a degree in some functions in Photoshop. In particular, it is used for the Hue slider in Image > Adjustments > Hue and Saturation.

The second formula indicates the values for red, green and blue you would enter into the RGB fields in the Color Picker. Each of these RGB values can be anywhere from zero to 255, making 256 possible values. 256 for red x 256 for green x 256 for blue = the approximately 16.8 million colors we talked about above. Zero in the Red box means that no red is contributing to the selected color. 255 in the Red box means that Red is as strong as it can possibly be in the selected color. Ditto for Green and Blue.

RGB Venn Diagram

You can get a pure white with R:255, G:255, B:255.
You can get a pure black with R:0, G:0, B:0.
An equal number for all three colors (other than 0 or 255) will get you various shades of gray; the higher the number, the lighter the gray.

For more details on pinpointing just the right color, see below.

Red

Red

Red

In the RGB color wheel, red is at the top, at 0 degrees.

Pure red is created with a value of 255 for R and 0 for G and B. To achieve a darker red, reduce the value for R. To achieve a lighter red (pink), add a bit of G and B at equal amounts. Oranges can be created with pure red and some green. For example, 255-125-0 is a rich orange.


255-0-0	125-0-0

255-125-125	255-125-0

Yellow

In the RGB color wheel, yellow is 1/6th the way around clockwise, at 60 degrees.

Pure yellow is created with a value of 255 for R and G, and 0 for B. To achieve a darker yellow (which in light or paint ends up greenish), reduce the values for R and G. To achieve a lighter yellow, add a bit of B. A nice yellow-green requires a reduction of red.


255-255-0	125-125-0

255-255-125	125-255-125

Green

In the RGB color wheel, green is 1/3th the way around clockwise, at 120 degrees.

Pure green is created with a value of 0 for R, 255 for G, and 0 for B. To achieve a darker green, reduce the value for G. To achieve a lighter green, add a bit of R and B (that gets me in the mood for some Motown). Turquoise can be yours if you add a generous dose of blue to green.


0-255-0	0-125-0

125-255-125	0-255-200

Cyan

In the RGB color wheel, cyan is 1/2 the way around clockwise, at 180 degrees.

Pure cyan is created with a value of 0 for R, and 255 for G and B. To achieve a darker cyan, reduce the values for G and B. To achieve a lighter cyan, add a bit of R. You can get a cornflower blue by leave R at 0 and reducing G by half.


0-255-255	0-125-125

125-255-255	0-125-255

Blue

Blue, our final primary, is 2/3th the way around clockwise, at 240 degrees.

Pure blue is created with a value of 0 for R and G, and 255 for B. To achieve a darker blue, reduce the value for B. To achieve a lighter blue, add a bit of R and G. Voilet/purple is created by adding some red into a pure blue.


0-0-255	0-0-125

125-125-255	125-0-255

Magenta

Magenta, our final secondary color, is 5/6ths the way around clockwise, at 300 degrees.

Magenta is created with a value of 255 for R, 0 for G, and 255 for B. To achieve a darker magenta, reduce the value for R and B by equal amounts. To achieve a lighter magenta, add a bit of G. A pretty fuchsia color can be had by reducing the blue.


255-0-255	125-0-125

255-125-255	255-0-125

Browns

Browns tend to fall in the muted-orangey area. Here are a few to get you started:


197-175-143	164-129-78

108-73-24	100-60-3

Done

Share this Article

You can share this article almost anywhere but on your car's back bumper.
Hover over this bar to access the menu.

Category: Dreamweaver, Illustrator, Photoshop, Tutorials

Tags: color wheel, Dreamweaver, Illustrator, interface, Photoshop

Comments

8 Comments

By Brochures, 03/31/2009 @ 10:30 pm

Thank you so much for posting this! It’s very helpful and informative. Excellent work!
By photo retouching, 05/06/2009 @ 11:51 pm

A really handy tutorial. Thanks for sharing!
By Dawn Pedersen, 05/07/2009 @ 8:25 am

You’re both welcome!
By John, 06/10/2009 @ 7:36 am

This is the clearest description of RGB colour use I have found – I wish to include your URL on the printed handout for a series of GIMP workshops I am giving in the Southern Forest region of Australia – My colour notes are cursory as at this stage in the workshops this amount of detail is not needed – Now those who wish to delve more deeply can read it all here – Let me know if this is OK by you – Thanks
By Dawn Pedersen, 06/10/2009 @ 1:12 pm

Absolutely OK by me, John!
By Louis, 06/29/2009 @ 12:04 pm

i can make the CMYK venn diagram, for each colour just 100% of the 1 colour and and 0% for others. Then set layer styles to multiply.

I can’t figure out how to do the RGB venn diagram.

How do you make the venn diagram as on this page: http://blulob.com/2009/03/08/the-rgb-color-wheel/

Pease help
By Dawn Pedersen, 06/29/2009 @ 12:12 pm

The truth is, I made the Venn diagram in Illustrator. I set each piece to the color values you see on the color wheel.
By debbie, 02/01/2010 @ 7:59 pm

Hi:

I am an artist and also into energy healing work. I would so like to see the spectrum of watercolors located in their correct places with their beautiful names around this beautiful color wheel. Is that possible to do? Please email me on this cause I would either barter some art or pay you to do this for me.

thanks,
Debbie