Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Creating Inspired Design Part 4: Yellow Submarine

Last updated Oct 17, 2003.

By Andy Clarke

"As we live a life of ease?
Every one of us has all we need?
Sky of blue and sea of green?
In our yellow submarine."

— Lennon-McCartney, 1966

So far in this series of Creating Inspired Design, I've asked you to look outside of the web to find inspiration for creating interface elements for the web sites and ecommerce stores that you design and develop. We've looked at ways to breath new life into many of the interface elements that we create every day for our web sites by looking at alternative media such as traditional print publishing.

In this article, I shift my focus away from web page layouts and interface element design and look instead at how you can find inspiration for creating color schemes that are inspired from the everyday world, both indoors and outdoors.

Come Together

As a designer working on the web, one of the questions that I get asked over and over again by other designers is, "Where do you find inspiration for the color palettes that you use on your sites?" It's a question that many web designers have, especially those that come from a technical, rather than an art school, background.

Where I find my color inspiration is not an easy question for me to answer. More often than not, the color themes that I create happen more by chance than through deliberate planning. This accidental approach can sometimes be very exciting especially when you pull together a random set of colors and they form a palette that just has that certain "something."

Other times, color planning can require more careful thought, a process, and sometimes even some thorough planning. In this article, I want to share several of the techniques that I use on a regular basis to create inspired color palettes as well as some of the places I look to for inspiration.

I Look At The World, And I Notice It's Turning

Stop reading and look up from your screen for a moment at the space around you.

Back? Great stuff.

Unless you're unfortunate enough to suffer from color blindness—or perhaps you live in an igloo in the Arctic?—you can find inspiration for colors to use in your designs all around you. To find inspiration, many times you simply need to start looking for it. But what colors work well together, and how do you create harmonious color palettes that feel right?

If you're looking for a course on color theory, you can find a ton of great tutorials online. Although much of my own design process involves experimentation, I won't be talking about the science behind it. Instead, I prefer to play with color combinations until what seems to be right falls into place. Sometimes, the source of inspiring color combinations can come from unexpected places.

Good Morning, Good Morning

Last Christmas, one of the most inspiring presents in my stocking was a multi-pack sampler containing small cartons of breakfast cereal. It was a gift from my wonderful wife and, yes, I know that sounds like a strange gift from a nearest and dearest.

Breakfast cereal might not be your first thought for an ideal Christmas gift. I'm sure that most men of that certain age would have been happier unwrapping socks or power-tools, but not me. Oh no. Trust me, my wife got it exactly right. Not only was the cereal tasty and nutritious, the design and colors on the packaging were inspired.

Figure 1

Figure 1: Inspiring Dorset Cereals' carton design

Compared to the designs of most of the cereal cartons lining the aisles in my local supermarket—bright, bold, and emblazoned with cartoon animals—the design of these particular cartons was something very different. Their colors were a beautiful mixture of subtle tones and bolder colors. They harmonized well, not only on a single carton, but also as a collection.

I was so inspired by these colors it was immediately clear that these cartons would not spend their days languishing inside a dark kitchen cupboard. So, I emptied their contents into some less than attractive plastic containers and soon the cartons themselves were proudly displayed high on a shelf in my studio.

Within a few days of Christmas, and after several visits to several supermarkets, every variety of the company's cereal had been bought, emptied into Tupperware containers, and their cartons added to my collection.

Figure 2

Figure 2: Collecting inspired packaging designs

Scrap-Booking Inspirational Packaging

I've written in previous articles about how important I believe it is for designers to keep physical, paper-based scrapbooks to store items of found inspiration. If you collect inspiring packaging as I do, these scrapbooks can often turn into three-dimensional sculptures. Piling up an eclectic mix of packaging can lead to some surprising, and often highly useful, color combinations.

I'm sure that you're thinking by now that I need to get out more. After all, who collects cereal cartons? You might be right, but designers collect inspiration whether they notice it or not.

Only a week later, I needed to provide a client with a selection of color variations for a new project. My carton collection was taken down from its place on the shelf and placed on the scanner. The result was a delicious montage of colour swatches that made the client's mouth water almost as much as the cereal would have done had I not already eaten it.

Figure 3

Figure 3: Color palettes inspired by Dorset Cereals' cartons

Creating Color Palettes

Creating color palettes like these from inspiring packaging and many other sources is surprisingly simple with almost any graphics application, such as Adobe Photoshop.

My own preferred application for creating color palettes is Adobe Fireworks, as it enables me to store swatch variations for a project in separate "frames" inside a single Fireworks PNG file. This makes it easy to develop color themes for different sections or category pages of a site and store them in one convenient place.

To see this process in action, let's create a simple palette of rich, dark tones from four colors taken from a chocolate egg carton that I received last Easter. This carton is another centerpiece in my packaging collection, as it combines deep colors with wonderful metallic typography.

Figure 4

Figure 4: Creating color palettes

Start by creating a new, blank document with a canvas size of 250 x 100px. This will allow space for all of the variations of a single color that you're going to create. With your new document created, add a 250 x 50px black rectangle to serve as the base layer. Your base file should look like this.

Figure 5

Next, sample just one color from the chocolate egg carton. I'm going to choose the brown grass from the bottom. Create two new 50 x 50px squares, and fill them with your chosen color. Now, place one colored square over the black rectangle and the other over the white base.

Figure 6

Duplicate each of the squares four times and then arrange them horizontally across the canvas to form a grid.

Figure 7

Now, with all eight squares in place, adjust the opacity of each square (usually in 95%, 75%, 50%, 25% and 10% increments) to allow progressively more of the base colors to show through the squares.

This simple technique will create ten tones from a single color.

Figure 8

When you need to add more colors to your swatch, increase the height of your canvas by 100px and then repeat the process for each color. For this completed swatch, which is based on the chocolate egg carton, I sampled four colors to create a palette of rich, dark colors that would be ideal for a darker web site design.

Figure 9

Figure 9: The completed chocolate carton color palette

This technique for creating color palettes is simple, but highly effective in creating a range of harmonious tones quickly. It has its roots in print design, using tints, and is one that has served me well for almost as long as I've been designing for the web.

Photo Inspiration

If collecting and filling your studio with packaging is not your thing, then photos are a great place to look for color inspiration for web designs. Flickering through Flickr can be an enjoyable and productive way of finding a spark for new ideas.

Flickr and other photo sharing sites are amazing resources that are full of inspiration for color themes for new designs. One useful tip for finding the most unexpected combinations of images is to search for general terms such as red, reflective, or muted, rather than for specific topics. Because its many thousands of contributors constantly update Flickr, a wait of just a few minutes might give you a totally new set of inspiring images.

In his article, Photographic Palettes, which he wrote for the site 24ways, designer and author Dave Shea explained how he chose the color themes for his stunning redesign of his Mezzoblue web site by sampling harmonious colors from photos. Shea explains:

"Choosing effective color schemes will always be more art than science, but there are things you can do that will make coming up with that oh-so-smooth palette just a little a bit easier. A simple trick that can lead to incredibly gratifying results lies in finding a strong photograph and sampling out particularly harmonious colors. ... As a general rule of thumb, photos that have a lot of neutral or de-saturated tones with one or two strong colors make for the best palette; bright and multi-colored photos are harder to derive pleasing results from."

Why not now create a color palette using my previous technique, but this time sampling colors from a photograph that you find on Flickr?

Simplified Highlight/Shadow Palettes

If you would prefer to shortcut the process and arrive at a smaller set of harmonious colors, start by filling a 200 x 100px canvas with your sampled color. Next, overlay just two squares—one filled with white and the other filled with black—over the canvas. Set the white square to 40% opacity and the black to 20% to create a highlight and shadow tone for each of the colors you've sampled.

Figure 10

Figure 10: Simplified highlight/shadow palette

With photo sharing sites so full of inspiring images from which to create your color palettes, starting off can sometimes seem daunting, particularly if you have little time to work in a graphics application or you're a developer who is unused to creating little square boxes in Fireworks. But don't worry. There are now many sites that will help you to simplify the process.

Bermi Ferrer's online Color Scheme Generator combines color sampling with the Flickr API. Simply add a search term and sit back while the generator compiles a selection of images and colors that have been cleverly extracted from them.

Figure 11

Figure 11: Bermi Ferrer's Color Scheme Generator gathers data from Flickr.
(Source photograph by Sean H. (http://flickr.com/people/26368603@N00/)
© All rights reserved

More low-fi, but no more low-tech, DeGraeve.com's Color Palette Generatora> samples colors from any photograph that's publicly available on the web. Simply add the image URL and the generator will display the original image, plus ten colors sampled from it.

Figure 12

Figure 12: DeGraeve.com Color Palette Generator samples colors from photographs.
(Source photograph by K Santos. (http://flickr.com/people/santos/)
© Some rights reserved