The Visual Effect of Color in Your Designs

Using colors that don’t work well together, using too many colors, or even not enough could drive people away before they have a chance to absorb your content. Ideally you should plan and choose a color scheme from the start and you should be consistent in how you use color in your design.

Color is used to attract attention, group related elements, convey meaning, and generally enhance the aesthetics of your site. It can be used to organize your elements and create a visual hierarchy in your design.

A small dose of color that contrasts with your main color will draw attention. It will give emphasis. Repeating colors on elements like page headings gives an immediate visual cue that those headings are related.

Warmer colors advance into the foreground while cooler colors recede into the background. Your choice in warm and cool colors can affect the figure/ground relationship of your elements. Since cooler colors recede you may decide to use them for background elements and because warmed colors advance they make a good choice for elements in the foreground.

By mixing warm and cool colors you can create depth in your design. Consider Van Gogh’s Cornfield with Cypress above. Color is not the only way Van Gogh gives depth to the painting, but notice how the colors add to the depth. The mountains, sky and clouds use cooler colors, while the cornfield uses warmer colors.

You might choose a warmer color for the type on top on an image to ensure it’s seen. Naturally it depends on the colors in the image as it will be more important to make sure the text color contrasts.

Darker colors tend to be seen first and carry more visual weight. A larger area of a lighter color is necessary to balance the visual weight.

Highly saturated colors (pure hues) are perceived as more dynamic. They attract attention. Too many saturated colors can compete and cause eye fatigue. Desaturated colors lend themselves to performance and efficiency. They might be a better choice to help people complete a specific task. Desaturated/Bright colors are perceived as friendly and professional. Desaturated/Dark colors are seen as serious and professional.

Be careful about using too many colors. You want to limit colors in the same way you limit fonts. You need enough to be able to offer contrast, but not too much to lack similarity. 5 colors is generally a good maximum, though you can use more. The more colors you use the harder it will be to use them effectively.

Create mood through color

Want to know what colors are associated with which types of feelings? Here’s a handy guide:

• Red – Warm, electric, energizing. Great as an accent for creating movement.
• Blue – Calming, strength, professional. Sites for travel or relaxation work well with this shade.
• Yellow – Exciting and electric. Too much can cause distraction on a site, so use it for accents.
• Orange – Electric; however, browsers display this shade differently so stick with it as an accent. Green – Cool, calming, professional; great for sites referring to nature, finances, business.
• Black – Strength and power. While black has been used as a main color in web design, it can also be straining to a reader’s eyes.
• Gray – Can be used for strength, calmness, power, authority. Great shade to incorporate with most other colors; gray is used a lot in web design today.
• White – Though it may seem an unnecessary color in web design, don’t forget what we said about white, or negative, space. Your readers need some white areas so the rest of the site comes into focus. Without this white space, your likely to overwhelm your readers, and they will likely turn away.

Warm Colors: For the sake of simplicity let’s define warm colors as red, orange and yellow. These are the colors of fire. They radiate warmth. Warm colors are more often associated with passion, energy, impulsiveness, happiness, coziness, and comfort. They draw attention and have the advantage of being inviting and harmonious.

Cool Colors: Again for the sake of simplicity let’s define cool colors as green, blue, and violet. These are the colors of water. Cool colors are more often associated with calm, trust, and professionalism. The are also associated with sadness and melancholy. The have the advantage of being professional and harmonious, but can also turn people off by the coolness they radiate.

Note: The demarcation point between warm and cool colors falls somewhere between yellow/green and violate red. Green and purple don’t fall neatly into either warm or cool camps. The tend to take on the properties of one or the other based on the surrounding context.