Sometimes the toughest step in building a new website or redesign can be the conceptual ones. Selecting a color palette is one of them that can be tough if you don’t have the right tools. So where do you start?
It all comes down to basic color theory and the color wheel. That same tool that teachers used in school really is the basis for how designers plan and use color in almost every project from the simplest web page to expansive brands with multiple sites and campaigns.
Basic Color Theory
Scientifically speaking, color is the visual presence of light in different wavelengths and relates to how these wavelengths are absorbed or reflected. Total absorption of wavelengths results in no color (black) while complete reflection results in white. Anything in between creates a color.
The most common way we, as designers identify color is by name. But we also use other methods as well as they relate to how color is being used – think about color names as CMYK, RGB or HEX values. Most commonly color is categorized using the color wheel, the most common platform for color theory.
The color wheel is a circle dating to the days of Sir Isaac Newton in the late 1600s. It is used by scientists, artists and designers to help understand and explain color and color pairings. The basic wheel contains 12 colors – three primary colors, three secondary colors and six tertiary colors — in a logically arrange format. The wheel is used from everything from choosing what color to paint a house to art to web design.
The expanded color wheel, which is the basis for most RGB color pickers in design software, is an extension of the basic wheel. Colors are grouped in the same way, the difference is the inclusion of white, and subsequently tints, on the wheel.
Red, yellow and blue are primary colors.
Primary colors are the basis for the entire color spectrum. All other colors are created by mixing combinations of these hues. Conversely, no combinations of color can be used to create a primary color. They, in essence, exist as a base for every other color.
Green, orange and violet (purple) are secondary colors.
Secondary colors are formed when two primary colors are mixed in even amounts. Each secondary color falls between the primary colors used to create it on the color wheel.
Yellow-orange, red-orange, red-violet, blue-violet, blue-green and yellow-green are tertiary colors.
Tertiary colors are formed by combining primary and secondary colors equally. The names of tertiary colors are derived from a combination of the colors used to create them. The primary color name is first, followed by the secondary color. The color is located clockwise from the primary color it contains.
Different Types of Color Schemes
There are several basic types of color matching based on the color wheel. Sticking to one of these three themes will almost guarantee a successful color palette.
Complementary colors are those that are opposites on the color wheel. This applies to primary, secondary, tertiary colors and variants of each. Complementary color schemes use opposing colors to create a great deal of contrast and impact. These color combinations also create feelings of stability. Some designers like to add a third color for accent purposes by implementing and split-complementary scheme, using one base color and two adjacent colors as accents. Split-complementary schemes are rather simple to create and have a more harmonious feel than a straight complementary color scheme.
Analogous colors are located side-by-side on the color wheel. Analogous schemes can use two, three or even four adjoining hues to create a palette of balanced color. Analogous color schemes are popular because the color combinations often mirror colors seen together in nature. Think about the colors of a common houseplant for example, with green stems and lighter green (yellow-green) and yellow leaves. When using this type of color palette, designers frequently opt to make one color more dominant in the design than the others.
Triad color outlines use three colors that are evenly spaced on the color wheel. This is one of the least common methods for creating a color palette because colors can sometimes be difficult to balance with so many bright hues. To ensure success, pick one color as a dominant hue and use two accent colors.