Build a useful color palette from a photograph

Choose an image for a specific design task

Start with a photograph that resembles the mood of the project you are designing. A product close-up, a landscape and a busy collage can produce very different palettes even when they share one prominent color. Decide whether you need a background, text color, accent or illustration colors.

Use an image you are permitted to work with. Extracting a palette does not provide rights to reuse the photograph or establish ownership of a brand identity. For an existing brand, compare the result with its published color specifications instead of replacing those specifications with sampled values.

Read the swatches as a summary

KitForma’s palette tool samples a reduced version of the image, groups similar pixels and returns up to six representative colors. It ignores pixels whose alpha is below 128 out of 255. A mostly solid image can produce fewer than six swatches.

The result describes the sampled image; it is not an exact list of every original pixel color or a print-color proof. Large backgrounds often dominate. A small but visually important accent can disappear among more common colors, which is a reason to inspect the palette rather than accepting every swatch automatically.

1. Choose a supported image up to 25 MB.
2. Click a swatch to copy its HEX value.
3. Download the JSON palette if you want to keep the selected colors together.

Crop when the important color is missing

Imagine a blue wall with a small orange chair. The full photograph may yield several blues but little orange. Open the cropper, isolate the chair with a little surrounding context, export that crop and run palette extraction on it.

Keep the full-image and cropped palettes separately. They answer different questions: the first describes the overall scene, while the second concentrates on the detail. Do not mistake a crop-based palette for evidence that an accent occupies most of the original image.

Whole image → background and supporting colors
Detail crop → candidate accent colors
Final theme → selected roles after contrast testing

Test color pairs, not isolated swatches

Choose a light background, a readable text color and a restrained accent before using every extracted color. Run the intended foreground and background through KitForma’s contrast checker. Two attractive colors can still be difficult to read when used together at a small text size.

WCAG’s minimum contrast guidance uses 4.5:1 for ordinary text and 3:1 for qualifying large text, with specified exceptions. Passing a numerical contrast check is only one part of accessibility. Labels, focus states, error messages and meaning conveyed only through color still need attention in the actual interface.

Save the decisions as well as the colors

Store the HEX values together with the source image name, any crop used and the intended role of each color. A JSON download records the swatches, but it does not document all those design decisions for you.

Before delivery, compare the palette on the real page or slide rather than only inside the extractor. Check normal, hover and disabled states where relevant. If the project will be printed, follow the printer’s color workflow: a sampled screen HEX value alone does not guarantee a particular printed appearance.