The Top 9 Basic Color Principles for Print and Web

Color Wheel made from paint and paintbrushes
A Basic Color Wheel Can Help Quilters.

Dimitri Otis / Getty Images

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, same colors, just different arrangements and mixes.

of 09

Grade School Color Mixing

Mixing Paint Colors: Red + Yellow = Orange

Lifewire / Jacci Howard Bear

Traditional (Think Paint or Crayons)

  • The traditional primary colors are red, yellow, and blue.
  • Mix two primary colors to get 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.


of 09

Additive and Subtractive Primaries

RGB and CMY Colors

Lifewire / 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 refer 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.

of 09

RGB Color in Desktop Publishing

Hexadecimal Triplets for RGB Colors

Lifewire / 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
  • 255R 255G 0B
  • RGB: 255,255,0
  • 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 hexadecimal 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 a color looks on screen, dig into these more detailed resources for web color.

of 09

CMY Color in Desktop Publishing

CMY Colors in Desktop Publishing

Lifewire / 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
  • C50 M100 Y25
  • 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 that we'll address briefly followed with more on specifying colors for print work.

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.

Lifewire / 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 is 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.

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.

of 09

Perception of Color

Choosing Colors from the Color Wheel

Lifewire / 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.

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.

of 09

Hues, Tints, Shades, and Saturation Colors

Tints and Shades

Lifewire / 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.

of 09

Common Color Combination Schemes

Common Color Schemes

Lifewire / 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.
  • 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 + complimentary). Or choose two to four analogous (adjacent) colors plus the complement of one of those hues (analogous + complimentary).

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 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 some of the forbidden color combinations before you make your final color combination choices.
of 09

Fine-Tuning Color Combinations

Fine-tune Your Color Combos

Lifewire / 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.

  • Calming — Blue, Green, Turquoise, Silver
  • Exciting — Red, Pink, Yellow, Gold, Orange
  • Mixed Cool/Warm Color Meanings — Purple, Lavender, Green, Turquoise
  • Neutral Color Meanings (unifying) — Brown, Beige, Ivory, Gray, Black, White