Categories
design education technology

The RGB Color Wheel

RGB Color Wheel
RGB Color Wheel
Photoshop Illustrator and Dreamweaver 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
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
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

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

Yellow
Yellow

Yellow
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

Green
Green

Green
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

Cyan
Cyan

Cyan
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
Blue

Blue
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
Magenta

Magenta
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

14 replies on “The RGB Color Wheel”

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

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

I made a venn diagram in just a couple of minutes in GIMP. Something similar will surely work in Photoshop.
1) make three transparent layers
2) drag a round selection
3) drag red rgb(FF0000) inside the selection
4) select a different layer
5) drag blue rgb(00FF00) inside the selection
6) select the third layer
7) drag green rgb(0000FF) inside the selection
8) select move from the toolbox and drag the layer to get the green where you want it.
9) select the blue layer
10) drag to move the blue circle where you want it.
11) duplicate each of the layers so you have 2 red circles overlaying, 2 blue circles overlaying, 2 green circles overlaying.
12) move the layers so there’s a set of red green and blue on top and a second set of red green and blue below.
13) Change the mode of the top three layers to screen.
14) Admire your RGB Venn diagram

debbie if no one else has helped you I’ll do it for you. phorgan1 at yahoo dot com

Dear Dawn,
Thank you for this really helpful tutorial. Please can I use your RGB colour wheel to explain RGB in a set of activities I am putting together for children learning electronics. One of the activities involves an RGB LED and I want to show them how they can program it to turn their favourite colour.
Many thanks,
Rose

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.