Paul Boag

Colour on the web

Published:
16 June 2004
Categories:
Interface Design
Reading time:
2 minutes

How to choose the right colours for your website

Designing Websites That Convert

Join a 4-hour live masterclass with Paul Boag and learn how to turn landing pages into conversions using design, copywriting, psychology and marketing — plus a live review of your own site.

Register and join me →

Choosing the right colors for your Web site is a complex and often daunting task; many companies hire independent, special consultants just to devise color schemes that support and enhance an overall brand. However, if you have a sense of color harmony and understand the responses that certain colors can evoke, you can be your own color consultant and develop highly effective color combinations.

Before you begin mixing and matching colors, you must first have a firm understandingof your site’s message and goals. Once you understand what message you want tocommunicate, remember that perfecting a color palette is an iterative process,and above all, a creative one. Don’t be afraid to experiment with surprisingcolor combinations, but be sure to adequately test the results before unveilingyour product to the public.

Colour tips and guidelines

Understand your site’s message and brand

Choose colors that reinforce your message. For instance, if designing a site for a financial institution hoping to convey stability, choose cool, muted colors such as blue, gray, and green. In this case, using warm, vibrant hues would undermine the site’s brand.

Understand your audience

Cultural differences can lead to unexpected responses to color. Additionally, demographic segments and age groups respond to colors differently. Younger audiences generally respond to more saturated hues that are less effective with older segments.

Use a small number of colors in your palette

Four or five colors, in addition to white and black, should be sufficient. Too many colors create discord and distract the user.

Use contrast for readability

Colors similar in value do not provide enough contrast and hinder legibility. Black text on white backgrounds provides the highest degree of contrast.

Use grayscale to test contrast

When dealing with hues other than black, white, and gray, it’s sometimes difficult to determine the relative value of each color. To ensure that your color palette provides enough contrast, create a wireframe mockup and convert it to grayscale.

Be aware of timeliness when choosing colors

Color trends can quickly saturate the marketplace, and consumers rapidly become numb to fashionable hues. On the other hand, you can use popular color palettes from decades past to evoke feelings of nostalgia.

Consider functional colors when choosing a palette

Don’t forget to establish functional colors for elements that communicate contextual information, such as headings and links.

Prepare for color differences on the Web

Every Web developer knows that even Web-safe colors appear differently across platforms. Be sure to correct for gamma differences and test your color palette on multiple platforms .

  • Free access to 3 books including Click! that teaches you how to encourage clicks without shady tricks.
  • Choose between multiple email courses.
  • Choose between in-house or freelancers and agencies content.
  • Learn from an expert with over 30 years experience.

About me

I’m a UX consultant and conversion optimization specialist with 32 years in digital. I help teams create user experiences that work; winning support, improving results, and making change stick.

Contact me

Email: paul@boagworld.com
UK Based – Clients in North America, Europe, Asia, Australia.

how I help

  • UX Strategy – Spot what’s blocking a great experience and get a clear plan to fix it.
  • Improving Conversion – Simple, evidence-based changes that make every click count.
  • Coaching & Leadership – A sounding board to help you lead with clarity and confidence.
  • Training & Workshops – Hands-on sessions, playbooks, and self-learning so your team keeps improving.