Color Theory 101: How to Choose the Right Colors for Your Designs?
Let’s first go back to high school art class to discuss the basics of color. Remember hearing about primary, secondary, and tertiary colors? Good. They’re pretty important if you want to understand, well, everything else about color.
Primary, Secondary, and Tertiary Colors
The primary colors are red, yellow, and blue. Think about them as if you were using paints — these are colors that cannot be created by combining two other colors.
Secondary colors, on the other hand, are the three (green, purple, orange) colors that are formed by combining the primary colors.
Tertiary colors are created when you mix a primary color with secondary color.
From here, the color gets a little more complicated. And if you want to learn how the experts choose a color in their design, you’ve got to first understand all the other components of the color.
All the Colors in Between
So now you know what the “main” colors are, but you and I both know that choosing the color, especially on a computer, has much more of a range than 12 basic colors.
That’s because you can create brighter, lighter, softer, and darker colors by mixing white, black, and gray with the original colors. You also end up with different terms for these types of colors:
Hue: Hue is pretty much synonymous with what we actually mean when we said the word “color.” All of the primary and secondary colors, for instance, are “hues.”
Shade: You may recognize the term “shade” because it’s used quite often to refer to light and dark versions of the same hue. But actually, a shade is technically the color that you get when you add black to any given hue. The various “shades” just refer to how much black you’re adding.
Tint: A tint is the opposite of a shade, but people don’t often distinguish between a color’s shade and a color’s tint. You get a different tint when you add white to a color. So, a color can have a range of both shades and tints.
Tone (or Saturation): You can also add both white and black to a color to create a tone. Tone and saturation essentially mean the same thing, but most people will use saturation if they’re talking about colors being created for digital images. The tone will be used more often for painting.
Adding and Subtracting Color
If you’ve ever played around with color on any computer program, you’ve probably seen a module that listed RGB or CMYK colors with some numbers next to the letters.
stands for Cyan, Magenta, Yellow, Key (Black). Those also happen to be the colors listed on your ink cartridges for your printer. That’s no coincidence. CMYK is the subtractive color model. It’s called that because you have to subtract colors to get to white. That means the opposite is true — the more colors you add, the closer you get to black.
When you first put a sheet in the printer, you’re typically printing on a white piece of paper. By adding color, you’re blocking the white wavelengths from getting through.
Then, let’s say you were to put that printed piece of paper back in the printer, and print something on it again. You’ll notice the areas that have been printed on twice tend to colors closer to black.
I find it easier to think about CMYK in terms of its corresponding numbers. CMYK works on a scale of 0 to 100. If C=100, M=100, Y=100, and K=100, you end up with a black color. But, if all four colors equal 0, you end up with true white.
color models, on the other hand, are designed for electronic displays, including computers.
RGB stands for Red, Green, Blue, and is based on the additive color model of light waves. This means, the more color you add, the closer you get towards white.
For computers, RGB is created using scales from 0 to 255. So, black would be R=0, G=0, and B=0. White would be R=255, G=255, and B=255.
When you’re creating color on a computer, your color module will usually list both RGB and CMYK numbers. In practice you can use either one to find colors, and the other color model will adjust accordingly.
However, many web programs will only give you the RGB values or a HEX code (the code assigned to color for CSS and HTML). So, if you’re designing digital images, RGB is probably your best bet for choosing colors.