Color Palette Extractor

Extract the main colors from an image to build a color palette for your game assets.

Drag and drop an image or click to choose a file

Extracts colors from an image. Choose to show 12, 24, 48, or all colors.

Colors to Show Color Merging

What is the Color Palette Extractor?

This tool loads an image and extracts its most frequent colors into a palette. It's useful for designers and developers thinking through the color scheme of a game's backgrounds, characters, and UI.

How to Use

Drag and drop or click to select an image.
Choose the number of colors to show: 12, 24, 48, or all.
Optionally choose a strength for "Color Merging".
Click a color to copy its HEX code, or save it as PNG, JSON, or CSS.

Example

Loading a game logo shows the colors used most often in the image, in order. You could, for example, check a scheme of dark navy, blue, and white, and copy the HEX codes into a UI's CSS variables.

Using This in Game Development

Useful for checking the color tendencies of a sprite or background image, and aligning the colors of a Unity UI or in-game asset. It's also handy for organizing the color count of pixel art, or building a color rule for an entire project.

Notes

Transparent pixels are excluded from the count. Colors are extracted by sampling a downscaled copy of the image, so this doesn't enumerate every single pixel in the original. Setting "Color Merging" higher groups similar colors together.

FAQ

Is my image sent to a server?

No. Image processing happens entirely in your browser, and the image file is never uploaded to a server.

Does "all colors" get every color in the original image?

"All colors" shows every extracted color group. It excludes transparent pixels and is affected by the downscaled sampling and the Color Merging setting.

What does the CSS export produce?

It copies the currently shown palette colors as CSS custom properties, like --palette-1.