How to create a color palette based on an image

There are hundreds of ways to create a color palette. The process of creating a color palette as a starting point of a design depends on factors such as:

• the existing brand guidelines (if any);
• the surrounding design elements;
• the design's goal or intent (color psychology);
• the design application(s) you'll be working with;
• the tooling context;
• your personal preferences.

In this short article, I'm going to show you how I create a color palette when the design project's starting point is a pre-existing image. But first, let's answer the burning question some of you might have:

What is a color palette?

A color palette is a collection of values (usually expressed in RGB) that can be used as a base for adding colors to a design. In its most basic form, a color palette can have the following form:

#54548c, #e4340c, #141464, #ecac14m, #e4440c

The above palette will set the boundaries of the coloring process. In other words, if you were to use this palette, all your colors should be among those that the palette defines or a close sibling. Working with a color palette as a guide allows your design composition to be visually consistent and overall more efficient.

Palettes can hold as few or as many colors as required by your particular context. Such palettes can be stored in files that will provide the same color information to the host application (Gimp, Photoshop, Inkscape, etc.) Discussing the storage format of color palettes is beyond the scope of this tutorial.

How to create a color palette

In our case, we will start a design based on a pre-existing image. This means that our design and all its details will be driven by the properties of the image that acts as its starting point. Since we're only concerned with the color properties, the simplest way to go about it is to extract the major color properties from the starting image and then create a palette from that information. Luckily there are plenty of tools designed precisely for that purpose. One of them is at icolorpalette.com. iColorPalette is a free web service that, for our intent and purposes, does the job quickly and quite. Here's the recipe that I follow when I create a new design, starting with its associated color palette.

1. Start with the original (this image, for example);
2. Visit the color-palette-from-images page on the web service;
3. Upload the image through the browser, or alternatively, paste the image's URL in the field;
4. Hit GO to create a palette based on the properties of the image you just uploaded or pointed to;
5. You can then shuffle the palette to get a different variation, or accept the result and save the palette (this step requires a free account).

The iColorPalette application gives you loads of additional options, such as the ability to save the palette in a variety of color palette formats (Adobe ASE, PDF, etc.), select different variants, download the entire list of colors used by the original image, etc.

Conclusion

Like I mentioned at the beginning of this post, there are hundreds of alternative ways to creating a color palette based on an image. Yet the one described here is as quick and efficient as it gets, so you might want to give it a try.

References: iColorPalette website, Pixabay images