Color Mixture

The Mixing Technique

1. Create a new Photoshop document.
2. Use the Rectangular Marquee tool to select the left half of the image window.

Select the left half

3. Pick a foreground color. I chose pure red (R:255, G:0, B:0).
4. Pick a background color. I chose pure blue (R:0, G:0, B:255).

Red and blue

5. Press Alt+Backspace (Mac: Opt+Backspace) to fill the selection with your foreground color.

Left half filled with red

6. Select > Inverse to invert the selection.
7. Press Ctrl+Backspace (Mac: Cmd+Backspace) to fill the selection with your background color.

Right half filled with blue

8. Use the Rectangular Marquee tool to make a selection through the middle somewhere so that it includes both colors. Mine is covering approximately the center one-third.

Rectangular selection in the center

9. Filter > Gaussian Blur. Set the Radius all the way up to 250.0 pixels and click OK.

Gaussian Blur

9. Press Ctrl+D (Mac: Cmd+D) to deselect. What you will have in the middle is a nice blend mixing the two colors.

In my case, right in the middle is a rich purple (R: 129, G: 0, B: 126). This is close to the result we would get with paint.

Mixture of pure red and pure blue

Rich purple

Note: A similar blending effect can be made using a Foreground-to-Background gradient. However, the result of the gradient contains more of the source colors, and less of the mixed colors, than when we use the mixing method above.

Mixing method versus gradient method

Next: Color Mixing Experiments

Color Wheel

1. Create a new file that is the same height and width. I went with 450px by 450px.
2. We need to place some guidelines halfway across and down in order to find the center of our document. Make the rulers visible by pressing Ctrl+R.
3. Click+drag a guide from the horizontal ruler down to the half-way mark. It should snap into place (in my case, at the 225px mark.) Do the same from the vertical ruler to place a vertical guide.

Place guides halfway across and down

4. Select the Elliptical Marquee tool from the Tools panel. We’re going to make a circle for the color wheel to fill.
5. Draw a circle in the image window. Give it a bit of space around it so it is not right up to the edges of the image window. Hold down the Shift key to get a perfect circle.

Circle selection

6. Select a Spectrum angle gradient:
   1. Click on the Gradient tool in the Tools panel. It may be hiding under the Paint Bucket tool.
   2. Click on the Angle Gradient icon in the Control panel.
   3. Click on the large gradient swatch to open the Gradient Editor.

Open the Gradient Editor

7. In the Gradient Editor, click on the Spectrum gradient, as shown below (it is one of the default gradients installed with Photoshop). Click OK.

Spectrum gradient

8. Decide where you want the red part of the color wheel to be. Let’s say we want it on the right.
9. Position your Gradient tool at the center of the image window, where the two guides intersect.
10. Click+drag from the center to the edge of the circle. Here we want red on the right, so drag to the right.
11. Hold the Shift key down while you drag to keep your angle at 90 degrees.

Drag the gradient

Gradient filled circle

12. Press Ctrl+H (Mac: Cmd+H) to hide the guides
13. Press Ctrl+D (Mac: Cmd+D) to deselect

That’s it!

Finished color wheel

If you have any questions or feedback, I’d love to hear from you in the comments below.

Hexadecimal Color Wheel

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

Hexadecimal Color Wheel

The color wheel above shows three primary colors (red, green and blue) and three secondary colors (yellow, cyan and magenta). This color scheme is just like in the RGB Color Wheel, but the colors here are identified with a different code – hexadecimal. The hexadecimal code always starts with a pound (#) sign in HTML and CSS coding. You will also find a field for hexadecimal values in the Color Pickers for Photoshop and Illustrator.

Color Picker

The Rules of Hexadecimal Color

There are three important things to remember about hexadecimal color:

1. In decimal (“base ten”) counting, each digit can be any number from 0 to 9, or ten possibilities. That’s how we normally count, of course. In hexadecimal (“base sixteen”) counting, each digit can be any number from 0 to 9 -OR- any letter from A to F. That gives us sixteen possibilities. You would count in this order, from lowest to highest: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.
   
   

   Base Ten vs. Base Sixteen

2. In decimal counting, two digits side-by-side can give you 100 possibilities (0 to 99). That’s ten for the first digit times ten for the second digit. In hexadecimal, you get 16 times 16, which gives you 256 possibilities. That’s convenient, since there are 256 possible values for red in RGB, 256 for green, and 256 for blue.
   
   

   Double-Digit Hexadecimal

3. The first two digits in hexadecimal tell you the red values. The second pair tell you the green values, and the last pair tell you the blue values. 256 for Red x 256 for Green x 256 for Blue equals just under 16.8 million.
   
   

   Combining Red, Green and Blue

High-Saturation Hues

The higher the number in the first pair of a hexadecimal number, the more that red is contributing to the color. Ditto for green in the second pair, and blue in the third pair. Alternatively, a lower number means a color is contributing less.

Shades of White

Pure white is indicated by the highest hexadecimal value there is: #ffffff. The background behind this text is #ffffff. You can get softer whites by decreasing the values of red, green, and especially blue.

Notice that if you reduce just the red values, the color gets more cyan. If you reduce just the green values, the color gets more magenta. And if you reduce just the blue values, the color gets more yellow.

Shades of Black and Gray

Pure black is indicated by the lowest hexadecimal value there is: #000000. This text is #000000. You can get softer blacks and grays by increasing the values of red, green, and blue.

Notice that if you increase just the red values, the color gets more red. If you increase just the green values, the color gets more green. And if you increase just the blue values, the color gets more blue. Adding equal amounts of red, green and blue results in a gray; the higher the number, the lighter the gray.

Muted Colors

Muted colors are less saturated (vivid) and more natural. You get these in hexadecimal by adding a touch of two other two primaries to your main primary color, and reducing the value for that main primary.

Notice that if you increase just the red values, the color gets more red. If you increase just the green values, the color gets more green. And if you increase just the blue values, the color gets more blue. Adding equal amounts of red, green and blue results in a gray; the higher the number, the lighter the gray.

Shades of Brown

Browns tend to be versions of muted orange. Try mixing middle values of red and green and leaving blue as 00.

CMYK Color Wheel

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

CMYK 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. Cyan and magenta make blue. Magenta and yellow make red. Yellow and cyan make green.

I’ve shown a formula for each color. The numbers are the respective percentages of Cyan, Magenta, Yellow and black (K) in each hue. These are the numbers you would put in as the CMYK values in the Color Picker.

Mixing CMYK Color

When you add cyan, magenta, and yellow together, you get black – in theory. In reality, it’s a murky soft black, so printing a rich black requires the addition of black ink, referred to as the Key color. Mixing these four colors together in various ways gives us almost all the colors in the rainbow.

CMYK Venn Diagram

Out of Gamut

Many colors which are visible to the naked eye are not reproducible on a printing press with CMYK. These colors are called “out of gamut”. We can get pretty close, though. Photoshop and Illustrator have commands you can use that bring your colors back into gamut, so that they print a predictable color.

In the Color Picker, look for an icon of a little triangle, with an exclamation point inside, next to the current color: If you see that icon, your chosen color will not print in CMYK. Click on the triangle to choose the closest in-gamut color.

CMYK Out of Gamut

Four-Color Process Printing

In four-color offset lithography (also known as process printing), a full-color image is separated into four plates. These plates look somewhat like photo negatives after they are etched. The black areas of the plate hold no ink. Conversely, the lighter the etched area on a plate, the more ink it will hold. There is one plate each for cyan, magenta, yellow, and black.

CMYK Plates and Inks

Plates printed for process printing such as these are not printed with solid ink*. They are actually comprised of patterns of dots we cannot distinguish with the naked eye. Try looking at a magazine ad through a magnifying lens some time. It’ll look something like this:

Dot Pattern

Each of the four plates is printed in a grid of dots. So that the dots are not overlaid exactly on top of each other, the grid for each plate is turned at a different angle. The black grid is at 45°, magenta is at 75°, yellow is at 90°, and cyan is at 105°. When printed together, they form a rosette pattern.

CMYK Rosette

*Solid ink is printed when we use spot colors.

RGB Color Wheel

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.

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.

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.

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.

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.

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.

Browns

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