A useful image palette keeps the character of a photo while giving each color a job. Start with five colors: a light background, a dark text color, a main color, a supporting color, and a small accent. You can extract the starting colors in Palette Studio without an account.
About 8 minutes.
Example: a quiet café photograph
Imagine cream walls, a wooden counter, a leafy plant, and a terracotta cup. This illustrative palette translates those details into roles; it is a starting example, not an extraction from a supplied photograph.
- Cream / background:
#F4EBDD - Wood / main color:
#A87950 - Leaf / supporting color:
#4C6652 - Clay / accent:
#D69774 - Ink / text:
#292D29
1. Choose a photograph with a clear direction
Use your own photograph or an image you have permission to use. Crop out areas that do not belong to the mood you want: a bright sign at the edge can dominate an otherwise quiet scene. Look for a range of light and dark areas, rather than five variations of one midtone.
2. Extract a small palette
Open the image extractor, choose Select image, and set Palette size to 5. Click Generate palette. The image is analyzed in your browser. Compare the extracted swatches with the original: the most common color is not automatically the best accent.
Try Protect neutrals when the light and dark colors are important to the image. If the result feels too busy, reduce the palette size or crop the source more tightly before extracting again.
3. Move from sampled colors to useful roles
Use Generate from image colors to explore palette candidates based on the extracted colors, then choose a candidate. For the café example, cream can carry the page background, ink the text, wood the main surfaces, and clay a small highlight. These are design choices, not facts the photograph can decide for you.
A sampled color may need a lighter or darker version to work in your design. Keep the source image nearby so you can judge whether the adjusted palette still carries the same feeling.
4. Preview before you export
Choose Preview in Palette Studio and inspect the palette in a real layout. Check your actual text and background pairs; a pleasing set of swatches can still produce unreadable text. Use the contrast diagnostics to revise weak pairs, then choose Export for the handoff format you need.
For a quick visual handoff, download a palette image. For a website, export CSS variables. Keep the source and a short note about each color’s role so another person can understand your choices.
Try it: one photograph, two moods
Extract five colors from one photograph. Make one palette that emphasizes its quiet neutrals and another that emphasizes its brightest detail. Preview both in the same layout. Save the version that best supports your intended message, with one sentence explaining why.