How it works
The Palette Extractor analyzes any uploaded image and extracts the 5, 8, or 10 dominant colors — returning each as hex, RGB, and HSL values. It uses a median-cut quantization algorithm to identify the most representative colors from the image's full color distribution.
Color palette extraction is fundamental to brand-aligned design. Given a hero photo, the brand's primary palette should echo its dominant tones. Interior designers sample paint colors from inspiration photos. Social media managers want posts to use the same color family as the cover photo for aesthetic cohesion. UI developers extract palette colors to define CSS variables for a theme.
How to use it: upload your image. Select the number of colors to extract (5, 8, or 10). The tool processes the image and displays a color swatch grid with each color's hex, RGB, and HSL values. Click any swatch to copy the hex code. Export all colors as a JSON object, a CSS :root variables block, a SCSS variables file, or a PNG swatch grid.
Algorithm: median-cut quantization divides the color space into buckets and finds the centroid of each bucket. This produces more perceptually balanced results than simple frequency counting (which tends to return multiple near-identical shades of the dominant color).
Background masking: enable the "ignore white/near-white" toggle to exclude backgrounds from the extraction — useful for product images where a white or light-gray background would otherwise dominate the palette.
Export formats: CSS custom properties (--color-1: #3a5f8b), SCSS variables ($color-1: #3a5f8b), JSON ({"color1":"#3a5f8b"}), and a PNG swatch image suitable for style guide documentation.
Privacy: palette extraction runs in the browser Canvas API. No image data is transmitted.
Frequently Asked Questions
- The tool uses median-cut quantization: it recursively splits the image's color space into buckets of similar colors and takes the center point (average) of each bucket as the representative color. This ensures the returned palette covers the full range of colors rather than returning many variations of the dominant color.
- The algorithm finds the most statistically representative colors — these may differ slightly from the most visually prominent colors because small but intense areas (a bright red button) may not generate as much color mass as large subtle areas (a gray sky). Use the Image Color Picker to sample specific visible colors by eye.
- Yes. Export the palette as JSON and use the Figma Tokens plugin or a Sketch palette importer to import it. You can also manually copy individual hex values from the swatch grid.
- 5 colors is ideal for a minimal brand palette. 8 colors captures a full primary + secondary + neutral palette. 10 colors is useful for complex images with many distinct color regions, like a detailed illustration or a diverse group photo.