Color Psychology and Web Design
Since our Neanderthal forebears dragged their knuckles across the Savannah to point hairy digits at their first rainbow, color has captivated our species. In the modern era, Old Masters were willing to spend long afternoons hunched over a mortar and pestle to grind a handful of periwinkle shells and a shaving of giraffe's hoof into a color Sherwin-Williams has since re-labelled 'Ocean Sunset.'
Now, through the 21st-century technicolor splendor of an 8K flat screen LED monitor, we can view Love Island in 10,000,000 colors (It's progress, Jim, but not as we know it.) Through the control we enjoy over our websites, we have access to more colors than our distant and recent ancestors could ever have imagined.
But with the vast choice of colors now literally at our fingertips comes a need for caution. If there is a classic illustration of the concept ‘less is more’ then choosing the correct palette for your websites is surely it. Choose wisely, and success will follow. Dive into the deep end ill-prepared, and you may fade to black.
If there is a classic illustration of the concept ‘less is more’ then choosing the correct palette for your websites is surely it.
Recall what happened in home computing's distant past (1983-ish) when page processors first came along. Every cricket club secretary in the Home Counties could suddenly produce multi-colored newsletters of gothic complexity (gotta love those 8 bits of 256 colors and fonts). This resulted in finished products that none could gaze upon without turning to stone. The rule then, as now, should always have been K.I.S.S. — Keep It Simple, Stupid. A small, carefully chosen palette and one or two fonts max.
Even then, you need to choose the colors specifically suited to your desired outcome (sales, publicity, charity etc.) What works for the website owner next door may not work for you. The ostrich-feather monstrosity of a hat worn by Lady Hermione Pearl-Clutcher on Ladies' Day at Ascot may well peg the Pearl-Clutcher family as style icons for generations to come. But the same headgear may just as soon make you look like you've been caught in the blast zone of an explosion at a church jumble sale.
To ensure that the colors used in your website achieve the desired effect, you need to understand how color works in the brain. Our perception of color has evolved over evolutionary timescales. At a deep level, we associate various characteristics with unique colors. These colors subconsciously tune our perception of the world and its contents to a surprising degree, achieving positive and negative effects depending on context.
Let's take a quick scoot through some of the ways standard colors affect our senses. That way, we can better select color palettes for our web pages.
Primary colors
Red
Red is the color of lust, excitement, love and energy. Red is also the color of war, violence and danger. Just looking at the color red may cause your heart rate to rise. Useful for date night lucky pants. Not so fortunate when you're crossing a field containing a grumpy bull when you’re dressed in a bright red shirt with the tail flapping in the breeze. Works for marketing and advertising sites, mainly as an accent color to focus a visitor's attention. Take a look at how target.com uses its brand’s red color to advertise it’s deals and subtly direct your attention to important items.
Yellow
The brightest color in the spectrum. Stands for competence, happiness and optimism. If your football team racks up six defeats in a row, try wearing yellow socks to the next home game. It might just help. Yellow is also associated with cowardice and cheapness. Take care the lads don't catch you leaving your local minimart with a tin of yellow label 'best value' custard, or they might send you a white feather in the post! If you feel the urge to yellow up your website to convey happiness and optimism, please do so sparingly — any klaxons, flashing lights or Miami Vice sirens will quickly kill the mood stone dead. Ikea, famous for cheap (yet elegant) assemble-yourself furniture, makes judicious use of the color yellow amongst a heavy helping of calming blues.
Blue
Blue is for masculinity. Give your landing page the John Rambo treatment to show how hard it is. If your website has anything to do with food, remember that blue can be an appetite suppressant. It is for this reason that I’m thankful that Cinnabon decided to make heavy use of this color on their website, otherwise you might catch me on a Cinnabon subscription plan rolling down my city block like the famous glutton Augustus Gloop. Oh and I think I mentioned that blue is supposed to be calming too, which is why you see it literally everywhere.
Secondary colors
Green
The color green is known to have a harmonizing effect. It's the color of nature (and calmness as well!). Works with any web pages dealing with science, tourism or the environment. If you've just kicked off an online, green start-up business selling wind-powered draught excluders on a '3 for the price of 2' basis, this is a color you should seriously consider. Not sure how LandRover managed to grab this color for their logo, but Whole Foods Market makes better use of it anyway
Orange
CTAs work very effectively in orange. Orange draws attention. Practice restraint, however. Suppose the above-the-fold real estate of your landing page resembles an action painting created by a madman riding a butcher's bike through an upended puddle of tangerine dream undercoat ($15/liter from Crown Paints). In that case, your CTA will get washed out, and business may suffer. However, both Hooters and Nickelodeon famously use orange in their branding, which proves that the color can attract eyeballs, no matter what age you are.
Purple
Excellent color for all things astrology, yoga, healing or spiritual. Let's say your site is called 'Lost Civilisation Jewelry.' And your back story claims that your nose studs are based on an original design by the artisans of Atlantis. Using a purple backdrop on the screen will make for an enticing package (DISCLAIMER: This may not work at all, leaving your sales figures sinking faster than the Lost Continent itself. You have been warned.) It’s very kingly as well, appropriate for the navbar we see on Hallmark.com.
Neutral colors
Black
Black is the color of sophistication and luxury. Think of the secret of the Black Magic box. But it is also associated with menacing and evil. This is not necessarily a negative if you're promoting a new coven down Dorset way. The best advice where evil is concerned is don't mess with the infinite. But it's your choice at the end of the day.
White
White is the color of doctors, dentists and nurses, of course. Splash liberally around a medico-themed website for that General Hospital appeal.
Grey
A webpage the color of rainclouds can leave visitors feeling dull and detached. Then again, Fifty Shades of Grey can (allegedly) leave you feeling genuinely uplifted. Again, it's your choice.
What's the takeaway from all this? Brains evolved to perceive color and, in the process, hard-wired us to associate specific colors with certain emotions. Taking time to understand those emotions can prove a boon to anyone planning to build a website. The right color choices from the start can set you up for success before a single word of content has been written.
If you still have a hankering for creating colors in Rembrandt van Rijn style, we recommend periwinklesbythepound.com and bitsofoldgiraffe.co.uk.