Color Theory 101: Color Functions

Corey — Sat, 07 Mar 2009 19:29:58 +0000

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.

Color Theory 101: Color Schemes

Corey — Mon, 02 Mar 2009 20:05:18 +0000

How do you determine your color scheme?

Picking a color scheme can be easier than you think. In most cases, it’s just a matter of picking colors that correspond with what’s pleasing to the eye. However, learning basic color theory can be hard if you don’t have the eye for it. Try these exercises to increase your sight abilities:

Pick your favorite colorful shirt and see if you can’t see a color scheme.
Pick out the colors in a book cover.
Try to find the color scheme of your wallpaper or room.
(Advanced) Pick your two favorite colors and put them on a white background. Decide which would look better for links, and which better for headers.

Another great tip for picking a color scheme is to choose colors by their meanings. Using color meanings to your advantage can help you solidify your message when visitors appear. Remember to use colors that symbolize the right things. You don’t want to give off the wrong impression.

Diligent has a laid back kind of feel, and blue is a calming color. In this way, I’m solidifying my more casual approach. In addition, green symbolizes growth, and the green headers and influences are there to remind the visitor that they’re trying to grow their sites. In this way, the meanings of colors solidify the blog’s message.

Color Scheme Inspiration

You can take color schemes from everyday life, and the guys from Build !nternet are ready with color scheme inspirations. Here are some posts you should check out:

Color Tools

There are various tools out there that will also help you when picking color schemes. Here are two of my favorites:

Three Additional Tips for Choosing a Color Scheme

Don’t pick too many colors.
Keep contrary and contrasting colors in mind.
Remember that colors have functions. Think in terms of usability.

What are your tips for picking a color scheme? Do you find picking a scheme difficult? Share your tips below.