Choosing Colors for the Web

Posted on Wednesday, October 05, 2011 by Julia O'Reilly

Whether you're working with a designer or developer, or building your own site, you will have better results selecting colors if you use a consistent benchmark for colors.  Web designers and developers often talk color to each other in HEX.  These are the hexadecimal screen values for colors.  Here's how Wikipedia defines it: 

Web colors have an unambiguous colorimetric definition, sRGB, which relates the chromaticities of a particular phosphor set, a given transfer curve, adaptive whitepoint, and viewing conditions.

Color ChartsIn other words, when you see a color in a web browser on your monitor that you like, find out what its HEX value is.  Give that number to your designer, who can designate that color exactly for a color element on your website.  

 This won't guarantee 100% perfect color consistency from monitor to monitor (every screen sees color just a bit differently), but it will get you a lot closer to a universal color.  If you need more control, you'll want to switch to using images and color management, but the use of hex colors increases the likelihood that your website colors will be seen the way you want them to be seen.

So how do you find these Fabulous hexadecimal color values? 

Here are some links to my current favorite sites: 

  • Color Scheme Designer
  • Canva  (Search for a descriptive color name or select a color square right from the page.  Each color square contains a link to more info, then follow again for some tasty color combinations.  More goodies on this site for inspiration and design assets too.)  
  • WorkWithColor   (Doughnut Color Picker, excellent info on color principles and how they apply to web.)
  • ColorBlender   (Download and send Photoshop Color Table, Illustrator Colors, or send blend by email, right from the site.)
  • ColorPicker  (Put together several colors to see them together.)
  • Colors On The Web Colorwizard  (Fun interface, easy to use. Put together several colors to see them together.)

Last but not least, Firefox has a wonderful free download utility called ColorZilla, which is what I use.  It has to be installed, but the website guides you through. It's easy.

ColorZilla lets you pick a color directly from any browser window anywhere, and will give you the rgb and the HEX values you need, handily offer to copy those values to the clipboard and store it in your favorites.  And it's always right there in your browser toolbar.

What could be better?

Any one of these sites will give you HEX values for your selected numbers.  Just look for the boxes that identify themselves as such.  They're easy to spot once you know what they are.

Julia's Tip

My suggestion is to avoid highly intense or dark colors for your page area.  Your page background color or picture tile will definitely affect the rendered color of your text. 

Take note that light text over a dark color is more difficult to see and can be fatiguing for the eyes, especially on hand-held devices (though it can be successful if handled with care). 

If you don't have enough contrast between the two colors, your text will be difficult to see even on the best of monitors or device screens.

Happy Coloring!