Color theory is basically how colors work together and what effects they produce when placed within an arrangement. It’s important to know how colors work together in order to understand color in real life. By understanding the many combinations and subtle variants of color in our world, we can use that to create complex and compelling design schemes.
For example, look at your skin. The predominant color can be dark brown, umber, sepia, peach, beige, or cream- but that’s not all the color that is in your skin. All skin types can have undertones of rich violets, shades of ocher or olive, a wash of scarlet, or a tint of mauve. No person’s skin is exactly one color and the combinations are endless of how colors work to form what you see in the mirror every day.
Now apply that to everything around you. A green plant can have purple shadows within its leaves; the blue ocean is flecked with light yellow shimmers; the fading sunset is a symphony of orange and purple, etc. Colors working in tandem to help bring forth a richer, more fascinating experience is what artists and designers study under the term “color theory”.
To start off, let’s look at the artistic side and nail down the basics.
The basic color wheel
With the exception of grey-scale, there are 3 basic colors that, like scientific elements from the periodic table, cannot be broken down into any other colors. They are called primary colors and consist of red, yellow, and blue. These three colors combine to form all other colors.
Secondary colors are created when two of the three primary colors are combined in equal measure. They are as follows:
Blue + Yellow = Green
Yellow + Red = Orange
Red + Blue = Violet
These six colors can be used to illustrate the basics of how colors work together.
Complementary colors are colors that are opposite to each other on the color wheel. These two colors are a secondary color and the primary color that was not present in the creation of the aforementioned secondary color.
Example: Orange and Blue are complementary colors.
Complementary colors resonate with each other because they are opposites and often increase each other’s brightness when placed against the other. However, when complementary colors are overlapped they tend to dull the color being overlapped.
Analogues colors are colors that appear next to each other on the color wheel.
Example: Blue and Green are analogues colors.
Since Analogues colors share a base color, they blend well without dulling to create harmony and union in a design. However, they won’t provide any sharp contrast.
The extended color wheel
Tertiary colors are what happens when an unequal balance of primary colors are combined or when a secondary color is combined again with one of its primary color bases.
Example: 75% of Yellow + 25% of Blue = Yellow Green
Example: Red + Orange = Red Orange
Tertiary colors are named with the primary color base first followed by the secondary color. They are as follows:
Red Orange, Yellow Orange, Yellow Green, Blue Green, Blue Violet, Red Violet
From here, subtle mixes of color can create many different color variants.
The neutrals and color variations
Once you’re familiar with the above, you’ll notice that the neutral colors have been left out. Neutral colors are colors that do not appear naturally on the color wheel such as black, white, grey and brown.
Browns and an intro to hues
So what happens when all the primary colors are mixed together? That doesn’t happen on the color wheel! Well, the resulting color is brown or a murky colored grey depending on the formula.
1/3 Red + 1/3 Yellow + 1/3 Blue = Grey
1/4 Red + 1/4 Yellow + 1/2 Blue = Brown
Let’s look at brown. It’s a base color that gains more depth when mixed again with a primary or secondary color. The ideal way to create brown would be to mix complementary colors, such as orange and blue, in equal measure. This would create a color that most of us would call “brown”. Mixing yellow and violet would create a more yellowish brown while red and green would come together for a more ruddy brown.
A color can be pushed into multiple variations by mixing in more primary, secondary, or tertiary colors. By mixing, and introducing, colors over and over again, hues are created of the main color.
Example: Mixing brown with more yellow and orange based colors will produce ocher (which is considered a hue of its main color of brown).
Usually we refer to a color as a hue of whichever primary or secondary color is most prevalent, but in art the word “hue” can take on a slightly different meaning. In art, a hue is a pure color—one without any tint or shade. In other words, a color without white or black added to give depth.
The greyscale and values
Any science enthusiast will tell you that color is transmitted in light waves and that what you see as color is actually the object in front of you absorbing and reflecting varying amounts of certain light waves. This is most epitomized in the colors black and white.
White is the presence of all color- in other words, all colors are being reflected to you.
Black is the absence of all color- when all colors are absorbed and none are reflected.
The mixing of these two colors results in what is called the greyscale with the color grey being the equal mixture of black and white.
When applying a hue to the greyscale it creates values of that hue, illustrating how the tint (white) or shade (black) of a color appears.
Saturation and lightness
Now that we’ve established our rather large and complex range of color, it’s time to consider the intensity of a color in what is termed saturation. This is accomplished with the help of the color grey which, when mixed, tends to dull a hue. A pure color, with absolutely no grey added, is at 100% saturation while 0% saturation will result in pure grey.
Saturation of the color #00AE4F
Lightness is another way to describe the value of a color- in other words, how much black or white is added to the color. By applying color to the greyscale we can see the darkness-lightness of a color.
Working with saturation and lightness helps to create contrast in design and allows the eye to flow freely from element to element. A design without such contrast is stressful to the eye because there are neither resting places nor obvious guides for how one differentiates the colors before them.
Color display on devices
Now that we’ve looked at the colors themselves, it’s time to consider how they display within the web and on the computer. In the print world, the most popular way to get a consistent color is by using pantone color codes and work in a CMYK format of color. CMYK stands for Cyan, Magenta, Yellow, and Key (black) which is the process printers use to generate color and is more in line with the color wheel.
Your monitor however works in RGB (Red, Green, Blue), which is a different system based on how light works, and therefore uses different codes such as Hex Code (#98FB98) or Decimal Code (#152, 251, 152). The RGB color model is additive, i.e. when the three light beams of the aforementioned colors are added together the wavelengths are able to make the final color’s spectrum. The codes tell how much red, green, and blue are used by breaking it up like so:
Red in hex code is #FF0000. Broken down this means FF (full saturation red) 00 (no green) 00 (no blue).
Red in decimal code is #255,0,0. Broken down this means 255 (full saturation red), 0 (no green), 0 (no blue).
In hex code, “0” is the degree of black in the color while “F” is the degree of saturation. The scale from dark to light will look like so: 0 1 2 3 4 5 6 7 8 9 A B C D E F.
In decimal code, “0” is still the degree of black, but no letters are used and thus full saturation is “255”, meaning the scale from dark to light is a numerical range from 0 to 255.
Color on your screen: computers, tablets, and phones
All screens are composed of this formula of red, green, and blue in the form of pixels- which are small dots on your monitor that makes up a screen’s display resolution. Since your screen works based off the light system, when you take a picture of it from certain distances, the pixels on screen will show up in a banding wave across the screen.
#F3F0C5 #DFCE9A #867442
Different screens can display the same color differently based on the individual screen’s settings. One way to help minimize this difference is to make sure all monitors that are being used are calibrated by adjusting the screen color, contrast, and brightness settings. However, it’s impossible to control every monitor in the world so this will only go so far. It’s important to keep in mind that a design’s colors will probably look slightly different on someone else’s monitor at some time or another.
Color in your browser: IE, Firefox, Chrome, Safari, and Opera
Let’s select a few simple colors to show the variations of the same exact color from within a browser.
Light Sea Green #20B2AA
Deviations from the correct hex code are highlighted in red. Both colors have warped by a factor of at least 1 in all browsers. This slight variation doesn’t create too much of an issue until screen settings come into play. Brightness and contrast control vary on many screens and this can cause problems if a designer isn’t careful.
Color in design
Now that we’ve got all the basics down, let’s get into the design aspect. In order to help with choosing a color scheme, systems have been created which hearken back to the fundamentals of complementary and analogues color relations.
A monochromatic color scheme consists of different values of one single color. The upside of the monochromatic color scheme is that it will always be unified and no color will appear out of place. An obstacle, however, is making sure there is enough contrast so that all the design elements are visible.
The best way to achieve contrast is to make sure the colors of a design’s main features far enough apart on the value scale- such as the two ends. When using too much of the middle colors, a design can become muddy and badly defined. Picking a light color and a dark color off the scale, and then working with the adjacent shades or tints, will provide contrast and keep the design fresh.
Triadic color scheme
Triad color schemes are made up of three colors equally spaced apart on the color wheel. Considering the equal distance requirement, there are also 3 sub-schemes that fit within the triadic umbrella: primary, secondary, and tertiary.
primary color scheme secondary color scheme tertiary color scheme
A primary color scheme consists of the three primary colors and their tints, shades, and tones. Because of the strong contrast of these colors, a strong neutral, such as white or black, is usually added as a base while the primaries are used as secondary or accent colors.
A secondary color scheme consists of the three secondary colors and their tints, shades, and tones. Like primary colors, secondary colors are also strong but, by varying the value, they are able to flow together much easier because they will always share a base color.
A tertiary color scheme consists of three tertiary colors and their tints, shades, and tones. As there are 6 tertiary colors, this leads to 2 different color schemes:
- blue-green, yellow-orange, and red-violet
- yellow-green, blue-violet, and red-orange
All of the above color schemes, with full saturation, do well with young children because of the vibrancy and contrast created by having the colors equal lengths apart on the wheel. To create a more adult feel, lower the saturation to decrease the vibrancy and use them in conjunction with a strong neutral to even out the contrast and create harmony.
Analogous colors schemes consist of colors that are adjacent to each other on the color wheel. Because of their proximity, all of the colors are guaranteed to match and behave harmoniously in a design. However, their close proximity can also cause analogues schemes to run into the same contrast problem as monochromatic schemes.
There are two methods of designing with an analogues scheme: designate a primary color and use the other two as accents or make full use of the blending capabilities and bring in a neutral to heighten the contrast.
Complementary color scheme
Complementary colors are directly opposite each other on the color wheel and tend to have the highest contrast. This creates an energetic and vibrant look that attracts attention, but can overwhelm the viewer in large quantities.
When working with complementary colors, choose one of the colors as the main color and use the other for an accent. Another option is to select a neutral for the main color and use the complementary colors as accents. The trick is to make sure the contrast doesn’t overwhelm or strain the eye. By minimizing one color or both, restful areas will be created and reduce eye strain.
Split-analogous color scheme
A split-analogous color scheme is comprised of a main color and two colors one space away from it on the color wheel. This selection generally consists of a primary and its two secondary colors or a secondary and its two primaries.
Like analogues, these schemes tend to blend well and are easy to design with because of their proximity to each other on the color wheel. However, unlike analogues, they are far enough away to have a good contrast and can provide a nice base. Throw in a neutral as an accent and/or text color and these designs schemes will always come through.
Split-complementary color scheme
A split complementary color scheme includes a main color and the two colors on each side of its complementary color on the color wheel. This is a favorite of designers because two of the colors will harmonize (because of their proximity), while the third color creates contrast.
In these designs, it’s best to start off thinking about a complementary scheme (colors directly opposite each other) and deciding which color is preferred for the base and which for the accent. At this point, it will be clear which color needs to be split into its neighbor colors to help refine the design.
Tetradic color scheme
The tetradic color scheme uses four colors arranged into two complementary pairs. This color scheme offers plenty of possibilities for variation, but can also become busy and chaotic very quickly.
When designing with a tetradic scheme, choose a base color first and the other colors will be accents. The main color can be broken down into values to further help solidify the base of the design and decrease eyestrain. Another way to achieve this is to use all of the colors as accents and simply have the base be a neutral color.
Neutral color scheme
A neutral color scheme includes only colors not found on the color wheel. These color schemes strive to not be the primary focus of the viewer, but to instead direct them to content. Pictures will often be the main source of color in these schemes and, thanks to the neutrality of the site, will not clash with the site itself.
The only issue is that neutral color schemes can also be monochrome color schemes and the issue of contrast can raise its head in those situations.
Accented neutral color scheme
An accented color scheme has all the advantages of a neutral scheme, but allows for contrast by bringing in a color. This color will often be the thing that draws the eye, making it perfect as an accent color for important elements on the page. This is the easiest color scheme to design, as your one color will always be your accent color.
The only concern is using the color too much and creating a chaotic flow about the page. Use the color sparingly to highlight elements that the viewer absolutely needs to see.