Image Color Palette Extractor
Upload any image to extract its color palette instantly. Works entirely in your browser, your image never leaves your device. Perfect for pixel art, sprites, game assets, and discovering color schemes from photos.
Drop, paste, or click to upload an image
FAQ
How does color extraction work?
The tool analyzes every pixel in your image to count unique colors using the HTML5 Canvas API. For images with 64 or fewer colors (like pixel art), it shows the exact palette. For images with more colors (like photos), it uses a median cut algorithm to reduce the palette to a manageable size while preserving the most prominent colors.
Privacy: All processing happens entirely in your browser. Your image is never uploaded to any server.
What is the median cut algorithm?
Median cut is a color quantization algorithm that reduces the number of colors in an image while maintaining visual fidelity. It works by:
- Finding the color channel (red, green, or blue) with the greatest range
- Sorting colors by that channel
- Splitting the colors into two groups at the median
- Repeating recursively until reaching the target palette size
- Averaging colors in each final group to produce representative colors
This creates a palette that captures the most visually significant colors from the original image.
Best practices for pixel art
For pixel art and sprites with limited color palettes:
- Upload PNG files to preserve exact colors, JPG compression can introduce color artifacts
- If your pixel art has 64 or fewer colors, the exact palette is shown automatically
- Use Sort by Hue or Sort by Color to organize colors for easier palette management
- Click any color row to copy its hex code for use in your pixel art tool
- You can also paste images from clipboard with Ctrl+V
Supported image formats
The tool supports all common image formats:
- PNG - best for pixel art and images with transparency
- JPG / JPEG - works, but may have slight color variations due to compression
- GIF - supported (analyzes the first frame)
- WebP - modern format with good browser support
- BMP - uncompressed format, exact colors preserved
Tip: For the most accurate color extraction, use PNG files.
What export formats are available?
You can copy to clipboard or download your palette in 8 formats:
- HEX - newline-separated hex codes (e.g. #ff6600)
- RGB - newline-separated RGB values (e.g. rgb(255, 102, 0))
- CSS - CSS custom properties ready to paste into your stylesheet
- Tailwind - Tailwind CSS config with your palette colors
- SVG - scalable vector swatch grid
- PNG - raster swatch grid with configurable swatch size
- GPL - GIMP palette format for use in GIMP, Inkscape, and other editors
- JSON - structured data with hex, RGB, and percentages
What is swatch size?
Swatch size controls the pixel dimensions of each color square when exporting your palette as PNG or SVG. For example, a swatch size of 60px means each color will be a 60×60 pixel square in the exported file.
Use smaller values (e.g. 1–10px) for compact reference files, or larger values (e.g. 60–200px) for presentation-ready palette images.
Why are large images downsampled?
Images larger than 128×128 pixels are downsampled before color quantization to improve performance. This doesn't affect the accuracy of the extracted palette because:
- The downsampling preserves color proportions and distributions
- Large images often have millions of unique colors that need quantization anyway
- Processing fewer pixels makes the tool instant and responsive
The original image dimensions are still displayed in the info panel.