Color Symbolism in Web Design

Back in the ’70s, I studied the Psychology of Color with Tom Porter a Fellow at Oxford Brookes University and Byron Mikellides, a professor at Oxford Brookes University. Their book the Color for Architecture was groundbreaking at that time.

Color in design permeates all things we touch and see from Architecture to packaging and websites.

The psychology of color influences our choices and perceptions; for example, dark red is a warning that says stop, danger. After years of signage that tells us to stop, we are conditioned to see red as "danger;" but not all reds are dangerous.

As an example, many architects abbreviate their company names in red SBD or HLN the type of hue and tone of the color combined with its vibrancy, lightness, and quantity may excite us with power passion and energy.

We associate light green with fresh, wholesome food and produce; we are conditioned to react without even knowing why. Pavlov’s theory applied to humans; for example, if we see food eaten in a TV commercial, we feel hungry and crave food.

Color and its use are an essential element of web design. Color along with the images and copy need to tell the story and create the look for the first impression.

What we need to think about when creating the look of a website; different colors have different meanings – cultural, instinctual, universal, and more – and can stimulate different people in different ways.

Visitors might not notice the impact that using the right colors can have (although they might if the colors break the mold, so to speak), but trust me when I say; subconsciously, they will notice when the wrong ones are used.

Choosing colors for a website is more than just a matter of personal preference – the choices do matter. There is a good deal of psychology that goes into making color choices that convey the right message about your business or organization.

I’m not saying that web designers should over-analyze their color choices. But they do need to keep in mind that this aspect of design can have a big impact on the website. Web designers want to make the right recommendations to a client because ultimately, you want to give them the best website possible.

To show you what I mean by all this, I’d like to look at the meanings that colors have, before giving you examples of what types of websites those colors are most often found on.

Warm Colors

Warm colors in their pure shades tend to have an exciting and energetic effect on the viewer. But when used alone they can over-stimulate, so they are often mixed with cool or neutral colors to balance this.

Red

Red is the color of fire and blood and symbolizes strong and intense emotions such as war, danger, strength, power, determination, passion, desire, and love.

Dark reds – Pinot Noir, Anger, Danger, Warning, Defiance, Aggression, Pain, willpower, rage, tenseness, vigor, leadership, courage, yearning, malice, and wrath

Light reds – Merlot, Power, Passion, Energy, Fearlessness, Strength, Excitement, Joy, Sexuality, Passion, Sensitivity, and Love

Pinks – Pink Champagne, Romance, Love, Friendship, Femininity, Passivity, Emotional Healing, Peace, Calm, Affection, Emotional Maturity, Caring, and Nurturing

A lot of political organizations use darker reds on their websites, mixed with blue and whites that speak to Americans and British people of patriotism, country, and nationalism. Look at the flags of those nations.

Many sports teams use varying shades of reds conjuring up fearlessness, excitement, and power. The New England Patriots hit all the buttons; patriotism, with their red white, and blue logo, and dare I say it as a Bronco fan, New England Patriots have the best logo, and presently, almost, an unbeatable team in the NFL.

Charitable organizations and those websites targeted towards women use pinks, how long that will last in our present era we will see.

Please support your local breast cancer awareness walk by donating to the National Breast Cancer Foundation, Inc or joining the "Walk for a Cause."

Orange

Orange is an energetic color and symbolizes emotions such as joy, sunshine, enthusiasm, fascination, happiness, creativity, determination, attraction, success, encouragement, and stimulation. It is also great in small sales buttons ‘buy now’ or 'order now' on websites on websites.

Then there is Broncos Orange; Positive, Courage, Confidence, Warmth, Innovation, Friendliness, Energy.

Dark oranges – Deprivation, Frustration, Frivolity, Immaturity, Ignorance, Sluggishness Deceit, and Distrust

Red-orange – Oranges-Thirst, Desire, Pleasure, Domination, Aggression, and thirst for action and Chocolate. Terry's chocolate orange!

Bright orange – Positive, Courage, Confidence, Warmth, Innovation, Friendliness, Energy, Health, Activity, Wellness, and Youth

Light orange – relaxing, sophisticated, and calming

Gold – prestige, illumination, wisdom, wealth, happiness, humor, meaning, attainment, concentration, and high quality

Orange often found on a lot of sports team websites because of its energetic conations. We see it used on websites relating to food and nutrition, to drive our cravings subjectively.

Orange is the color of loving life and vitality. Adolescents love the color; it's used in everything from gaming computers to go- fast strips to target young kids and teens. It certainly gets you noticed.

Spa and travel websites often use lighter shades of orange which is almost golden to symbolize the suns warmth and the calming qualities of those destinations. The COMO Shambhala Estate and  Health fitness and travel website is a great example.

Many spa website themes and prebuilt websites for Spa use this color perpetuating the myth. Spas would be better off utilizing sparkling colors to refresh and invigorate their look, perhaps with a touch of clean white text.

Gold is often used as an accent color by financial and academic institutions on blue and grey backgrounds.

Together we visualize your product in words and graphics to:

Rejuvenate Refresh Renew Reinvigorate Restore Revitalize Revive or Rewrite Copy and Content
So You Can Reach Qualified Customers for Your Business.

Drop us a line 303-362-0498... CALL NOW

Yellow

Yellow is the color of sunshine and daffodils in the spring, and sunflowers on a hot summer’s day; silhouetted against a blue sky.   Bright yellow often symbolizes optimism, warmth, creativity, joy, happiness, intellect, and energy.

Dark yellow – Caution, Fear, Anxiety Frustration, Cowardice, Decay, Sickness, and Jealousy

Light yellow – Warmth, Happiness, Creativity, Intellect, Extraversion, Intellect, Freshness, Vodka Tonics, and Joy

Yellow can be difficult on the eyes. Use yellow sparingly as an accent or for very specific purposes pared with a turquoise blue it is very festive with a flavor of the Caribbean and Mexican beaches.

It is a color seen frequently on websites to promote children’s products and health and wellness, as well as more whimsical websites.

Be sure to keep away from the dark festering decay of sickly yellow pussy colors.

Cool Colors

Cool colors can be calming or cold and impersonal to the viewer. Websites often overuse the cool color spectrum. All designers need to be careful not to overuse cool tones and colors without offsetting them against a warm color tone.

Green

Green is the color of nature and symbolizes Health, Freshness, Nature, Growth, Prosperity, harmony, freshness, fertility, stability, endurance, and safety.

Dark green – Boredom, Stagnation, Envy, Blandness, Ambition, Greed, Money, Finance, and Heaviness.

Yellow-green –Sickness, Cowardice, Discord, and jealousy

Olive green – Peace, Military, Nature, and Masculinity

Bright green – Health, Freshness, Nature, Growth, Prosperity, Harmony, Fertility, Stability, Endurance, wellness, and Excitement and Safety

Aqua Green– Emotional Healing, and Protection.

Green is often used to indicate safety when advertising drugs and medical products. And since it is directly related to nature, all its shades can be used to promote natural or environmentally-friendly products and organizations. Dark green found on websites is related to money and finance.

Blue

Blue is the color of the sky and sea, so it symbolizes depth, stability, trust, loyalty, wisdom, confidence, intelligence, faith, truth, heaven, tranquility, calmness, and sincerity.

Darker shades of blue are often used by political and patriotic organizations, legal firms, and sports teams, while lighter shades of blue are often used to promote health and wellness, travel, and relaxation.

Midnight Blue – Boastfulness, Secrecy, Unreliability, Reticence, Indecisiveness, Fence-sitting, Mystery and Aloofness

Dark blue-– Knowledge, Power, Security Integrity, Seriousness, Masculinity, Health and Expertise

Light blue – Health, Healing, Tranquility, Understanding, and Softness

Turquoise Blue - Positive Communication, Clarity, Calmness, Inspiration, Self-expression, Healing

 

Top Tips for Healthy Living Release Coming in Spring of 2019 in time for the Beach Season

Blue is used across a large variety of websites from the dark blue of Banks to the light blue of the dentist office.

Established high-end private Banks, i.e., Coutts & Co bankers, to the British royalty, use a mix of dark Blues, Golds, and Browns to establish long term trust.

Corporations that want you to trust them will use dark blue in their marketing. Blue is the preferred color for commercial, corporate America, from Anthem, Blue Cross to United Health Care, and General Motors. You will find it a lot on big conglomerate company websites using trustworthy blue.

Recently there has been a trend towards more greys and reds, for example, Wells Fargo! Remember to heed the warning sign.

Media and many web industries use medium shades of blue because it can appear to be high-tech when mixed with silver and grey. However, if not used carefully blue and grey can become cold and push the observer away. When shades of grey, gold, and blue are combined, big investment banks and firms will be on your web browser.

Light blue can be found on websites related to cleanliness, water purification filters, cleaning liquids, and of course Sky Vodka. Airlines, airports, air conditioners use air and sky blues; water and sea blues are used to entice you on a voyage or encourage you to drink healthy mineral water.

Remember to drink water responsibly and get a recyclable insulated water bottle instead of plastic.

Many established high-end private Banks like Coutts & Co Bankers to the British Royalty use a mix of dark Blues and Golds and browns to establish long term trust.

Purple

Speaking of royalty; notice the color purple symbolizes royalty, especially when combined with gold, old money, power, nobility, luxury, ambition, wealth, extravagance, wisdom, dignity. And of course, the Artist, formerly known as Prince the ''Purple Rain'' musician, independence, creativity, and mystery.

To see Arturo Jiménez Immigration Law website and Purple Branding Click Here 

Light purple – romance, nostalgia, the joy of life, and femininity

As a side note, We prefer the gold and light Purple Branding. It is, in the end, the Clients Choice.

Medium purple (violet) – meditation, creativity, concentration, quietness, beauty, inspiration, artistry, music, chivalry, excellence, ethereal, sensuality, Intellectual achievement, responsibility, and sacrifice

Dark purple – gloom, sadness, frustration, royalty, and richness

• Royal purple blue is often associated with legal and aristocratic websites or websites aimed at women.
• Medium purple is a favorite of Academic institutions who will often use medium shades of purple because this shade of purple has many qualities related to intellectual thought and achievement.
• Lighter shades are found in high-end spas geared towards women, as well as health and wellness websites.
• Grape/ Dark Red Purple is often used for accents to offset with tiny amounts of pink

Neutral Colors

Neutral colors are great to mix with cool or warm colors; their pale nature can soften a strong red or a violet blue. Neutral colors are and are often used on websites to tone down the more overpowering characteristics of strong red logos and overpowering florescent lipstick pink highlights.

Grey

Grey symbolizes a gamut of meanings dependent on its particular shade and color tone, and hue from positive timelessness neutrality reliability balance intelligence to security, staid, modesty, dignity, maturity, solid, conservative, practical, old age, sadness, boring, practicality, professional, sophisticated, durability, quality, quiet, conservativeness, to gloominess, and sadness.

Greys and silvers are the most common colors used on websites because they symbolize such a broad range of emotions and meanings and can be matched to any other color.

Silver Grey – Glamorous, Distinguished, High-Tech, Industrial, Graceful Aging, Intuition, Dreams, Communication, Sleekness, and Modernity

Neutral Grey – Timelessness, Neutrality, Reliability, Balance, Intelligence, Strength and Trust

Negative Dark Greys - Unconfident Dampness Depression Hibernation Lack of Energy and Blandness

There are over 50 shades of Grey for every occasion and web developer’s needs.

They are safe colors, and when used in combination with other colors, can create a trustworthy solid established firm look (image above) to a high-tech and modern look. Silver/grey can be used to compliment gold and white to promote a feeling of control and power, so it’s not surprising that jewelry firms, and legal websites or finance related utilize these colors.

Black

Black symbolizes many different emotions, from sophistication with a touch of gold, silver or white, to security, power, elegance, authority, substance, to dark negatives of, oppression, coldness, menace, heaviness, mourning, and evil

There is a shade of Blacks for every emotion and feeling from protection, power, sexuality, sophistication, formality, elegance, classy, wealth, mystery, fear, evil, depth, style, modern, space, high quality, dramatic, authority, prestige, grief, reliability, classic, strength, and serious.

Black is the new sophisticated grey on a wide range of websites that want to convey a sense of luxury, sophistication, and elegance. Architects will tell you that black shows off their presentations and portfolios better than any other color. But which Black?

Computer chipboard manufacturers to car companies, and professional artistic products, and services from music-related websites to photographers feature black as it is timeless and its cutting-edge appeal hits all genres and ages including the youth market.

Brown

Brown is the color of dirt, earth, earthiness, reliability, support authenticity; it is warmth a comforting color that symbolizes a wide range of emotions.

The emotional symbolism ranges from friendships, earth, hearth, home, outdoors, reliability, credibility, comfort, endurance, stability, simplicity, longevity, intimacy, tranquility, masculine, nurturing, contentment, strength, passivity, fertility, generosity, practicality, challenging work, to humorlessness, heaviness, unsophisticated, sadness dirtiness and shit.

Yes, I said SHIT! Watch a child mix all the wonderful colors of the rainbow and what will you get? Shitty brown. So be careful how you use it.

Beiges and Tans – Sophistication, Seriousness, Warmth, Earthiness, Reliability, Support, Authenticity, and Neatness

Fresh Copper Brown (Note this is before it ages and turns green) – Passion, Money Goals, Professional Growth, Business Productivity, and Career Moves

Dark browns – Sophistication, Richness, Robustness, and Nature

Muddy browns - Humorlessness, Heaviness, Unsophisticated, Sadness, Dirtiness, and Shit

Brown commonly found on a variety of websites. Brown, when mixed with black, is particularly appealing, so darker shades are used on websites for sophisticated and professional products.

Lighter browns are often used to denote neatness, and tidiness, companies that tidy your cupboards or sell products that do will tend to use these shades of brown.

Medium browns mixed with greens can be used on websites relating to nature, nuts, and food, along with agricultural products.

Muddy it All Together with brown!

White

The color of space, “White Space.” White can have some many shades that it puts grey to shame. White represents positive, cleanness, clarity, purity, simplicity, sophistication and freshness. In some society’s it represents death. It can be negative feeling sterile, cold, unfriendly, elitist, isolated and empty.

For Architects and Interior designers, this is the hardest color to deal with. White is unforgiving. Donut manufactures are so concerned and obsessed with white that they put titanium nanonites or something to that effect in the donut flower to make it more appealing since I found that out, I have not eaten a donut.

There are primarily two white shades, warm white, an old-fashioned tungsten light bulb, and cold white a fluorescent light, so tread carefully with white as it picks up the color and hue next to it.

So, now you can see how colors can influence the message that you are trying to send and conveyed through your website.

There is a great deal of psychology that goes into designing a great website, and the color choices are just one of the decisions that will affect your visitor’s perception of your firm.

When designing a website, all the firms branding must be considered, including well-written content.

Now you got to the end, its time for a drink of one of those suggestions placed along the way.

The psychology of color is a powerful tool in design and branding, make sure you and your website designer chose well.

ETC

We’ve compiled a list of the 12 most commonly used colors along with emotive guidelines for each. Remember, none of these emotional responses are objectively fixed to any given color when it comes to the psychology of color, context, and culture matter.

Peter Lucking

Have fun with your colors to emotionally and psychologically increase your conversion rate, attract the right clients to you with your Website, Logo, Content and Branding.  Remember color can make you stand out from the crowd.

“We believe that attraction marketing content, with thought leadership copy, and laser targeted placement is valuable to a professional firm’s positioning in the marketplace.”

Content Branding Solutions – What Can We Do for You?  Contact Us Today

Content Branding Solutions is the Solution for Your Growing Graphics, Website and Copywriting Demands

World-class websites - Digital marketing for the Design and Construction Industry

We help Design and Construction firms envision their goals and deliver the content to succeed in a competitive market. With a well thought out consistent content marketing strategy, you can effectively grow your construction business. 

Copywriting demand is at an all-time high.  Marketers are actively searching for professionals that know their market and want to partner with them.

Our Specialty niche is B2B Copywriting is for the Design and Construction Industry

BUILDING DESIGN Architects Engineers Interior Design Lighting Designers A&E Consultants Professional Consultant Firms Sustainable Design Resilient Building Design Sustainable Solutions Professional Businesses Cultural Performing Arts Design Firms

CONSTRUCTION INDUSTRY General Contractors Construction Companies Construction Managers CM CMGC Home Builders Real Estate Small Businesses

 Download Content Branding Solutions Copywriting and Services Pricing Guide
Seven Marketing Trends and Predictions for Staying Connected to Your Customers
The Top Marketing B2B Tactics
Copywriting Essentials for Marketing Success
Fee Ranges for Copyrighting, Images, and Coaching