Palette from Image

How to extract a color palette from an image

1. Drop an image on the upload area, or click it to choose a file. JPG, PNG, WebP, GIF, and any other format your browser can display, will work.
2. The tool analyzes the picture right away and shows its Dominant colors, sorted from the most to the least present.
3. Adjust the Number of colors (3 to 12) to get a broader or tighter palette. Untick Ignore white and near-white pixels if white is an important color of your image, for instance a white product or snow.
4. Copy one color with the Copy button under its swatch, or pick a format in Export as (HEX list, CSS variables, SCSS variables, JSON array or Tailwind colors) and click Copy or Download for the whole palette. Extract colors runs the analysis again.

Your image is read locally by your browser. It is never uploaded to a server.

How the dominant colors are found

The image is first drawn on an invisible canvas, scaled down so that its longest side is at most 512 pixels. This keeps the analysis fast without changing the overall colors. The pixels are then grouped with a quantization algorithm (modified median cut, from the open-source Color Thief library) working in the OKLCH color space, so colors that look alike to the eye end up in the same group.

Each group becomes one color of the palette, and the percentage under each swatch is its share of the sampled pixels. The bar above the swatches shows these proportions at a glance. Transparent pixels are skipped, and so are white and near-white pixels while the option is ticked, because plain white backgrounds would otherwise dominate most product photos and screenshots.

Every swatch shows its HEX code in black or white, whichever reads better, so the label stays legible on light and dark colors alike.

Ideas for using an image palette

• Branding and web design: build a website theme from a hero photo or a logo so that the interface matches the picture.
• Presentations and social media: pick text and background colors that fit a cover image.
• Interior design, fashion and art: capture the mood of a photo, a painting or a fabric sample.
• Data visualization: take chart colors from an illustration used in the same report.

The extracted colors are averages of many pixels, so they can look slightly less vivid than the most saturated spot in the photo. If you need the exact color of one specific pixel, use an image color picker instead.