Color Palette from Image
Upload any image and extract its dominant colors instantly. The tool reads every pixel, runs median cut quantization to group similar colors, and returns a sorted palette of swatches with hex codes, RGB values, and population percentages. All processing happens in your browser.
How to Use
- Drop or click to upload an image (PNG, JPEG, WebP, GIF, BMP, or SVG)
- Adjust the color count slider (2-16 colors)
- Click any swatch’s Copy button to copy its hex code
- Export the full palette as CSS variables or JSON
How Median Cut Quantization Works
The color in each pixel is a point in 3D space where red, green, and blue are the axes. An 800x800 image produces 640,000 points. Median cut builds a bounding box around all these points and splits it at the median along the longest axis, creating two smaller boxes. Each box is recursively split until the target number of boxes is reached. The pixels in each box are averaged to produce a single swatch color.
This approach preserves color contrast better than simple clustering. The split at the median ensures each resulting box contains a roughly equal number of pixels, so the palette represents the image’s actual color distribution rather than over-weighting the background.
The tool filters out transparent pixels (alpha < 25), near-black pixels (average < 15), and near-white pixels (average > 240) before quantization. These pixels rarely contribute useful palette information and would otherwise consume slots with black, white, or edge anti-aliasing artifacts.
When to Use Different Color Counts
2-4 colors produce flat, posterized palettes. Use these for minimal logo color extraction or when you need a simplified brand palette.
6-8 colors give a balanced representation of most images. Photographs with natural lighting, landscapes, and product shots work well at this range.
10-16 colors capture subtle hue shifts in gradients, sunsets, fabric textures, and other images with wide tonal range. The tradeoff is some colors will be very similar.
Use in CSS and Design Workflows
The CSS export produces named variables that map to each swatch. Example output for an 8-color palette:
:root {
--color-palette-1: #1a365d;
--color-palette-2: #2b6cb0;
--color-palette-3: #63b3ed;
--color-palette-4: #bee3f8;
--color-palette-5: #2d3748;
--color-palette-6: #4a5568;
--color-palette-7: #e2e8f0;
--color-palette-8: #f7fafc;
}The JSON export returns structured data with hex, RGB, and population percentage. Useful for design tokens in build systems.
Related Tools
Need to convert a single color between formats? Use the Color Converter. Generate CSS gradients from your palette with the CSS Gradient Generator. Check accessibility contrast before using extracted colors in interfaces with the WCAG Contrast Checker.