Choosing a Color Scheme for your Website that doesn't suck

on Web Design

 

Even though it's all around us, most of us simply don't spend a lot of time thinking about color, do we?

Sure, you knew you wanted the flirty blue car, not the puke brown one, when you toured the dealership. You knew you wanted lollypop - nay, Little Mermaid - red hair two years ago. (How'd that work out, btw?)

You might have bickered fondly with your partner over whether BUTTER yellow or DAISY yellow is the right choice for the kitchen. Good grief.

So when it comes down to your website - your online brand, your virtual handshake, your digital expression of yourself - how do you choose your color palette? Most of the time picking just ONE color is enough to stall progress. 

 

Color is a science, really.

English physicist and mathematician Isaac Newton discovered in the 1660's that by passing light through a prism he could identify the 7 colors that make up the visible spectrum: red, orange, yellow, green, blue, indigo, and violet. He invented the color wheel, to show the progression of colors, like so:

 

colorwheel.png

... And you better thank your lucky phone case he did, because the color wheel is exactly the tool you need to make smart choices about putting colors together for your website.

There are 3 main color schemes that will best guide you in the design and creation of your website: analagous color schemes, monochromatic color schemes and triadic color schemes.

Each will bring a different "vibe" or drive a certain look for your website.


An ANALOGOUS color scheme is composed of colors that are next to each other on the wheel, with one being the dominant color. It looks like this:

analagous.jpgThe dominant color (in the middle) should be your main color, and the others can be used to highlight other parts of your site, like in a menu or to draw the eye to an important section.

 

A MONOCHROMATIC color scheme is built with a single color or hue, and variations of it are created with tints (adding white) or tones and shades (adding black). It looks like this:

Monochromatic.jpg

A monochromatic color scheme is good for a softer look on your site. This approach will also guarantee that you will not accidentally clash colors, and you can avoid making your site look "too busy".

 

A TRIADIC color scheme uses colors that are evenly spaced out around the color wheel, like a triangle. It looks like this:

triad.jpg

A triadic color scheme really pops. This is a high contrast, youthful design scheme and when done right, it results in a very "loud" or "juicy" website. 

 

 

Colors probably look different to everyone. 

Remember in elementary school when your brat friend told you that maybe the way he sees green is how you see blue? Then you went home and spiralled into an existential crisis wondeing if everyone actually has The Simpson's neon yellow skin, but you can't tell because your eyes are broken?


Totally not here to re-open that can of worms. The thing to remember about color perception is that there are actual provable degrees of color blindness.

8% of men (yup) and 0.5% of women worldwide cannot distinguish between different shades on the spectrum. 

Keeping this in mind can help you when you're designing your website. There are many different kinds of color blindness, but the most common is red-green (deuteranopia).

Someone with this kind of color blindness would not be able to distinguish between purple and blue, for instance. That's because their eyes can't see the red hue in the color purple. (Sucks to be them!)

The best way to avoid problems with this is not to use colored text on a colored background. Stick to white or black for your fonts.

 

Color is a psychology, sort of.

Settle down, we're not going to go off the deep end here. Blue probaly won't "cure" your strep throat, the same way orange won't make you "go crazy".  There are, however, measurable psychological effects prompted by color. 

We do know the color red creates a sense of urgency, and would be great for a call to action button. White denotes cleanliness, purity and neutrality, and would be less effective to drive sign ups or sales as a click through.

Green hints at health and money, and purple suggests wisdom, royalty and respect. Blue is relaxing, calm. Black is forceful, and suggests strength and authority.

Think about the kind of service or product you're featuring on your site, and choose a color that reflects that emotional storytelling. 


Bottom line, color is actually more simple than you think.

If you're still having a hard time deciding on what colors to use for your website, go back to basics. Take a look at any of the visual content you've amassed to include on your page. This can be video, pictures, or even apps you'll embed later. 

Pulling key colors you like from the images you are going to have on your website can really narrow it down. Are you an up-beat funky-organic popscicle maker? 

cucumber-mint-green-tea-popsicles-7.jpg

Use the bright neon green from one of your pictures and try combinations with the analogous, monochromatic or triadic schemes!


ANALOGOUS EXAMPLE:

1pop.jpg

MONOCHROMATIC EXAMPLE:

2pop.jpg

TRIADIC EXAMPLE:

3pop.jpg

Go give it a try yourself! If you play with color, consider carefully the "vibe" you want for your site and take a serious examination of your current content, you'll find the color scheme that works best for you. 

 

New Call-to-action