Choosing Colors for your Web Site


Whether you're creating your first Web site or you're a seasoned Web designer/developer, choosing colors is always problematic. You want to make sure that the color gives the right impression. As Katherine Nolan points out in her article Color it effective: How color influences the user on Office Online, no color is either positive or negative. All colors have both positive and negative connotations. In her article, Nolan has a table that lists popular colors and their common positive and negative connotations in Western culture.

However, beyond the psychological meanings of colors within different cultures, choosing colors that complement and coordinate well with other images on your site and perhaps even your company logo can be difficult. Add to that the fact that while there may be millions of colors on the color spectrum, only a limited number of these display well in Web browsers. Colors that do are called Web-safe colors.

To help you choose colors, you can find a multitude of color pickers online, many of which help you choose colors that are Web safe. Some color pickers are better than others, so today's post features several of the best color pickers I've found online.

The first color picker is one that came to me through SitePoint. I receive several e-zines, one of which is from SitePoint. In a recent SitePoint Design e-zine, they featured a color picker that blew away all the color pickers that I had seen previously. It's called Color Schemes Generator 2 and was designed by Petr Stanicek. What I like about this color picker is that it defines, based on selections that you make, coordinating and contrasting colors, and then allows you to reduce the colors to Web safe colors. All you do is choose your main color from the color wheel on the left, and then select the variation that you want to use. The up arrow in the right upper corner next to the list of HEX color codes allows you to move the base color around so that you can see what it looks like as a background color and as a foreground color. You can even see what the colors look like to people who have vision problems.

The PageTutor Color Picker II, the second color picker featured here, has long been one of my favorites. You can easily choose the background, text, and link text colors, and the page displayed on the right side of the page changes so that you can see what the page will look like if you use the chosen colors. The page even provides the HTML code and the HEX color values that you need to add to your pages.

Another very good color picker is VisiBone's 216-color Webmasters Color Palette. I like that I can add colors by clicking on the color in the color "wheel" and remove colors by clicking on the X in the bar to the right of the color wheel. All colors are listed with their RGB and CMYK color values as well as their HEX color value.

Here are a few more color pickers that are available on the Internet.
Dougie's Color Picker
DigitDesigns WebSite Color Picker
Colors4webmasters.com Color Picker
Dynamic Web Coding Color Picker
Web Colors 4096 Color Picker
John December's Hex Hub

These are only a few of what you can find on the Internet, but using them sure makes choosing colors more fun.

Comments (186)

  1. Anonymous says:

    Mallim Ink (Beta) » Playing With Colors

  2. Roelof [NL] says:

    I think using only websafe colors is obsolete. I am still on Windows 98 SE with IE 5.0 but I never encounter any color problems. So why limit yourself to only 216 colors? On my sites I use any color I see fit. I put this up for discussion on a forum over here in the Netherlands some time ago and people agreed with me. BTW, I use ColorCop.

  3. I collected some useful color tools in my <a href="http://www.alvit.de/web-dev/color-tools-mixers-palettes.html">Web Developer’s Handbook</a> and its <a href="http://www.alvit.de/handbook/">pocket edition</a>.

  4. Peggy says:

    Good design!

    [url=http://etkvrwdv.com/jayt/ffjp.html]My homepage[/url] | [url=http://iaxizsbt.com/xfld/bflj.html]Cool site[/url]

  5. Ida says:

    Good design!

  6. Chad says:

    Good design!

  7. Luke says:

    Good design!

  8. Luke says:

    Good design!

  9. Lee says:

    Good design!

  10. Jill says:

    Good design!

  11. Troy says:

    Good design!

  12. Matt says:

    Good design!

  13. Don says:

    Good design!

  14. Don says:

    Good design!

  15. Glen says:

    Good design!

  16. John says:

    Good design!

  17. Felipe says:

    This is amazing, you guys are from the MICROSOFT DEVELOPER NETWORK and you don´t install a spam protection for your blogs?

    No wonder why we get all those securities holes in Windows!

  18. Dotan Cohen says:

    The colour pickers mentioned in the article help you choose one colour. There are tools that help you choose all the colours of your layout. I use several, google for them.

  19. Very many thanks for a good work. Nice and useful. Like it!

  20. Poll Pitt says:

    I am so [url=http://access.2surf.eu]lucky[/url] on having what I have! And good luck in yours [url=http://2access.2surf.eu]search[/url].

    Just visit [url=http://access.122mb.com]my site[/url].

  21. Poll Pitt says:

    I am so [url=http://access.2surf.eu]lucky[/url] on having what I have! And good luck in yours [url=http://2access.2surf.eu]search[/url].

    Just visit [url=http://access.122mb.com]my site[/url].

  22. Poll Pitt says:

    I am so [url=http://access.2surf.eu]lucky[/url] on having what I have! And good luck in yours [url=http://2access.2surf.eu]search[/url].

    Just visit [url=http://access.122mb.com]my site[/url].

  23. Hello, you have great site. Look at Jennifer ass, exclusive photo and video <a href="http://jennifer-lopez-music-photo.blogspot.com/">Jennifer”>http://jennifer-lopez-music-photo.blogspot.com/">Jennifer Lopez</a> [url=http://jennifer-lopez-music-photo.blogspot.com/]Jennifer Lopez[/url] goodbye!

  24. Best site, good job! This i found in internet <a href="http://hydrocodone-l.blogspot.com/">Hydrocodone</a>”>http://hydrocodone-l.blogspot.com/">Hydrocodone</a> [url=http://hydrocodone-l.blogspot.com/]Hydrocodone[/url] goodbye!

  25. Sujdqskk says:

    Please, follow this link:

    [url=http://trazodone.dostweb.com/ trazodone.html]trazodone[/url] [url=http://trazodone.dostweb.com/ trazodone_side_effects.html]trazodone side effects[/url] [url=http://trazodone.dostweb.com/ trazodone_hcl.html]trazodone hcl[/url] [url=http://trazodone.dostweb.com/ trazodone_weight_gain.html]trazodone weight_gain[/url]  

  26. Bloppo says:

    The day is coming when spamming scum will be hanged by the neck until they are DEAD DEAD DEAD.

    The villagers will rejoice when they see the scum vile putrid spammers swinging in the breeze as the birds feast on the rotting spammer’s corpses.

  27. Thank you for this great post about <a href="http://home-owner.kogaryu.com/free-black-jack-game.html"”>http://home-owner.kogaryu.com/free-black-jack-game.html" title="free black jack game">free black jack game</a> and [URL=http://home-owner.kogaryu.com/free-black-jack-game.html]free black jack game[/URL]

  28. Amazing site, useful <a href="http://parishilton-paris.blogspot.com/ ">Paris Hilton</a> [url=http://parishilton-paris.blogspot.com/]Paris Hilton[/ur] bye!

  29. Very interesting and good point about <a href="http://philanagreek.250free.com/-sipp-residential-property-.html"”>http://philanagreek.250free.com/-sipp-residential-property-.html" title=" sipp residential property"> sipp residential property</a> and [URL=http://philanagreek.250free.com/-sipp-residential-property-.html] sipp residential property[/URL]

Skip to main content