Christopher Schmitt

designer, web developer, author, strategist, dreamer

Working with the web since 1993, Christopher Schmitt directs, Inc., a small new media publishing and design firm. The author of several books, including CSS Cookbook and Photoshop in 10 Simple Steps or Less, Schmitt is also a contributor to many web development magazines.


Color Shades

9 years ago

During my brief talk at SXSW Interactive, I mentioned that you could use color shades. Color shades are small PNG images filled with a black or white color set to a certain opacity which can be used for tinting background colors or images.

In this example, a color shade is placed in the background image of a heading that rests on top of a photo.

Color Shade Demo

For another example, check out the CSS Cookbook site. There I use color shades to retain the gradient within the unordered lists that are placed in background of the design.

If I used the traditional slice-and-dice/Image Ready method for production, I would need to have different background image for each list item. With color shades, I simply use two images: one color shade and the background image.

A benefit of color shades is allowing site visitors to resize their fonts while maintaining the cohesive site design.

Another benefit is the as ease of site maintenance. I can easily throw in an extra list item if I need to without breaking a sweat or opening Photoshop.


To save you time, I’ve created a set of color shades (~171 KB) that are free for downloading and use. I’ve included shades of both white and black with stops at every 10 percentage points. Also included are color shades set 33 and 66 percentages as well as the original Photoshop source file.

Note: you will still need to use a method for supporting PNGs in IE6, if you still want to support that browser.

Leave Your Comment


Links of Interest

Internet Trails


Popular Blog Posts

Featured Publication

Designing Web & Mobile Graphics

by Christopher Schmitt

New Riders, 2013