Explained: The Mechanics of Color for Developers
How color is expressed online, with some tools for accessibility and image manipulation.

Color is an important part of online identity and web development, as you can see from Paul Hebert Designs’ graphic, The Colors Used by the Ten Most Popular Sites.

It’s important to remember that when displayed on a monitor, color is additive. This means that mixing multiple colors together will create white, explains Sarah Drasner in A Nerd’s Guide to Color on the Web.

Two different ways of expressing additive color are:

  1. RGB (Red, Green and Blue): Mixing the three can be used to create all colors. This is expressed in hexadecimal with one byte for each color: RRGGBB. For example, the hexadecimal for techPORTFOLIO red is #FF5145.
  1. HSL (Hue, Saturation and Lightness): Hue is on a 360° scale, saturation is the strength of a color, and lightness is proximity to white.

“A color is only a color in reference to another color,” says Drasner. Yellow text is easy to see against a black background, but not against a white one.

Some tools you can use to measure visibility include Colorable and Contrast-A.

For more tips on color and how to manipulate it, check out the guide from CSS-Tricks.

 

IBM BlueMix