Color Basics for Print and Web

01
of 09

Grade School Color Mixing

Mixing Paint Colors: Red + Yellow = Orange
Primary and Secondary (Complementary) Colors for Painting Not Printing Inks. Jacci Howard Bear

Did you know that the color wheel you learned in school isn't the same as the colors used for the Web? It's not even the way colors are mixed for printing? Well, ok, same colors, just different arrangements and mixes.

Traditional (Think Paint or Crayons)

  • The traditional primary colors are RED, YELLOW, and BLUE.

     

  • Mix two primary colors to get the complementary or secondary colors.

     

  • The traditional complementary colors are ORANGE (Red plus Yellow), GREEN (Yellow plus Blue), and PURPLE (Blue plus Red).

In grade school you probably had plenty of opportunities to mix primary colors and make new colors. It was magic! Mixing colors for printing with ink doesn't work quite the same. Primary colors in light and ink are not the same red, yellow, and blue primary colors of paint. In fact, there are 6 primary colors.

Color Basics Index:

  1. Grade School Color Mixing (this page)
  2. Additive and Subtractive Primaries (RGB & CMY)
  3. RGB Color in Desktop Publishing
  4. CMY Color in Desktop Publishing
  5. Specifying Colors
  6. Perception of Color
  7. Hues, Tints, Shades, and Saturation
  8. Common Color Combination Schemes
  9. Fine-tuning Color Combinations

 

02
of 09

Additive and Subtractive Primaries

RGB and CMY Colors
The On-Screen and Print Primaries of RGB and CMY. Jacci Howard Bear

The way we see color is a bit different from the way we mix paint. Instead of the red, blue, and yellow primary colors we have two different types of primary colors. You've probably seen a prism break a beam of light into a rainbow of colors. The visible spectrum of light breaks down into three color regions: RED, GREEN, and BLUE.

  • Add RED, GREEN, and BLUE (RGB) light to create WHITE light. Because you ADD the colors together to get White, we call these the additive primaries.

    Colors on screen are displayed by mixing varying amounts of red, green, and blue light. Keep in mind that the additive primaries typically refers to the RGB on-screen color mode. Mixing actual red, green, and blue inks or paints does not produce white.

     

  • Subtract one of the RGB colors from the others and you are left with yet another color. RGB minus RED leaves CYAN. RGB minus the BLUE leaves YELLOW. RGB minus GREEN leaves MAGENTA. These are called the subtractive primaries (CMY).

    Cyan, magenta, and yellow ink colors -- along with black -- are used in four-color process printing, also known as CMYK. Combining two of the subtractive primaries results in one of the additive primaries (for example, cyan + yellow produces green). Mixing all three of the subtractive primaries results in black (not a pure black, but a murky black-like color).

Next, we'll look at the way we try to reproduce color in print and on the Web.

 

Color Basics Index:

  1. Grade School Color Mixing
  2. Additive and Subtractive Primaries (RGB & CMY) (this page)
  3. RGB Color in Desktop Publishing
  4. CMY Color in Desktop Publishing
  5. Specifying Colors
  6. Perception of Color
  7. Hues, Tints, Shades, and Saturation
  8. Common Color Combination Schemes
  9. Fine-tuning Color Combinations
03
of 09

RGB Color in Desktop Publishing

Hexadecimal Triplets for RGB Colors
RGB colors use specific amounts of Red, Green, & Blue which may be expressed as Hexadecimal Triplets. Jacci Howard Bear

Your computer monitor emits light so it stands to reason that the computer uses the three color regions of RED, GREEN, and BLUE (the additive primaries) to reproduce the colors we see.

Working with images destined for the screen or the Web, we designate colors by the amount of RED, GREEN, or BLUE in the color. In your graphics software these numbers might look like this:

  • 255 RED 255 GREEN 0 BLUE
    or
  • 255R 255G 0B
    or
  • RGB: 255,255,0
    or
  • FFFF00 (may be written as #FFFF00)

All of these represent yellow. A number between 1-255 designates the amount of each color of red, green, or blue with 255 being the pure 100% value of the color. Zero means none of that color. In order for your computer to understand these numbers we translate them into 6 digit hexidecimal numbers or triplets (hex codes).

In our example, FF is the hexadecimal equivalent of 255. The hexadecimal triplet is always in the order of RGB so the first FF is red. The second FF is yellow. There is no blue so it has 00, the hexadecimal equivalent of zero.

These are the basics for color on the Web. To delve more deeply into RGB and how color looks on screen, dig into these more detailed resources for Web Color.

Color Basics Index:

  1. Grade School Color Mixing
  2. Additive and Subtractive Primaries (RGB & CMY)
  3. RGB Color in Desktop Publishing (this page)
  4. CMY Color in Desktop Publishing
  5. Specifying Colors
  6. Perception of Color
  7. Hues, Tints, Shades, and Saturation
  8. Common Color Combination Schemes
  9. Fine-tuning Color Combinations
04
of 09

CMY Color in Desktop Publishing

CMY Colors in Desktop Publishing
Because you are viewing this on the Web, in RGB, these color swatches are simulations of CMYK colors as used in desktop publishing. Jacci Howard Bear

Color (light) is made by subtracting differing amounts of other colors from the additive primaries (RGB). But in printing when we are mixing (adding) inks together the colors don't come out as we might expect. Therefore, we start with the subtractive primaries (CMY) and mix those in varying amounts (plus BLACK abbreviated as K) to get the colors we want.

Colors for print are mixed in percentages such as:

  • 50% CYAN 100% MAGENTA 25% YELLOW
    or
  • C50 M100 Y25

     

  • And since black is typically used along with CMY, a percentage for black (even if it is 0) is included as well, such as: C50 M100 Y25 K0

The 4th color bar in this example is a purple color made with differing amounts of each of the subtractive primaries (and no black). The red color preceding it is the CMY equivalent of RGB Red. The bottom color bar uses no CMY inks, only 80% black (K).

This CMY(K) color model is only one of many ways we can express color for print — but we'll save that topic for another feature. There are other color-related terms which we'll address briefly followed with more on specifying colors for print work.

Color Basics Index:

  1. Grade School Color Mixing
  2. Additive and Subtractive Primaries (RGB & CMY)
  3. RGB Color in Desktop Publishing
  4. CMY Color in Desktop Publishing (this page)
  5. Specifying Colors
  6. Perception of Color
  7. Hues, Tints, Shades, and Saturation
  8. Common Color Combination Schemes
  9. Fine-tuning Color Combinations
05
of 09

Specifying Colors

Ways to Print Colors
Use percentages of a color, spot colors, tints & shades, or do full color printing with just 4 ink colors. Jacci Howard Bear

Choosing the most pleasing or effective color combinations is only part of the equation in working with color. You must also be able to specify the colors you want. For printing there are a number of ways to specify color and it can vary depending on the number of colors used and how you use them. We'll just go through a few of the possibilities.

  • Tints of a Single Color You can achieve a large variety of effects using a single spot color (1/C) by specifying that the color be screened (tints). These tints are percentages of the solid color (100%).

     

  • Two or More Colors Combine solids and screened tints of two or more colors (2/C, 3/C, 4/C etc.). In the example,above, the colors are all combinations of a single color plus black (K) (top three are cyan, bottom three are magenta). (for printing purposes black is a color) They are also percentages.

     

  • PMS Colors To match a color exactly (or as near as printing can get) you can use a system such as the Pantone Matching System. There are others as well. Color mixes are numbered for easy reference. Your graphics program may have color palettes named for some of the more popular color-matching systems. These allow you to choose colors for your design that correspond to the color-matching system your printer uses. See PANTONE Spot Color Name Suffixes for more on PMS colors. (Note that the color names/numbers in the image may not reflect the most current designations from Pantone.)

     

  • CMYK In four-color process printing, to reproduce full-color continuous-tone color, we use four specific colors. These process colors are cyan (C), yellow (Y), magenta (M) (the SUBTRACTIVE colors from our color wheel), and black (K). The perception of millions of colors is achieved not by mixing these colors of ink but by printing thousands of tiny dots of each color in different sizes and patterns. The eye merges those dots and sees more than the four colors of CMYK (or sometimes written as, CYMK).

     

  • Color Separations In four-color process printing, rather than specifying specific colors, you create a different copy of your artwork for each of the four colors (CMYK). Each copy is printed one on top of the other to create the optical effect of full-color. Separations are also created when using more than two spot colors with each separation containing only the parts of the page for that specific color. In the illustration, the 4 grayscale images represent the printing plate for each of the 4 process colors. Notice how the Magenta plate is much darker on the body of the tractor? It takes a lot more of this reddish color ink to produce the bright red tractor. 

     

Obviously this is only a quick overview. Hundreds of books and articles have been written about the process of specifying and printing in color. See the links at the end of this article for more in-depth coverage.

Color Basics Index:

  1. Grade School Color Mixing
  2. Additive and Subtractive Primaries (RGB & CMY)
  3. RGB Color in Desktop Publishing
  4. CMY Color in Desktop Publishing
  5. Specifying Colors (this page)
  6. Perception of Color
  7. Hues, Tints, Shades, and Saturation
  8. Common Color Combination Schemes
  9. Fine-tuning Color Combinations
06
of 09

Perception of Color

Choosing Colors from the Color Wheel
You can create pleasing color combinations from one area of the color wheel or choosing colors from opposite sides. Jacci Howard Bear

If you thought the primary colors were Red, Blue, and Yellow, with complementary or secondary colors of Purple, Green, and Orange, then you need to visit or re-visit the earlier pages of this Color Basics tutorial because for this discussion we rely on the additive and subtractive primary colors, RGB and CMY.

Several factors affect the way we perceive color. One of those factors can be shown by the position of colors on the color wheel in relation to other colors.

Important Note: In science and color theory there are precise definitions for adjacent, contrasting, and complementary colors and how they appear on the color wheel. In graphic design and some other fields we use a looser interpretation. Colors don't have to be direct opposites or have a set amount of separation to be considered contrasting or complementary. In design it's more about perception and feeling.

  • Adjacent colors appear next to each other on the color wheel. Two or more adjacent colors harmonize with one another. They work well together (usually but not always). Learn more about adjacent colors.

    The term harmonize sounds nice, pleasant. But some harmonizing colors may appear washed out (yellow/green) or too dark and similar (blue/purple) to work well together.

     

  • Contrasting colors appear in different segments of the color wheel (divide it in quarters to help visualize this). The further apart from one another in hue, saturation, or value, the more contrast. Learn more about contrasting colors.

    While contrast is often needed to provide optimum readability (such as high contrast between background and text) some contrasting colors when printed side by side can appear to vibrate and be very tiring on the eye.

     

  • Complementary colors appear on opposite sides of the color wheel, directly or almost directly across from one another. Learn more about complementary colors.

    Complementary is often confused with complimentary. Different meanings. Two colors that compliment (flatter) each other may or may not be complements of each other.

     

Adjacent, contrasting, and complementary color combinations can often be improved by the use of shades and tints or creating additional contrast with black or white. See the next page for more color combining basics.

Color Basics Index:

  1. Grade School Color Mixing
  2. Additive and Subtractive Primaries (RGB & CMY)
  3. RGB Color in Desktop Publishing
  4. CMY Color in Desktop Publishing
  5. Specifying Colors
  6. Perception of Color (this page)
  7. Hues, Tints, Shades, and Saturation
  8. Common Color Combination Schemes
  9. Fine-tuning Color Combinations
07
of 09

Hues, Tints, Shades, and Saturation Colors

Tints and Shades
Changing the saturation or value of the original hues gives us tints (lighter colors) and shades (darker colors). Jacci Howard Bear

There are more colors that we can see and create than just Red, Green, Blue, Cyan, Yellow, and Magenta. Although the color wheel is often depicted with distinct blocks of color, it is really millions of colors that blend one into another as we move around the wheel.

Each of those individual colors is a hue. Red is a hue. Blue is a hue. Purple is a hue. Teal, Violet, Orange, and Green are all hues.

You can change the appearance of a hue by adding black (shadow) or adding white (light). The value of lightness or darkness and the saturation or amount of the hue gives us our shades and tints.

  • Add varying amounts of black to get shades. Think of the coming darkness and the darkening shadows to remember that a hue plus black equals a shade.

     

  • Add varying amounts of white to lighten a hue. The light hues are tints. In terms of printing, you use percentages of the ink colors that make up the pure hue such as 80%, 50%, or 10%.

This is just a basic introduction. Play around with saturation, and value to create tints and shades of various hues using this interactive Color Scheme Creator at Colorspire. Or, use the color features in your favorite graphics software to experiment with hue, saturation, and value.

Intensity, lightness, or brightness may be used to refer to the value of a color in some software programs.

Color Basics Index:

  1. Grade School Color Mixing
  2. Additive and Subtractive Primaries (RGB & CMY)
  3. RGB Color in Desktop Publishing
  4. CMY Color in Desktop Publishing
  5. Specifying Colors
  6. Perception of Color
  7. Hues, Tints, Shades, and Saturation (this page)
  8. Common Color Combination Schemes
  9. Fine-tuning Color Combinations
08
of 09

Common Color Combination Schemes

Common Color Schemes
Use the color wheel as a starting point for mixing and matching colors. Jacci Howard Bear

Choosing one color is hard enough, Adding one or more colors to the mix can be daunting. If you do a search on the Web or read a variety of books and magazines on colors you'll find several common methods described. There will also be variations. Just to get you started, consider these methods for coming up with the perfect palette for your print or Web projects.

  • Monochromatic color palettes start with a single hue and then use shades and/or tints of that color to expand to two, three, or more colors. For print publishing, using tints of a single color is one way to use color without the expense of traditional four-color process printing. Add black ink for text and accents. Learm more about using tints of spot colors for design.

     

  • Analogous or harmonizing color palettes use two or more adjacent colors on the color wheel. If using a very small segment of the color wheel, adding shades or tints of one or more of the hues can keep these colors from being too washed out or low-contrast.

     

  • Complementary color palettes may use two, three, or four complementary color pairs. With the split complementary palette look to either side of the complement (opposite) of your main color to find a suitable pair to complete the triad.

     

  • Triad color palettes use a trio of colors. Start my finding three colors that are evenly spaced around the color wheel and work from there.

     

  • Mix it up by picking a complementary pair then adding a tint (or two) of one of the colors (monochromatic + complementary). Or choose two to four analogous (adjacent) colors plus the complement of one of those hues (analogous + complementary).

These are just starting points. There are no hard and fast, immutable rules for mixing and matching colors. You'll also find that color wheels shown on various sites may differ quite a bit so that direct opposites on one color wheel are somewhat different on another. That's OK. Moving a few hues one way or the other when pairing up colors is how we end up with all kinds of interesting color palettes. Bottom line: Choose color combinations that look right for your project.

  • How many colors should you use? Two to five (including black or white) is common. More than that (excluding photographs) can become visually overwhelming -- and depending on your printing method/type of ink can be costly. But that's just a guideline, not a rule. With Web pages, using more colors doesn't affect cost except in terms of lost customers if the colors are too much.

     

  • How much of each color should you use? While balance is important, that doesn't mean you should use equal amounts of every color in your chosen palette. Balance a dose of a strong color with smaller amounts of several lighter or tamer colors. Again, there are no absolutes. If you are using a pair of very strong colors, using less of one of them can keep your page from overwhelming the reader.

     

  • Are there any color combos that should never be used? Maybe. Maybe not. See Forbidden Color Combinations?

 

Color Basics Index:

  1. Grade School Color Mixing
  2. Additive and Subtractive Primaries (RGB & CMY)
  3. RGB Color in Desktop Publishing
  4. CMY Color in Desktop Publishing
  5. Specifying Colors
  6. Perception of Color
  7. Hues, Tints, Shades, and Saturation
  8. Common Color Combination Schemes (this page)
  9. Fine-tuning Color Combinations
09
of 09

Fine-tuning Color Combinations

Fine-tune Your Color Combos
Fine-tune your color combinations by using tints or shades for one or more colors in a complementary or triad selection. Light and dark values of your paper or background also affect the appearance of colors. Certain colors may need to be lightened or darkened to stand out. Jacci Howard Bear

Some of the ambiguities of adjacent, contrasting, and complementary color combinations can be alleviated with the introduction of black and white, dark and light, shades and tints.

Shades and Tints of Color
In using adjacent or harmonizing colors, you can achieve a greater degree of legibility by adding black or white to one of the hues -- changing the saturation and value of a hue. Black creates a darker shade of the hue. White creates a lighter tint of the shade. Where a yellow and yellow-green pairing may be too close to work well together, using a darker shade of green can help the combo to really pop.

This is just a basic introduction. Play around with saturation, and value to create tints and shades of various hues using this interactive Color Scheme Creator at Colorspire. Or, use the color features in your favorite graphics software to experiment with hue, saturation, and value. Some graphics software may use intensity, brightness, or lightness to refer to the value of a hue.

Create Contrast with Black and White
WHITE is the ultimate light color and contrasts well with dark colors such as red, blue, or purple. BLACK is the ultimate dark color and makes lighter colors such as yellow really pop out.

Any single or multiple colors can change — or rather our perception of them changes — due to the other surrounding colors, the proximity of the colors to each other, and the amount of light. That's why a pair of colors that may clash when placed side-by-side, can work and look good when separated on the page or used with other colors.

A light color appears even lighter when it is adjacent to a dark color (including black). Two similar colors side by side may appear as two distinct colors but placed far apart they start to look like the same color.

Paper and Emotions Affects Color Perception
The amount of light we perceive in a color is also affected by the surface on which it is printed. A shiny RED corvette printed in a magazine ad on slick, glossy paper is not going to look the same as the RED corvette printed in the newspaper ad. The papers absorb and reflect light and color differently.

Color Meanings
Additionally, our color choices are often dictated by the emotions that specific colors and color combinations evoke. Certain colors create physical reactions. Some colors and color combinations have specific meanings based on traditional and cultural usage.

 

Color Basics Index:

  1. Grade School Color Mixing
  2. Additive and Subtractive Primaries (RGB & CMY)
  3. RGB Color in Desktop Publishing
  4. CMY Color in Desktop Publishing
  5. Specifying Colors
  6. Perception of Color
  7. Hues, Tints, Shades, and Saturation
  8. Common Color Combination Schemes
  9. Fine-tuning Color Combinations (this page)

 

Also see: The Problem With Color because when you think by blue is purple we could both be seeing red.