How To Choose A Color Scheme For Your Website
- Benjamin Kuker
- December 03, 2010
Choosing a color scheme for a website, a graphic, a software package, or any type of advertising can be difficult, especially if you don’t have a strong background in art or design. In this quick post, I'll show you a suggested workflow for choosing colors and will also give you some great resources that will teach you more about color theory, color pyschology, and the proper application of color so that your project will be accessible to all users.
There are many places on the web that will help you mix-and-match a color palette. Everything from color wheels and color pickers to hex color charts and lists of all named HTML colors. In fact, there are entire design communities that revolve around and celebrate color. Adobe Kuler, ColourLovers, Color Scheme Designer, ColorMatch5K ColorJack, and ColorStream (iPhone app) are just a few of those communities and tools that you can use to look for inspiration or for creating that perfect color scheme.
Beyond just suggesting communities and tools related to color, you may benefit from learning about color theory and why and how colors should be combined and chosen.
It's important to understand which colors should be used as background colors, highlights or accents, and text. The following technical resources will teach you about color combinations, choosing the right contrast and luminance, and how to apply those techniques to your designs :
- Worqx's Color Tutorials
- Basic Color Theory
- Smashing Magazine's 3-part series on color: 1, 2, 3
- Luminance to Choose A Palette
There is more to color than just the technical application of it. Also relevant is the psychology and cultural meanings behind choosing colors. You might be surprised to find that color meanings change from culture to culture and even in different contexts within the same culture.
- Visual Color Symbolism Chart by Culture
- Colors in Cultures Infographic
- Color Psychology in Marketing
- Why Color Matters (check the left sidebar for more resources)
Accessibility In Color
One other consideration is making sure that your website or application works for colorblind users. Because some form of colorblindness occurs in a significant percentage of the population (about 7% of U.S. males and 0.4% of U.S females), designers must be very careful if they convey meaning by color alone. Understanding the different forms of colorblindness and knowing how to circumvent each type will create more accessible designs that won't frustrate colorblind users.
See the following resources for more information on colorblindness and how to design for it:
- What is Colorblindness?
- As Seen By The Colorblind Popular websites, as seen by the colorblind. Also explains color blindness.
- Effective Color Contrast: Designing for People with Partial Sight and Color Deficiencies
- Colorblind Web Page Filter: Check your website or images to make sure they work for colorblindness.
- Vischeck: Another URL and image checker - Also downloadable
How To Choose Your Colors - A Sample Workflow
The above resources should give you a lot to think about, but I don't want to leave you paralyzed with too much new data. To avoid information overload, I'd recommend something like the following workflow for choosing colors for your project:
- Write down a list of words and concepts that you want to describe your project, i.e. how you want it to be perceived. Examples would be: professional, edgy, soft, comforting, reliable, etc.
- Look up 1-3 colors that represent some of the most important concepts you wish to convey.
- Pay special attention to cross-cultural differences for color meanings when selecting your color or colors.
- Use one of the classic color scheme types outlined in the resources above to choose your full color palette.
- Stick to your color palette. If you add more colors, it can make your project seem just a little "off" or cluttered.
- Test your color scheme by asking 3-5 users in your target market to use your project or to look at screenshots and then write down how it makes them feel and what perceptions they gain about it, just by looking at it. Then compare the findings to your original word-list. Rework if necessary. Note that factors other than color like layout, copy, etc. may influence their list. To isolate the test users' feelings about the colors, present the color palette only.
Your Comments Are Valuable - Join The Discussion!
Find what you need.
Here's the latest in design.
Popular design tutorials.
We're on the web.
We are where you are. Discover great content by becoming our fan on Facebook, following us on Twitter, or subscribing to our RSS feeds.