The Importance of Color in Your Web Design

Weekend Web Developer: All About ColorI was perusing digg this evening, and I came across this article about color choice and on screen readability. According to the study, Times Roman italic in green on a light yellow background (sound familiar?) is the optimal combination from a readability standpoint. Choosing a good color scheme for your site isn’t just necessary to facilitate reading; it’s also important to pick colors that reflect the meaning and intention of your site.

If you’re bringing a pre-existing brand to your Web site, you should chose colors consistent with your logo, signage, letter head, business cards, etc. Your purpose for creating your Web site is to extend your brand, and if you go off on a color tangent on your Web site, it will be harder to maintain your brand identity from the real world to the virtual one.

If you are creating a brand from scratch on your site, choosing color goes hand in hand with establishing a brand identity. You’ll have to consider which colors best reflect your brand, if you want your color palette to be muted or bold, how many colors to use (too few is boring, too many is confusing), and how to combine those colors to best express your message.

Selecting your color scheme is an extremely subjective task, and it’s different for every business. So, rather than a step-by-step tutorial about color picking, I’ve put together a list of online resources that can guide you through the process.

  1. Complete Color Matching Guide
    This site is about as comprehensive a list of color resources as I’ve ever seen. Of particular interest are the links to articles about the meanings, symbolism, and psychology of colors. For instance, did you know that yellow can represent intelligence or that different shades of green can mean anything from peace to jealousy. It’s fascinating.
  2. 10 Tools to help you select a Web 2.0 Color Palette
    As the title says, this is a blog post with a great list of online tools for creating Web 2.0 color schemes. My favorite is ColorBlender.
  3. COLOURLovers
    I haven’t even scratched the surface of exploring this site yet. From their About page: “COLOURlovers is a resource that monitors and influences color trends. COLOURlovers gives the people who use color a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews.” The article that brought me to this site is an excellent analysis of the color palettes of Grammy-winning album covers. COLOURLovers looks like an incredible resource for designers of all kinds.
  4. ColorZilla
    ColorZilla is a Firefox plugin that lets you pull colors from any Web page you’re visiting. I certainly wouldn’t advocate lifting entire color schemes from other people’s sites, but if you come across a shade of blue that you really like, this tool makes it easy to grab it. In the past if I wanted to do that, I’d take a screen shot of the browser and use the dropper tool in Photoshop or GIMP to get the color. This plugin is much easier.
  5. Hex Hub HTML Color Codes
    I’ve posted this link before, but it is my go-to resource for picking colors. As much as I love the widgets that let you slide a bar or scroll around a color wheel to pick a scheme, there’s something about being able to see every color available on one page that is easier for me. A lot of times, I’ll find a shade of the color that I like on the Hex Hub, and I’ll take it to one of those automatic color schemers to flesh out the palette. Nonetheless, I use this site all the time.

Choosing colors is such a fundamental part of creating any sort of design project that a lot of folks, I think, take for granted how important it is. I hope these resources point you in the right direction when it’s time to develop your site’s color palette.

Leave a Response / Trackback

leave a reply