Exploring the real color wheel in Photoshop

In my last tutorial, we explored the RYB Color Wheel by Johannes Itten. Although it is taught in most schools today, it’s not exactly designer-friendly. The problem is that the complementary colors on the RYB Color Wheel mixes hues of Brown instead of Gray.

The Real Color Wheel, by Don Jusko, mixes hues of Gray and it’s important that we understand it as much as the RYB Color Wheel — let’s explore it in Photoshop.

Exploring HSB-Values

Open the Color Dialog in Photoshop, or your preferred program, and take a look at the HSB-values:

  • (H)ue 
  • (S)aturation
  • (B)rightness
With these three values you can change the color (Hue), the tints (Saturation) and finally the shades (Brightness).
First, let’s play around with the hues. As we saw before, Johannes Itten uses RYB (red/yellow/blue) as Primary colors. Since the wheel is 360° and we want to find its three primary colors, we can do simple math: 360/3= 120°. This is the amount in which the colors are spaced apart from each other.
The first hue is red and it’s at 0°. So it’s HSB is:
  • H: 0°
  • S: 100°
  • B: 100°
The second hue is green and it’s at 120°:
  • H: 120°
  • S: 100°
  • B: 100°
And blue is the last color at 240°:
  • H: 240°
  • S: 100°
  • B: 100°


The New Color Wheel looks like this:
CMYK
RGB
Images from realcolorwheel.com
Although it is close, it is NOT the same as the RYB Color Wheel. For example, on the RYB Color Wheel, the complementary color of Red is Green. On the New Color Wheel the complementary of Red is Cyan — this color wheel is much more artist-friendly:
  • Cyan is the complementary of Red
  • Magenta is the complementary of Green
  • Yellow is the complementary of Blue

Finding Other Complementary Colors

Since Complementary colors are opposite from each other on the Color Wheel, you have to add or subtract 180° (360/2) to any given hue value. As we stated above, the complementary of 0° (Red) is 180° (Cyan).
Although, this is not a difficult technique, I’m quite a lazy guy and prefer to use my time with designing and not math, so I use a simple trick in Photoshop. Choose Image > Adjustments > Invert to invert the color(s) from your selected layer. Whatever color percentage you have on that layer will be swapped 180° around to it’s complementary color.
And when I’m REALLY lazy , I use CMD+I to get the same results even quicker. ;)

Creating Monochromatic Color Schemes

Now, I will explain how you can find a Monochromatic color schemes without the help of any third party tools. I have chosen a random hue value of 83° which is some kind of lime color:
You can drag the small circle to the left or right to create tints (adding white) of this color. Or you can simply adjust the Saturation percentage.
If you move the small circle up and down, you control the shade values (adding black). Or you can adjust the Brightness percentage.
Now you have a simple Monochromatic color scheme:

Creating Triad Color Schemes

I will start with my amazing lime color (83° hue). Actually we already created one triad when we explored the Primary colors because remember, a triad is colors that are 120° apart.
As you can see, I have added 120° to 83° to get this Triad:
Now you know how to quickly create a color scheme from any hue.

It’s Your Turn to Explore!

After using these color tips, you will start to see your designs in a totally new light. For example, you’ve learned about Monocromatic and Complementary color schemes, so why not combine them into one new color scheme? :) Lets give it a try.
We will use our lime color as the base color. Again, it’s defined as:
  • H: 83°
  • S: 100°
  • B: 100°

From this base color we will find it’s Complementary color. Add 180° to the hue value 83° and you will get 263°. This will give you a Purple hue.

Then, create a tint and a shade of the Complementary Purple. This is my result:

 

 

You can really do a lot by combining different color schemes. Now the power is in your mouse… use it wisely! :)

Any questions or suggestions about color? Please post it in the comments.

Jurgen
View all posts by Jurgen
Jürgen's website

5 Comments

  1. Don Jusko

    I like what you are doing Jurgen. I want to point out a small word correction.
    “In my last tutorial, we explored the RYB Color Wheel by Johannes Itten. Although it is taught in most schools today, it’s not exactly designer-friendly. The problem is that the complementary colors on the RYB Color Wheel ?USE? hues of Brown instead of Gray.”

    “…RYB Color Wheel ?use? hues of Brown instead of Gray.”
    It should say, …RYB Color Wheel MIXES hues of Brown instead of Gray.
    Example: On the RYB color wheel red and green complements mix brown.
    Example: On the RCW color wheel magenta and green complements mix neutral neutral gray or neutral black.

    “The Real Color Wheel, by Don Jusko, ?USES? hues of Gray and it’s important that we understand it as much as the RYB Color Wheel — let’s explore it in Photoshop.”

    Again IMO, just change one word from “uses” to “mixes”

    Note: Photoshop and RGB in general add black (by subtracting light) to darken colors. The RCW darkens each color the same way the elements (crystals) get darker. Yellow to red get browner before black. Cyan to blue get bluer before black.

    For the full explanation and colors go here.
    http://www.realcolorwheel.com/colorwheel.htm
    djusko@realcolorwheel.com
    You can use my colorwheel image if you would link it.

    Reply February 15, 2012 at 5:22 pm
    • Allison Stuart

      Hi Don Jusko! Well this was a nice surprise from the RCW master himself. :) Thank you for the correction, I have changed “uses” to “mixes.” I also included your color wheel images and linked it to your site. Thanks again!

      Reply February 16, 2012 at 4:18 pm
    • Jurgen

      Hi Don Jusko, really an absolute pleasure and real honor to to found your post in the commments. You are absolute right of course and thanks again for the explaination :)

      Reply February 16, 2012 at 11:32 pm
  2. Steve Harwood

    Thanks for this really interesting post Jurgen! Was a great read and enjoyed going through it this morning. I’d never thought to use HSB as the basis for a colour wheel, in the past I always designed with the traditional RYB Color Wheel by Johannes Itten. As websites are viewed on RGB monitors it makes sense to use a colour wheel based on these colours. Complimentary colours that work in art don’t always work so well when viewed on a screen. I found the section on monochromatic colours particularly useful, as it can sometimes be difficult to get a set of colours looking nice in the same hue. Again thanks for sharing this, very useful, will certainly help with colour choice in the future!

    Reply February 16, 2012 at 1:01 am
  3. Jurgen

    Hi Steve, thanks for your nice comment. It’s of course always great to hear that a tutorial or article is useful for somebody. I personaly love monochromatic colors also they can be used in many different kind of designs. All the best

    Reply February 16, 2012 at 11:37 pm

Leave a comment