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.

 

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

Tagged with: , , , ,
Posted in Dreamweaver, Illustrator, Photoshop, Tutorials
10 comments on “The RGB Color Wheel
  1. Brochures says:

    Thank you so much for posting this! It’s very helpful and informative. Excellent work!

  2. A really handy tutorial. Thanks for sharing!

  3. You’re both welcome!

  4. John says:

    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

  5. Absolutely OK by me, John!

  6. Louis says:

    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

  7. The truth is, I made the Venn diagram in Illustrator. I set each piece to the color values you see on the color wheel.

  8. debbie says:

    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

  9. This is clearly explained and very helpful. Thank you!

  10. Patrick says:

    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

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>