Extract a Color Palette From an Image

How a palette is chosen from a photograph

There are two common methods and they give noticeably different results. A dominant colour approach quantises the image into a small set of representative colours, weighted by how many pixels are close to each one, so a large flat area dominates the palette. A frequency approach counts exact or near exact values, which on a photograph tends to return a palette of near identical shades, because a photograph contains thousands of slightly different greens rather than one green. For anything but a flat graphic, quantisation gives a more useful set.

NoteExact frequency counting on a photo returns near identical shades. Quantisation gives a usable set.

Why a photo palette rarely becomes a brand palette

A photograph contains the colours present in the scene, which is not the same as the colours of the thing being photographed. A product shot on a white seamless contains a great deal of white and a lot of shadow grey, so a palette extracted from it is mostly white and grey with one product colour buried. A landscape palette is dominated by sky and vegetation. The useful information is usually one or two colours that actually identify the brand, and they are frequently among the least frequent colours in the frame. Extracting a palette and then selecting from it by eye beats trusting the order.

• A product on white gives a palette of white and grey, not brand colours.
• A landscape gives sky and foliage, not a design scheme.
• The brand colour is often among the least frequent colours in the frame.
• Read the extracted palette, then choose deliberately from it.
• Do not assume the most common colour is the important one.

NoteThe most frequent colour in a product shot is usually the background. Read the palette, do not take the top colour.

Order, proportion, and how many colours

A palette is only useful with the right relationships, and the order matters as much as the values. A design usually needs a small number of colours with clear roles: one primary, one accent, and neutrals. A palette of eight or ten extracted colours carries no such hierarchy, because they were chosen by frequency rather than by role. Reducing to three to five and deciding which is primary and which is accent is what turns an extraction into something usable. The proportion the colour occupies in the original is also worth noting, since a colour that covered 40 percent of the frame will feel dominant in a design whether you intended that or not.

• Reduce to three to five colours and decide their roles.
• Frequency order is not design priority. Assign it deliberately.
• A colour that filled 40 percent of the frame will feel dominant in a design.
• Keep a dominant, an accent, and neutrals.
• Contrast between the primary and the background is what makes a design readable.

Checking a palette before you commit to it

A palette that reads well as a row of swatches can fail badly in use, and the usual reasons are contrast and consistency. Text on a background needs a strong enough contrast ratio to be readable, and a mid tone next to a mid tone will not provide it. A design also has to look consistent across screens, and a screen is not a reliable judge of how a colour will look under a different display or in print. Checking the palette at the size it will actually be used, and on a real device, catches problems that a swatch row hides.

• Check text and background contrast, not just whether colours look pleasant.
• A mid tone next to a mid tone will not be readable.
• Test at the size the colours will actually be used.
• A screen is a poor judge of how a colour will print or look on another display.

NoteA swatch row flatters a palette. Test it at real size on a real device.