Sunday, April 24, 2005
Still from Sin City.
One of the most overlooked colors in the palette is gray. Like black and white, it’s normally considered an absense of color rather than a color that could be a vibrant design tool.
Let’s take a moment to look at how one might take an otherwise bland gray color scheme and sauce it up a bit. It’s simple, really.
Auscillate.com uses primarily gray tones to allow me to direct the reader’s eyes with limited splashes of color. The section headers in the right sidebar and the ads and Oscillate Night ad in the left sidebar gently attract the eye. The simple colors don’t get lost in a sea of vividness. The only purely design element on the page that carries a rich color at all is the background that creates the border between the main weblog text panels and the sidebars. (Reload the page a few times — it changes color.) And the colors used there are rather mute.
The overall gray palette also makes the colors of the posted photographs look much more vivid and allow me to include much more on the page before it feels cluttered or gaudy.
But what about those grays? Well, hopefully you find them attractive. One reason they might feel a bit more energetic to you than normal grays is because they’re not really gray… They’re colors that have been almost entirely desaturated.
Here’s a selection of the actual color palette used on this site (as of April 2005):
Here’s the same color palette with all saturation removed.
The effect is subtle, but you should notice a clear difference.
Now here’s the Auscillate.com color palette fully saturated, to accentuate the colors used.
You see that I’m really using very subtle yellows, blues, and greens.
Levitated.net, one of the websites of my friend Jared Tarbell, uses a similar technique.
Here’s a selection of the Levitated.net color palette (as of April 2005):
And with all color removed:
And with all color super-saturated so you can see the actual hues used in the design:
Oranges and blues.
One more. This palette I made using colors from the Sin City still above. The makers of SinCity did a good job using subtle grays to enhance the mood of the film.
Desaturated:
And super-saturated:
So what’s the point? Well, by adding a hint of color to your grays and playing with those colors, you can find some truly electric grays that could add vibrancy to your site design without being obnoxious or interfering with the visual usability of the site. Feel free to copy the images above into Photoshop (or whatever tool you use to find colors) to use as a starting point.
Use this new-found knowledge for good and never evil…
