Web 2.0 Color Combinations

Question

What are the most user-friendly color combinations for Web 2.0 websites, such as background, button colors, etc.?

Answer 1

search for color on useit

search for color on boxesandarrows

There has been loads of research on this sort of stuff and most of it is conflicting a couple of good jump off points are listed above.

Generally lighter backgrounds and good contrast are favoured by all researchers but the details get niggly.

Answer 2

I would say that using the right combination of colors is user-friendly. Make sure your colors coordinate with each other and you should be fine.

A tool I use a lot is kuler (http://kuler.adobe.com). It'll help you pick colors that work well with each other.

Answer 3

ColorSchemer will suggest good schemes for you.

If you want to try something out on your own, try Color Combinations.

Answer 4

I've been using this free color schemer to help me determine some nice layouts. You give it a base color and it will give you a lot of complements.

EDIT: Gah! Curse you jko and your god-like typing abilities! At least we have the same reference though. 8^D

Answer 5

My stick figures come out wrong, but the following links have kept me artistically aligned for many years:

• Color tools for the design impaired
• Color Scheme Generator

To web 2.0-ize it, just put a lens flare on your logo & mark it BETA - you'll be fine.

Answer 6

For color schemes, I like browsing Colour Lovers. There are thousands of user-submitted color schemes to pick through for ideas and you can easily create your own scheme if you'd like. A lot of times I use it just for the color palette to create just the right color (it outputs the color in hex, RGB, HSV and CMYK).

Answer 7

These aren't combinations per-say but are good colours if you're just looking to mock something up (or if you're like me and have the colour sense of a bat).

• Google Docs & Spreadsheets: Web 2.0 Colours - found this recently and it's been very helpful.
• Modern Life is Rubbish: Web 2.0 Colour Palette - a sort of parody but useful :-)

As for when i do use actual palettes I use Colourlovers, kuler and Colourschemer with custom colours.

Answer 8

Miles Burke has compiled a list of the colors used in the majority of the big names in this Web 2.0 world.

He also gives a PNG or a JPG as a color cheatsheet.

I am sure I can give you an idea from what color to chose for your application.

Answer 9

@sparkes

The link to "search for color on boxesandarrows" is broken. I'm not sure how to get it to work without having the user go to the site and type color into the search box.

Answer 10

@Chris

Your Search for: color Produced 186 results

Works fine for me.

Answer 11

There is no single set of colours that everyone finds legible, but tools exist to formalise the variation and help you to make informed choices. Anyone doing UI should know about automated colour checking for accessibility. Anytime you have text that people need to read, pop the foreground and background colours into this;

Colour Contrast Check

This is based on a lot of research into contrast and legibility. If your colour combination is >125 and >500 you are as safe as you can be. Between 100 and 125 for brightness difference and 400 and 500 for colour difference then it's fine, but could be better. Below 100 and 400 respectively, increasing numbers of people will have trouble reading it for a variety of reasons.