Color Theory 101: Color Functions

Colors can serve various functions in graphic and web design. For this reason, color is always an important part of graphically oriented designs, and in some cases, of minimal designs. The various functions that colors can serve in your design include:

• background
• interactive elements
• emphasized elements
• de-emphasized elements

Background Colors

The most basic function of color in a design is to serve as background. The background color is generally the lightest or darkest color in your scheme. In most cases, your background color should be the basis for all other colors in your scheme, including both complimentary and contrasting colors. It’s important to remember that even in the case of more complex backgrounds, there is always a base color that leads the design.

Interactive Elements

Interactive elements include logos, links, buttons, and other such design elements. Interactive design elements will usually have a color that contrasts with the background. On a white background, almost any primary color could be used for an interactive element (which is why the default color for hyperlinks is blue.) Generally, interactive elements will have the brightest, most saturated color in the scheme. Remember to use interactive colors sparingly. Too many contrasting colors can throw off your scheme.

Emphasized Elements

Elements in a design which should be emphasized generally involve using complimentary colors to draw the eye to the area. On Diligent, the bright white gradient is meant to draw your eye to the content. Emphasized elements will generally comprise of the main content of your design. The colors within emphasized elements are usually the third lightest or third darkest colors in your scheme.

De-Emphasized Elements

Elements in a design which should be noticeable, but not necessarily primary are called de-emphasized elements. These usually involve complimentary colors that blend in with the background of the design, with a slight contrast to separate content. On Diligent, the sidebar is not immediately noticeable, but it does not completely fade into the background either. The colors within de-emphasized elements are generally the second lightest and second darkest colors in the scheme.

Other Color Functions

Colors can be used for a variety of purposes within a design. Some other color functions include:

• flourishes
• header graphics
• separate content areas
• emphasize multiple content elements
• typography
• typography flourishes

What is your take on color functions? How do you use color within your designs?

No related posts.