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 Picker

The Illustrator Color Picker

A) The Color Field

Color Field

The square is 256 levels of saturation (vividness) across the top, from pure white to pure hue (color; in this case, a bright blue). The square is 256 levels of value (lightness/darkness) from top to bottom, adding more black as you go down, until the color is pure black at the very bottom edge. This means there are 65,536 possible colors in this square alone.

B) The Color Spectrum Slider

Color Spectrum Slider

The best practice when you want to completely change the current color is to start with B (the Color Spectrum Slider), and then narrow your choice to a particular value and saturation in A (the Color Field).

If you multiply the 256 hues in the Color Spectrum Slider with the 65,536 colors in the Color Field, you get 16,777,216 colors available in the Color Picker.

C) The Current Color and D) The Previous Color

Current Color / Previous Color

Comparing the two colors comes in really handy if a shade of green is not quite natural enough, for example, and you want to add a touch of gray or brown. Or if you are coordinating two colors in a color scheme and want one color to be the same intensity as another, but a different hue (like a muted blue with a muted green.)

E) RGB Color Values

RGB Color Values

Each of these 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.

• You can get a pure red with R:255, G:0, B:0.
• You can get a pure green with R:0, G:255, B:0.
• You can get a pure blue with R:0, G:0, B:255.
• You can get a pure yellow with R:255, G:255, B:0.
• You can get a pure magenta with R:255, G:0, B:255.
• You can get a pure cyan (blue-green) with R:0, G:255, B:255.
• 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.

By the way, RGB is referred to as an Additive Color Mode, because when you add all the primaries together at full strength, you get pure, white light.

F) Hexadecimal Color Value

Hexadecimal Color Value

Hexadecimal values are like RGB values but expressed in a different format. The first two digits are for Red, the second two for Green, and the last two for Blue. Because each digit can be any of sixteen values, a two-digit combination can represent 256 values. See how that relates to RGB? And similar to RGB mode, a double-zero means no color (or black if all six digits are zero.) What is special in Hexadecimal is that after 9, the brighter colors go from A to F.

Here are some Hexadecimal colors:

• White: #FFFFFF
• Black: #000000
• Red: #FF0000
• Green: #00FF00
• Blue: #0000FF

G) CMYK Color Values

CMYK Color Values

The values for C, M Y and K are expressed as percentages. These percentages represent how much of that color ink would be printed on paper. For example, C at %100 means that a particular area would get 100% percent coverage of Cyan. We will not be using CMYK often in these tutorials, so I won’t go into greater detail here.

Other Features

The HSB values are for Hue, Saturation and Brightness. This is another way to control color. Hue means the given name for a color, Saturation means the strength or vividness, and Brightness means how close it is to white.

The OK button saves your color change and closes the Color Picker.

The Cancel button closes the Color Picker without making changes.

The Color Swatches button lets you access a multitude of preset colors.

The Only Web Colors checkbox is a throwback to when many people did not have monitors that displayed 16.8 millions colors. It makes the Color Field show only what were once called “Web-Safe” colors. Don’t worry about this.

Color Picker

The Photoshop Color Picker

A) The Picked Color

Picked Color

This circle inside the large square of colors indicates which color is currently selected in the Color Picker. You can click anywhere in this square to change the selected color.

The square is 256 levels of saturation (vividness) across the top, from pure white to pure hue (color; in this case, a bright blue). The square is 256 levels of value (lightness/darkness) from top to bottom, adding more black as you go down, until the color is pure black at the very bottom edge. This means there are 65,536 possible colors in this square alone.

B) The Color Slider

Color Slider

But what if you don’t want blue? No problem. The Color Slider to the right of the large square offers a range of 256 hues like a rainbow. Just click on the rainbow band, or drag the slider up or down. You will see the overall hue change in the large square.

The best practice when you want to completely change the current color is to start with B (the Color Slider), and then narrow your choice to a particular value and saturation in A (the Picked Color).

If you multiply the 256 hues in the Color Slider with the 65,536 colors in the Picked Color square, you get 16,777,216 colors available in the Color Picker.

C) The Adjusted Color and D) The Original Color

Adjusted Color, Original Color

These rectangles allow you to see your new color selection on the top, and compare it to your previously selected color on the bottom.

Comparing the two colors comes in really handy if a shade of green is not quite natural enough, for example, and you want to add a touch of gray or brown. Or if you are coordinating two colors in a color scheme and want one color to be the same intensity as another, but a different hue (like a muted blue with a muted green.)

E) RGB Color Values

RGB Values

RGB refers to Red, Green and Blue. Unlike the traditional color wheel where red, yellow and blue are the primary colors from which everything else is mixed, monitors have primaries of red, green and blue. That is because the colors on monitors is created with light instead of paint or ink.
By the way, RGB is referred to as an Additive Color Mode, because when you add all the primaries together at full strength, you get pure, white light.

To learn more about how to select colors in RGB, see my mini-guide on The RBG Color Wheel.

F) Hexadecimal Color Value

Hexadecimal Value

Hexadecimal values are like RGB values but expressed in a different format. The first two digits are for Red, the second two for Green, and the last two for Blue. Because each digit can be any of sixteen values, a two-digit combination can represent 256 values. See how that relates to RGB? And similar to RGB mode, a double-zero means no color (or black if all six digits are zero.) What is special in Hexadecimal is that after 9, the brighter colors go from A to F.

Here are some Hexadecimal colors:

• White: #FFFFFF
• Black: #000000
• Red: #FF0000
• Green: #00FF00
• Blue: #0000FF

G) CMYK Color Values

CMYK Values

The values for C, M Y and K are expressed as percentages. These percentages represent how much of that color ink would be printed on paper. For example, C at %100 means that a particular area would get 100% percent coverage of Cyan. We will not be using CMYK often in these tutorials, so I won’t go into greater detail here.

Other Features

The HSB values are for Hue, Saturation and Brightness. This is another way to control color. Hue means the given name for a color, Saturation means the strength or vividness, and Brightness means how close it is to white.

The LAB values are for LAB color, a color space used by advanced Photoshoppers for color correction, noise reduction, and other techniques. L stands for Luminosity, and its channel carries all the value and detail of an image. The A channel contains the magenta and green hues, and the B channel contains the blue and yellow hues.

The OK button saves your color change and closes the Color Picker.

The Reset button reverts your selected color to the Original Color and leaves the Color Picker one.

The Add to Swatches button lets you save the selected color in the Swatches palette for future repeated use.

The Color Libraries button gives you access to large libraries of colors, in particular the variety of Pantone colors used in printing spot colors.

The Only Web Colors checkbox is a throwback to when many people did not have monitors that displayed 16.8 millions colors. It makes the Color square show only what were once called “Web-Safe” colors. Don’t worry about this.

To close the Color Picker without making changes, click on the Close button (the red X in the upper-right corner on the PC).