Professional and Affordable Web Design

0800 080 5401

Choosing a colour palette for web design

Firstly, it has to be said: there is no such thing as “the ultimate colour palette” for a website.

What works great on one webpage, may look hideous on another. Besides, colour perception can be so different from person to person. It’s almost impossible to find the golden rule of using colours in web design. Of course there are better and worse colour schemes on various websites but I guess we can use the term “better” only from our subjective point of view.

Sometimes however one or another website is perceived by majority of users as “good” or “pleasing”. How is it possible that in some cases most people would say “I like it” whereas sometimes they would say “it’s awful” ? Well, there is no simple answer - but thankfully there are some guidelines to make things look better.

Since we’re little, we perceive the world as full of colour and learn it that way. While learning, we encounter new things: objects, smells, tastes, textures etc and we somehow attach that experience with our feelings. Magically in our memories we store those feelings as images, very often full of colours.

Thanks to that, each colour brings us certain emotions. Luckily (or unfortunately in our case) each person identifies colours differently because each of us grew up in different environment.

Through using statistics we could try to find “the meaning of colours”. In the research done among young people in USA, most of them would find Blue as a symbol of success, intelligence and trust, Yellow as fun and joy, and Black as complicated or technological. Of course, Green was always perceived as rich :)

Creating a nice colour palette for our website and using it properly, is actually one of the most important part of creating the layout. Firstly, we have to match the colours to the subject of the website. For example, we wouldn’t use a Yellow colour for a dentist, or Blue for a site ran by Harley-Davidson lovers. We should push our imagination and try get a feeling of the subject.

In our case, a dentist website would do much better in White and Blue; whereas a Harley website would be more appealing in Black, Silver and perhaps Red. The second important thing is to compose colours with the elements of the layout. All colours should blend, and all content has to be readable. Remember websites are mostly about information.

It is worth mentioning the concept of contrast. As we know the most common page elements are: header, menu, sidebars, content , footer, search box, banners etc. It is usually good to make some of them stand out more; whereas other should be faded. That’s where colour comes in very handy.

Strong colours should be used mostly for the elements that have to get users attention. Text MUST be easy to read, so it’s probably a good idea to make the background in light, soft colour with no texture. All other elements have to be placed across the page, so their colours do not blend.

Another thing is to stay with 2 or 3 colours on one page. There is no rule against that but from our experience, websites usually look more subtle and focused if no more than 3 swatches are used.
if you push it to 6 or 10 it may even difficult to read so from commercial point of view , your client will not be happy ;)
During the process of designing a website you always should keep in mind 4 main objectives regarding colours:

  • Site should be pretty
  • All elements should match
  • Keep text readable
  • Match the colours to the subject of the site
  • Make site attractive

To get all this right is not easy to do! I encourage you to do some digging on the Internet. With a little effort and luck you’ll find something thats inspiring, some new colour schemes or interesting contrasts. Remember web design should be fun ;)

Comments0 Comments

All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.

Make a Comment

Notify me when someone responds

Quick Contact

See Full Portfolio Some Of Our Work

Screenshot of website

Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...

Screenshot of website

County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...

Customer News & Resources

At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.

Introduction to sitemap.xml

Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »

Center a web page in CSS

One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto. Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div). The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div. This will... Read More »