May 1, 2017 Christina Snyder 12Comment
6 min read

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-sky-colors-for-your-website-sarriewebdesigns.com

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-rose-colors-for-your-website-sarriewebdesigns.com

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-leaf-colors-for-your-website-sarriewebdesigns.com

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.

bee-on-yellow-flower-colors-for-your-website-sarriewebdesigns.com

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.

putrajaya-malaysia-purple-sky-colors-for-your-website-sarriewebdesigns.com

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-cupcakes-colors-for-your-website-sarriewebdesigns.com

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-colors-for-your-website-sarriewebdesigns.com

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-rice-colors-for-your-website-sarriewebdesigns.com

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-rain-colors-for-your-website-sarriewebdesigns.com

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-snow-colors-for-your-website-sarriewebdesigns.com

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.

monochromatic-blue-color-theory-colors-for-your-website-sarriewebdesigns.com

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.

complimentary-colors-color-theory-colors-for-your-website-sarriewebdesigns.com

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.

analogous-color-color-theory-colors-for-your-website-sarriewebdesigns.com

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.

triad-color-color-theory-colors-for-your-website-sarriewebdesigns.com

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.

Need a web designer?  Hire me!  Christina Snyder - Sarrie Web Designs

12 thoughts on “How to select the perfect colors for your website

  1. This is such a useful post, I really think colours can help your mood and say so much about you, I love using purple and green together

  2. Color choices for a central theme and then content creation is such a challenge for many. Love the way you simplified this without losing any of the key points. We recently did a design presentation for entrepreneurs and color was a key Q for many.

  3. This is super interesting!! I could look at colors all day. Thanks for laying everything out in simple but detailed terms. It makes perfect sense. 🙂

Tell me your thoughts!