Close your eyes and picture a logo. Any logo. What do you first remember about it? The shape of the letters and typography? The way it popped? Chances are, before your mind can accurately recall what the logo looks like, you’ll remember the color scheme first.
Every year businesses spend thousands on research into marketing studies and investigating designs that will make their business name, logo, or website pop. Sometimes it boils down to one simple aspect – the color. The power of sight can change perceptions in an instant, from the way we trust a person, to how we feel and how we act.
Today, we’ll explore some basic perceptions of the color wheel and how you can apply these concepts to your website design to ensure readability but also reader retention.
The Perception of Colors
It’s been said before that each color can be associated with an emotion or perception. Red can mean anger, blue for sadness, green for hope, etc. There’s a myriad of studies available out there to determine the right paint to pick for your living room, or what the color of your car can tell about your personality, and the same psychology can be applied to your web design. From the background image to the color of your action buttons, the average viewer of your site can be enticed into taking action simply based on the colors you choose.
But first, below are a list of perceptions associated with different colors to get started. I’ve also added a list of businesses often associated with each color.
|Red||Passion, drama, power, adventure, excitement, energy||Netflix, Coca Cola, Target, Nintendo|
|Orange||Cheerfulness, confidence, whimsy, spontaneity, active||Nickelodeon, Amazon, Home Depot, Food Network|
|Yellow||Joy, illumination, friendliness, stimulation, awareness||McDonalds, Best Buy, IMDb, National Geographic, Sprint|
|Green||Nature, refreshment, fertility, health, life, reassurance||Animal Planet, Spotify, Starbucks, H&R Block, John Deere|
|Blue||Calm, beauty, tranquility, transcendence, trust||Facebook, PayPal, HP, AT&T, Oral-B|
|Purple||Royalty, exclusivity, distant, visionary, contemplative||Yahoo!, SyFy, FedEx, Hallmark, Cadbury|
|Pink||Flirtatiousness, playful, high-energy, soft, innocent||Barbie, Victoria’s Secret, Hello Kitty, T-Mobile|
|Brown||Robust, delicious, enriching||UPS, Brown Bag Seafood, Hershey|
|Black||Luxurious, elegance, mystery, bold, stylish||Adidas, Oakland Raiders, Converse, Puma|
|Silver||Classic, timeless, responsible, sophisticated||Apple, Swarovski, Audi, Mercedes Benz|
Do you agree with the list above? Every day you’re surrounded with logos and it’s not unusual to now associate certain companies with specific colors. You can even feel certain emotions just by thinking of these different colors.
But you may be asking yourself, okay but what does this have to do with my website? When it comes to designing the color scheme of your website, the right color can convey feelings of friendliness, luxury, and urgency simply by using color. If the homepage of your website was blurred, would your readers be able to distinguish certain features by color alone? To learn more about this in-depth let’s take a look at color palettes.
What Are Color Palettes?
While the temptation might be to slosh a rainbow of colors all over your site, this can easily be convoluting and frustrating to the reader. There would be no way to tell what links were important or which information they should read first. It’s more likely they’ll run screaming from your site rather than explore further.
Color palettes are a specific group of colors that are present in your design. Typically it’s a group of five or less contrasting colors, but contrasts that aren’t an eyesore. While mixing opposites like yellow and purple can definitely bring some pop, a site done completely in bright yellow and purple will be an eyesore. However, mix the yellow and purple with more neutral colors like lavender, butter yellow, or white, and you come up with something a little more readable.
Types of Color Palettes
Monochromatic — This color palette entails different shades of one color or hue. For example, if you choose blue the monochromatic palette could include a range from royal blue to powder blue, but no standout colors like red or yellow in sight.
Analogous — If you take a look at a color wheel, analogous colors entail the colors that are next to each other on the wheel. For example on a 12-color wheel, your five colors could be blue, blue-green, green, green-yellow, to yellow.
Complementary — This is where our yellow and purple example comes in. Complementary palette means pulling colors from opposite sides of the color wheel: purple with yellow, green with red, blue with orange, etc. By adjusting the tints and shades of each, you can come up with a five color palette that is eye-catching but not over the top.
Triadic — Similarly to complementary, triadic color palettes pull colors from three opposite sides of the color wheel. For example, violet, orange, and green. Mix and match the tints and shades to come up with a pleasing range.
To try out some practice palettes, check out the interactive color wheel on Adobe Color CC.
Picking the Best Colors
So you’ve finally picked your color palette! Now it’s time to talk about placement of color on the web page. Keep in mind your awareness of what’s in the background and foreground. Background colors should not wash out the colors in the foreground. Likewise any images in the background should not make reading the text difficult. It’s all about complementing to make certain features pop out.
If your background is a darker color, contrast it with a lighter text or vice versa. Highlight important information in shapes of a more urgent color, such as red, orange or yellow. If you have links and buttons on your homepage, juxtapose the colors of the links with the background so they stand out.
Here’s an optional tip — design your page from the view of someone with blurred vision or imagine if there’s no text. Will the reader be able to see what color your buttons and links are? Can they tell when a portion of the text is highlighted? Is the color too garish and hurts the eyes? These are the kinds of questions to keep in mind when coloring your website. Ask for opinions as well. Get as many eyes on your site as possible to test its readability.
Color Me Conscious!
Thanks for reading and going on this journey through the color wheel. Now that you’re armed with this new knowledge, explore your options when it comes to designing your website. Be conscious of how you contrast your logo, text, and background colors so that they contrast but complement each other as well. Understand your colors and what emotion you want to portray and you’ll go far.