How to pick a great color palette for your website in 7 minutes or less

"My goodness, I can't believe my eyes. My favorite!", I thought while I was sitting down at the dinner table in front of a delicious plate of lasagne with mushrooms and bechamel sauce.
My mother has never been much of a cook, so I was expecting something simple, like bread topped with butter but this time she outdid herself.
Lasagne is a pretty complex dish and it must have taken her the best part of the day.
"Oh, no. It took me only seven minutes.", she said. Seven minutes? How could this be possible?
"Well, it says right here on the package: microwave for seven minutes."

The seven minutes color palette

Seven minutes is a short time but it's enough to figure out which colors to use on your website if you follow this simple system that I call "the natural color palette".

What is a natural color palette?

A natural color palette is a mix of colors that exist naturally around us. For example, imagine a snowy mountain landscape. You will notice that it's full of blues from the sky and whites and grays from the snow and maybe some dark brown from the trees.
A forest landscape has various greens from the leaves, burnt orange from the grass and blue from the sky.

Mother Nature is so good at combining colors that complement and enhance each other, and we are so used to seeing them, that every natural color combination is pleasing to the eye and works extremely well.

These colors make our life easier because we don't have to worry about clashing colors.
They automatically look good to our eye and even if we are not expert designers we can be sure that our choice will look harmonious. So, how do we pick the right colors, then?

How to pick the right colors for the job

There are three steps involved in picking the right colors:

1. Establish a mood
2. Search a natural landscape that fits that mood
3. Pick the colors from the landscape

1. Establish a mood

The first step is to establish the mood of the website.
Depending on the content, what you want to communicate, and the tone you are using, your website will have a different mood.
The mood can be: vibrant, fresh, calm, reassuring, serene, warm and so on. Just choose a single adjective that best describes the mood and you are all ready for the second step.

2. Search a natural landscape that fits that mood

Once you know what the mood of the website is going to be, just choose a photo. Choosing a photo is pretty easy. Head to Google and type the adjective you chose in step one followed by the word "landscape".
For example, if the mood is "serene", type "serene landscape". If the mood is vibrant, type "vibrant landscape".
When the results page loads, click on "Images" and you will see a neat row of photos to choose from.
Look for the image that you feel is more representative of the mood you are looking for and save it to your computer. You are now ready for step three.

3. Pick the colors from the landscape

At this point you could pick colors manually from the photo using a graphics program like Photoshop but this would take more then seven minutes so we are going to delegate the whole operation to a software that lives on the internet.

Go to cssdrive.com/imagepalette and upload your photo. Once the photo is uploaded click the "Get Palette" button.

Voila', the software will generate a palette based on the colors in the image.
You will actually get three palettes with light, medium and dark colors. If you click on one of the colors you will see the hexadecimal code that you can use in the web page.
Choose the colors that you like best from this palette but be aware of a common mistake that often people make.

Don't make the mistake of picking too many colors.

You shouldn't pick more then four colors for your palette. Usually, three colors are enough.
Pick one main color, that will be used for most elements on the website. Then choose a second color that will complement that and a third accent color for elements that need to stand out. The accent color can be a bright color but should be used sparingly throughout the website.

Examples

Here are a couple of examples of natural colors used to create a calm palette and a vibrant palette.

p>

To summarize

If you want to quickly create a color palette for your website, do it the natural way. Natural colors are perceived as harmonious and work well together. First choose the mood your website wants to express.
Then find a photo of a landscape that expresses that mood.
Finally, upload your image to an online service that extracts a color palette from the image.
Remember to pick no more then three or four colors from the palette to avoid overwhelming the visitors.

As you have seen, the natural color palette system is a quick and easy way to make your website look better in only a few minutes. Just like fixing a quick dinner.