Choosing Colors for the Web

Choosing Colors for the Web

05 October 2011

Choosing Colors for the Web

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.

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.)
  • 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.)

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!

Julia O'Reilly