Adding Colour to your website
The ascetics of the site are important, the overall perception, mood or style of the business can be judged very quickly by your visitors. Does the colour the matter? How is decided on? We thought this was an engaging article. See what you think!

How do you design a color scheme for your website that won’t tear the retinas from your visitor’s eyeballs?

Enjoyment of color is a subjective thing but there are some rules you can follow to make your web pages look good to the majority of people. Green writing on a red background? Don’t even go there. Yellow on orange? Might as well title the page ‘No point trying to read this – you’ll never make it to the end’. Anything on yellow? Maybe not…

The Color Wheel

At the heart of every color related lies the color wheel. The color wheel illustrates the relationship between the primary colors – red, yellow and blue – and the secondary colors – green, orange and purple. When you mix two primary colors you get a secondary color. On the color wheel, each secondary color is placed between the two primary colors which are mixed to produce the secondary – for example, when you mix yellow and blue, you get green, therefore green is to be found between yellow and blue on the color wheel.

Colors which sit opposite each other on the color wheel are opposite or ‘complementary’ colors. So, for example, green is a complement of red. Complementary colors balance each other – if you have too much red showing on a page, green can offset it. But red writing on green or green writing is a big no-no. Remember the old saying (even if you’ve never heard it before), ‘Red and green should never be seen, unless there’s a color in between.’ Of course, if you have a cunning eye for design then such rules can be broken, but for the less visually adept, avoiding green and red combinations is a good thing.

Contrasting colors are similar to complementary colors. Black and white is the most obvious contrasting colors and makes the most legible combination of colors (even if, strictly speaking, black and white are not colors). However, other color combinations can work well – it just takes some experimenting to produce a good result. The color wheel can help – find the color you want, move directly opposite and then pick the color to the left or right of the directly opposing color for a good contrasting color.

Designing a color combination for a web page means getting the background color to work with the color of text, links and visited links. Achieving a good color balance of colors means working in good contrasting or complementary hues, while making sure the text is clear and easy to read. As a general rule of thumb, try to choose one color which links the pages of your website in one way and mark your different sections with contrasting colors.

Setting the Mood

Bear in mind that different colors evoke different feelings and moods. There are warm colors – red and oranges, for example – and colder colors – blues and greens. The mood of a color can change according to the value and saturation of the hue. Cold colors are not necessary unfriendly; they are often seen as peaceful, relaxing shades – for example, a cool, soft aqua can be reminiscent of a Caribbean sea.

Try to choose colors that reflect your subject matter. If you’re selling groovy retro lava lamps, for example, you wouldn’t choose to design a site in natural, earth brown and green hues. A human rights sight isn’t going to saturate its pages with bold, intense colors when it’s informing you of atrocities around the world. And it’s no accident that news sites ensure legibility by having black text on white.

Just as there’s a font to suit your needs, so there’s a color just right for your website. Get your hands dirty with a paint program and experiment with the color palette. Open up a new image that nearly fills your screen and fill it with color as you mix and match. It’s the modern day equivalent of wielding a paintbrush and playing with paint.

Mix hard, have fun and watch you don’t splatter drops on your new shirt.