Skip to tool

Turn a photo into a website palette.

Extract colors from an image privately in your browser. Choose a starting color, edit your palette, preview an interface, and export CSS or Tailwind code.

Your palette, in context

Free · no signup

JPG, PNG or WebP · up to 15 MB · processed in this browser, never uploaded.

Keep your brand color. Build the roles around it.

Changing theme regenerates the roles. Use Undo to restore your edits.

One saved palette on this browser. No account or cloud storage.

LIVE INTERFACE SAMPLE

Make room for
your next idea.

See how your colors work together on text, surfaces, and a primary action.

Primary action
SECONDARY SURFACEA little contrast.
A clear direction.

Checks apply to these pairs at the normal-text AA threshold of 4.5:1. A palette does not certify a whole page. Button and card text use black or white for contrast.

Inspect exported code

From image to interface

Choose a JPG, PNG or WebP image. HueWiz samples a reduced version, groups similar RGB colors, and separates the strongest candidates by their distance in OKLab. Pick a swatch to use it as your primary color, then edit the generated surface, text, secondary, and accent roles.

The extracted colors are approximations, not a count of every original pixel. Transparent pixels are excluded. Screenshots, flat illustrations, and photographs can produce different results; crop to the subject you want before importing.

Which colors should I use?

For a photograph of a forest, try a green extracted from the foliage as your primary color. Use a pale surface for a light interface, then check text against that surface. The generated supporting roles are design suggestions and may not occur in the original image.

Does my image leave my device?

No. This tool reads the file inside your browser. Palette share links contain color codes, not the image. Local saving stores one palette on this browser.

For more control over image role extraction and perceptual mixing, use the original image tool and advanced mixer. Read how to build a color palette.

FROM A PHOTOImage palette generator →Extract colors locally, then turn them into an editable website palette. FOR READABLE TEXTContrast checker →Check a foreground and background against AA and AAA text thresholds. FROM COLOR TO CODETailwind color generator →Build a shade ramp and export Tailwind v4 theme variables.