• Home
  • About
  • Fav Books
  • Tools
  • Journal
  • Hire Me
  • Contact
Small Biz Geek

Small Biz Geek

Small business design, marketing & technology issues

Website design services

A journal on small business design, marketing & technology

Follow @twitterapi
  • The Internet
  • Marketing
  • Graphic Design
  • Web Dev
  • Web Design
  • Social Media
  • Technology
  • Miscellaneous

Say What? How Your Website Colours Communicate

By Small Biz Geek on March 17, 2015 · Filed Under: Design, Internet Updated: April 6, 2018

Website design colour schemes must be analysed carefully. The colour palette you choose affects communication, user experience and purchase decisions so it’s important to spend some time thinking about it.

How Your Website Colours Communicate

If you’ve studied art or graphic design you’ll probably already be familiar with the logic behind colour theory. It’s a marketing issue. Keep your audience in mind and constantly ask yourself what kinds of ideas your colours communicate to them.

In this post I’m sharing some resources, ideas and a video at the end.

Colour Communication Examples

You might notice corporate websites often use a blue colour system because it represents professionalism and trust. Blue is often successful when used for medical, scientific, government, health, technology, legal, dental and corporate websites.

Take care when choosing your colour scheme. There are positive and negative connotations with colours – two sides of the same coin.

For detailed analysis visit Color Matters. It’s a great educational resource.

RED

Positive: Warmth, love, boldness, excitement, speed, strength, energy, determination, desire, passion, courage, socialism

Negative: Anger, danger, restriction

PINK

Positive: Feminine, love, caring, nurture, friendship

Negative: Immaturity

ORANGE

Positive: Cheerfulness, affordability, enthusiasm, stimulation, creativity, food, liberal

Negative: Warning, facetious, unintelligent

YELLOW

Positive: Attention-grabbing, comfort, liveliness, optimism, overwhelm, Summer, comfort, liveliness, intellect, happiness, energy

Negative: Cowardice, hunger, conflict

GREEN

Positive: Durability, reliability, environmental, luxurious, optimism, well-being, nature, calm, relaxation, Spring, safety, honesty, optimism, harmony, freshness

Negative: Envy, illness

BLUE

Positive: Peace, professionalism, loyalty, reliability, honor, trust, coldness, depth, stability, professionalism

Negative: Melancholy, boredom

PURPLE

Positive: Power, royalty, nobility, elegance, sophistication, luxury, mystery, royalty, elegance, magic

Negative: Artificial, pompous, conceit, mourning

GRAY

Positive: Conservatism, traditionalism, intelligence, serious

Negative: Dull, uninteresting

BROWN

Positive: Relaxing, confident, casual, reassuring, nature, earthy, solid, reliable, genuine, endurance

Negative: Dirty, dull, humourless

BLACK

Positive: Elegance, sophistication, formality, power, strength, depression, morbidity, night

Negative: Illegality, death

WHITE

Positive: Cleanliness, purity, newness, virginity, peace, innocence, simplicity

Negative: Sterility, cold, isolating, boring

Why Web Links Are Often Blue

Even with the advances in web design, it’s still common to see sites with the classic blue hyperlinks. It’s the same colour you see in a Microsoft Office Word file if you create anchor links on text.

The explanation is anecdotal: Tim Berners-Lee, the inventor of the web, is allegedly responsible for blue hyperlinks.

In the early days of the web, Berners-Lee created a browser called Mosaic which displayed black text over a gray background. The only other dark colour available at that time was blue. To make links stand out, blue was used.

My argument for blue being used so frequently is that it became ingrained, just like the Windows Start button being on the bottom left of your PC screen. Similarly, website logos are usually on the top left. 

Google displays blue titles in search results as well as in Adwords units. These are things we are used to. If you’re going to go and use a colour other than blue for hyperlinks, make sure it’s obvious that this is what they are. 

Effect on Website User Experience

Using passive colours as well as single action colours is helpful. Generally, anything that can be clicked with the mouse must use the same colour throughout the entire site.

By doing this you’re conditioning people to learn how to navigate your site.

A single colour for clicking offers up a good user experience and leaves no opportunity for confusion. The exception to this rule of “action colours” is that the main navigation menu can use different colours.

The reasoning behind this is that those particular links/buttons are usually placed somewhere near the top of your header – a typical place for a website nav menu.

Never use all different colours on the links/buttons. Don’t have some red, some blue, some green, for example. Aim for a consistent use of colour for particular elements.

Less is more in design. Distill the colour palette and gives your visitors clues as to what things they should click and what they shouldn’t

Here’s a video on website action colours:

Watch video on YouTube

Colour Generator

If you’re after inspiration try this handy colour scheme generator. Tap the space bar to generate colours and click a colour bar to lock it. The hex colours are provided.

Up to 5 colours can be chosen but I strongly recommend you lock white (#FFFFFF) as a default since almost all web sites have white in them somewhere. If you want to use less colours in general, choose and lock white again.

What I like is the option to download an image file containing your colour scheme. It’s handy knowing you can supply a PDF to a website client complete with hex colours.

Colour Code

Similar in principle to the previously mention tool is colourco.de. Move your mouse around freely on the screen until you see a colour you like.

Then build a pallete and save it as .PNG or create a permalink to the colour scheme.

Colour Calculator

Another approach to your colour scheme is to take a more academic approach using this colour calculator.

This tool generates colour pallets based on colour theory and the colour wheel. The wheel is a chart devised in the 1600’s to demonstrate the relationship between colours and how we can achieve a harmonious balance.

The page gives some good information including an overview of complementary, monochromatic, analogous, complements, triadic and tetradic positions on the colour wheel.

Share this page:

Related Posts

  • How to Beat Anti-Social Media Marketing
  • Web Designers: Create Community Websites to Promote Your Services
  • DIY Laminated Printed QR Code

Filed Under: Design, Internet Tagged With: Analysis, Colour, Design, Websites

About Small Biz Geek

I'm Darren, helping small businesses with design, marketing & tech.
Read more about me and follow me on Twitter. I'm on YouTube aswell.

Let's Work Together

Do you need help with something? To hire me see the page about my services.

Get Updated by Email

If you liked this article, consider subscribing to the RSS feed by email.
Your email address won't be shared. Read the privacy policy.
* indicates required field.
Are you human? (Spam check)

Comments

  1. Alica says

    May 28, 2017 at 9:50 pm

    Hello there
    I have recently start a website but I was stuck at theme color that what should I use for.I was so confused what color is good for my website.i have googled but couldn’t get any effective results. now i think I have got what i wanted.really now I can decide what color should I use and what would be good for the website viewers.

    Reply

Add Your Thoughts Cancel reply

Your email address is safe and will NOT be shared with anyone else.

Hateful, spammy or abusive comments will not be tolerated.

For more information please see the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Search Website

About the Webmaster

Hello, my name is Darren, a 34-year-old business enthusiast eager to learn and do good work.

I’m a website builder for hire working with small to medium businesses.

I network in Derby, Ilkeston and Nottingham in the East Midlands, England.

Read my story

Let’s Connect

YouTube
Follow me on G+
Follow me on Twitter



I'm active on the three social networks listed above.

Twitter is the one I use most.

Recommended Books

Don't Make Me think - Steve Krug

“Don’t Make Me Think: Revisited” – Steve Krug (Book Review)

A person of average technical ability must be able to navigate your website easily. This is required reading for anyone wanting to create a better experience for their visitors…

Latest Journal Entries

  • CEOs, Stop Using “Poverty Porn” for your Awful Social Media PR Stunts! FFS!
  • Childhood Business Ventures: What Was Yours?
  • Local Business Websites: “About” Pages Done Right Will Attract and Delight Readers
  • Magazine Advertising Scam: Rogues Impersonate Crime Prevention Officers
  • Privacy and Data Protection is a Matter of Life and Death for Some
  • Magazine Advertising Scam: Bogus Children’s Cancer Charity Misleading Small Businesses
  • UK Businesses Electronically Processing Data Are Legally Required to Register with the ICO
  • Stolen Credit Card Email Scam Targets Small Businesses and Service Providers
  • Nuisance Calls, Emails and Empty Promises: The Bungling Incompetence of Yell.com
  • “Don’t Make Me Think: Revisited” – Steve Krug (Book Review)
  • How to Hit Back (Gracefully) Against Fake Negative Google Reviews
  • How Safe Is Your Password from the $450 Billion Cybercrime Industry?

Primary Navigation

Home
About Darren
Good Books
My Tools
Blog Posts
Hire Me
Contact Me

Secondary Navigation

The Internet
Marketing
Graphic Design
Website Development
Website Design
Social Media
Technology
Miscellaneous

Derby & Nottingham Area

Small Biz Geek
Office 897
109 Vernon House
Friar Lane
Nottingham
NG1 6DQ

Telephone

Tel: +44 (0) 115 714 3290
Tel: +44 (0) 7951 897 243

VoIP

Skype: ilkestonwebdesign
WhatsApp: 07519 897 243

Email

d...@smallbizgeek.co.uk

Let’s Connect

Twitter
Google +
YouTube
Soundcloud
LinkedIn
RSS

Subscribe to Blog by Email

Subscribe to Blog By Email

Social Calendar

UK Small Business Twitter Chats
#SmallBizHour on Twitter
Derby & Nottingham Meet Ups
WordPress Nottingham Meetup
WordPress Derby Meetup
Genesis Framework by StudioPress


Copyright © 2019 · Small Biz Geek · Privacy Policy · Commenting Policy · Website Disclaimer · ICO number: ZA305900


Written and designed by Ilkeston Web Design

This site uses cookies More info