How to select the perfect colors for your website

Selecting the perfect colors for your website can be intimidating but fear not, I’m going to help you through it.

Where to Start

When I start a web design project with a new client, the first step is always a questionnaire. The questionnaire doesn’t just give me insight to the client’s industry and background but helps me pair the client’s style to an appropriate color scheme and style for their website.

The color scheme isn’t just a handful of colors that look good together. It’s much deeper than that.  The colors for your website are chosen deliberately and have purpose and help move a user’s eye through your site, directing users around the website.

It’s been proven that colors evoke specific emotions in consumers. Imagine going to a daycare’s website and the color palette consisted of black and white with red details. Would you invest more time into navigating around the site or venture to the next search result done in bright playful colors?

Choosing the right dominant colors for your website is crucial.  And the color should appear on all your promotional materials, not just your website. The color you choose should set you apart, work with your industry and image, and tie to your brand together. It should also take into account color psychology.

Color Psychology

Blue

Cool blue is perceived as trustworthy, dependable, fiscally responsible and secure. Strongly associated with the sky and sea, blue is serene and well-liked by both men and women. Blue is an especially popular color with corporate businesses and financial institutions, as its message of stability inspires trust.

 Although a cool shade can bring about the negative side of blue, symbolizing depression, coldness, and passiveness.

Red

Red is aggressive, energetic, provocative and attention-grabbing. Count on red to evoke a passionate response, although not always a favorable one.

For example, red can represent rage, anger, and emergency.

Green

Green connotes health, freshness and serenity. People feel safe with green. Hospitals often use the color of green.

Deeper greens are associated with wealth or prestige, while light greens are calming.

Yellow

Bright yellow is a happy color and is associated with the sun. Thus, it communicates optimism, positivism, light and warmth.

Certain shades seem to motivate and stimulate creative thought and energy.

But a dingy yellow brings about negative feelings: caution, criticism, and laziness.

Purple

Purple is a color favored by creative types.

With its blend of passionate red and tranquil blue, it evokes mystery, sophistication, spirituality and royalty.

Lavender evokes nostalgia and sentimentality.

Pink

Pink’s message varies by intensity.

Hot pink conveys energy, youthfulness, fun and excitement.  Dusty pinks appear sentimental. Lighter pinks can be more romantic.

Orange

Cheerful orange evokes exuberance, fun and vitality.

With the drama of red plus the cheer of yellow, orange is viewed as gregarious and often childlike. 

Brown

This earthy color conveys simplicity, durability and stability.

It can also elicit a negative response from consumers who relate to it as dirty. 

Black

Black is serious, bold, powerful and classic. It creates drama and connotes sophistication.  

Black can also be seen negatively because it is associated with death, mystery and the unknown, making it important the color must be used wisely.

White

White connotes simplicity, cleanliness and purity. The human eye views white as a brilliant color, so it immediately catches the eye in signage. Infant and health-related products are often associated with white.  

Conversely, white can be seen as cold and distant, symbolizing winter’s harsh and bitter qualities.

Color Theory

Now that you used color psychology to select your primary color for your website, we will use color theory to create our color palette.

A basic color wheel contains the 12 standard colors used to create color schemes. Each slice of the pie represents a family of colors that can be achieved with different saturation, hues, tints, shades, and mixes of neighboring colors. The combination colors (e.g., yellow-orange) result from mixing equal amounts of the base hues (yellow and orange).

Web Designers use the color wheel to choose the color schemes, derived from the primary color selection.

1.  Monochromatic

A monochrome color scheme consists of various tints, shades, and saturation of a single base color. Monochromatic hues very cohesive, but run the risk of becoming monotonous.

2.  Complementary

Two colors from opposite sides of the color wheel are known as complementary colors.  The two hues will be wildly different and create maximum contrast and maximum stability.  Such schemes are known for a big impact and notability.

3.  Analogous

Analogous schemes feature three colors that sit next to each other on the color wheel. Because of the tonal similarities, these schemes can create a very cohesive, unified feel, without the monotony of a monochrome scheme.

4. Triad

To make a triad color scheme, draw an equilateral triangle (a triangle where all three sides are the same length) on the color wheel.  Select the three colors at the points of the triangle. This creates a diverse, yet balanced, scheme.

Color Tools and Resources

With all the complexity and flexibility designing with color offers, it should come as no surprise that designers have built an array of tools to help with picking the perfect colors for your website. Here are just a couple of my favorites.

Adobe Color CC (Kuler)

Adobe Color CC is aimed at providing an intuitive way to create a color palette. With a few simple clicks, every color on the palette can be individually modified, or chosen as the base color..  Color CC also has a social layer built-in, so you can explore others’ palettes. One of the most useful features of the website is the ability to extract a color scheme right from an image.

Colourcode

This tool is a simpler, more basic, color discovery tool.  Visitors can select preset modes for color schemes and use their mouse to explore various hues, shades, and tones by navigating from the top, bottom, left, and right.  The color schemes can be exported as .scss, .less, an image files or as a permalink.