ImgHex

Image → usable palette

Color palettefrom an image

Turn any photo, logo or screenshot into a palette you can actually build with. Pick how many colors you want, choose vibrant or muted ranking, then export to CSS, Tailwind, SCSS or JSON tokens.

  • Nothing uploaded
  • No signup
  • Deterministic results

Drop an image here

or paste with Ctrl+V — JPG, PNG, WebP, GIF, AVIF or BMP, up to 50 MB

Your image is processed on your device and never uploaded.

Starting points

Settings that suit each kind of image

There is no single right answer, and the slider recalculates instantly — but these are sensible places to begin.

  • A photograph

    Vibrant, 5–6 colors

    Photographs carry a lot of near-duplicate mid-tones. Vibrant skips past them to the colors that give the image its character.

  • A logo or flat illustration

    Dominant, 2–5 colors

    Match the count to the number of flat colors in the artwork. Dominant mode reports them in order of how much area each covers.

  • A UI screenshot

    Muted, 8–12 colors

    Interfaces are mostly low-chroma surfaces. Muted ranking surfaces the greys and borders you actually need to reproduce.

  • A mood board

    Vibrant, 10–16 colors

    A wider palette gives you enough range to assign accents, surfaces and text separately when building a theme.

Turning an image into a palette you can ship

Extracting colors is the easy half. The harder half is ending up with a set that works together in a real interface, which is why this tool reports more than hex codes: every swatch carries its coverage percentage, and every pair can be checked for contrast before you commit to it.

A palette pulled straight from a photograph is a starting point, not a finished design system. Expect to keep three or four colors, discard the near-duplicates, and add a neutral or two of your own for text and surfaces.

Why the colors stay vivid

Clustering happens in OKLab, a perceptually uniform color space, rather than in RGB. In RGB the numerical distance between two colors barely corresponds to how different they look, so averaging pulls distinct hues together into muddy browns and greys — the reason so many generated palettes look washed out next to the image they came from.

Results are also deterministic: cluster seeding is fixed rather than random, so the same image always produces the same palette. Reload the page and nothing reshuffles, which matters when you are comparing two candidate images.

Exporting to your stack

The export panel writes the palette out in six forms. CSS custom properties for plain stylesheets, a Tailwind v4 @theme block that drops straight into your CSS entry file, SCSS variables plus an iterable $palette map, W3C-style JSON design tokens for Figma plugins, an SVG swatch strip for sharing, and a plain list of HEX codes for spreadsheets or scripts.

Names are positional — color-1 through color-n, ordered by the ranking mode you chose. That is deliberate: calling the largest clusterprimary would be a claim about your design that the tool has no basis to make.

Checking the palette works

Pick any color and the accessibility panel reports its WCAG 2.2 contrast ratio against the others, with an AA or AAA verdict. When a pairing fails it suggests the nearest passing shade of the same hue, adjusting lightness while leaving the hue alone. This is the step that catches a brand color which looks good in a swatch but cannot carry body text.

Frequently asked questions

How do I make a color palette from a photo?
Upload the photo, set how many colors you want with the slider, then pick a ranking mode. Vibrant suits most photographs because it skips past the near-duplicate mid-tones and surfaces the colors that give the image its character.
How many colors should a palette have?
Five or six for a photograph, two to five for a logo, and twelve or more if you are building a full theme with separate surface, border, text and accent values. The slider recalculates instantly, so it is quicker to try than to guess.
Why does my palette have colors I cannot see in the image?
Clustering returns the average of each group, so a cluster spanning a gradient reports a mid-point that may not exist as a literal pixel. Raise the color count to split those groups apart, or use the pixel picker if you need a value that is genuinely present.
Can I use an extracted palette commercially?
The color values are measurements, and colors themselves are generally not copyrightable, so the codes are yours to use. Extracting colors from a logo does not give you rights to that logo or its trademark, though — trade dress law can still apply to how you use them.
Is a palette from a photo ready to use as-is?
Treat it as a starting point. Expect to keep three or four colors, drop the near-duplicates, and add your own neutrals for text and surfaces. A photograph has no idea which of its colors needs to carry body copy.
How do I know the palette is accessible?
Select any color and the accessibility panel reports its WCAG 2.2 contrast ratio against the others, with an AA or AAA verdict and the nearest passing shade when a pairing fails.
Can I save or share a palette?
Export it. The SVG swatch strip is the most shareable form, and CSS, Tailwind, SCSS, JSON tokens and a plain HEX list are all one click away. There is no account, so nothing is stored on our side.