Color Palette from Image

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.

What is a Color Palette Extractor?

A color palette extractor analyzes an image and identifies its dominant colors, returning a sorted list of swatches with their hex codes, RGB values, and the percentage of pixels each color represents. This is useful for matching brand colors from a logo, creating cohesive design themes from photographs, building UI color systems from reference images, and ensuring accessibility by understanding the actual color distribution. The most common algorithm is median cut quantization, which groups similar pixels in 3D color space and averages each group to produce a representative swatch.

How to Use

1. Drop or click to upload an image (PNG, JPEG, WebP, GIF, BMP, or SVG)
2. Adjust the color count slider (2-16 colors)
3. Click any swatch’s Copy button to copy its hex code
4. 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.