How to Use a Color Palette from an Image

A palette is not a layout

Extraction answers "which colors are in this picture?" It does not answer "which of these can be a button?" Start on the color palette from image generator, choose a photo, and copy the hex codes. Then assign roles before you open a design file. If you use every swatch at full strength, the page looks like the photo exploded.

Pick the source with the colors you mean to keep. A wide sky or a busy room will hand you colors you then have to throw away. Which photo to use covers that choice.

A worked example from a sunset palette

These six codes are the published sunset color palette. They are a stand-in so you can see the editing step. Your own photo will produce different hex values.

• Peach Glow #FFB16C
• Sunset Orange #F97316
• Horizon Red #DC2626
• Dusk Magenta #9D174D
• Deep Violet #4C1D95
• Night Indigo #1E1B4B

A simple marketing page only needs three of them:

Job on the page	Swatch	Hex
Hero band	Peach Glow	#FFB16C
Headlines and body text	Night Indigo	#1E1B4B
Button fill	Sunset Orange	#F97316

The page background can stay white. Most photos do not contain a clean paper color, and forcing peach behind every paragraph makes text harder to read. Peach belongs in the hero, a card edge, or a short band. Night indigo carries type. Sunset orange is the one thing you want clicked.

What to leave out

Horizon red, dusk magenta, and deep violet are real colors in the sunset. They do not each need a job on the first screen. Hold them for a second section, a chart, or a campaign, or drop them. A palette you cannot explain in one sentence is too large for the page you are shipping today.

If a swatch is close but wrong (a shadow counted as a brand color, or a highlight that is too pale to see), change it on the PhotoTones workspace. Adjust, replace, reorder, and remove are free. Generate again only when you want a new pass from the same photo. Generating does not preserve edits you already made.

Put the three codes in CSS

Name the roles, not the sunset. The next photo you extract should be able to reuse the same names.

:root {
  --hero: #FFB16C;
  --ink: #1E1B4B;
  --action: #F97316;
}

That is enough to style a hero, the type, and a button. For a full variable file, Tailwind config, or design tokens, see how to export a color palette to CSS. Those handoff files are part of the brand kit, not a requirement for copying hex codes.

Check the pairs before you publish

A vivid swatch from a photo is often a poor text color on white, and a poor background behind small type. Put Night Indigo on Peach Glow for the headline. Put the button label in a dark ink if white type on Sunset Orange looks thin. Do not assume a pretty pair passes contrast. The WCAG color contrast guide is the checklist. The contrast grid itself is a Pro tool. The free step is still: read the text on the actual background before you ship.

When the photo palette is the brand

If the page is a one-off, three named hex codes are the whole job. If you are handing colors to a client or a developer, keep the same three roles and add only what the next screen needs: a border, a second surface, or an alert that the photo may not contain. You can still copy hex, RGB, and HSL for free. A client-ready brand kit ZIP, design tokens, and Figma variables are PhotoTones Pro, at Get the Brand Kit for $7/month, when the deliverable is the handoff rather than the swatches.

FAQ