Color Palette Extractor

The tool samples pixels from your image and groups similar colours together using a median-cut algorithm. This divides the colour space recursively, separating pixels into buckets of similar hues until the desired number of colours is reached. Each bucket is then averaged to produce a single representative colour. This approach finds the most visually significant colours rather than just the most frequently occurring ones.

The CSS output exports your palette as --color-1 through --color-N custom properties inside a :root block. Paste this into your stylesheet and reference the colours anywhere with var(--color-1). This is useful for building a consistent colour system from an existing image — for example, matching a website’s palette to a product photo or brand image.

For most images, 6–8 colours captures the dominant palette well. Fewer colours (2–4) gives you the most impactful accent colours but may miss secondary tones. More colours (10–12) reveals subtle variations in shadows and highlights. Photos with lots of gradients or similar tones benefit from more colours; images with a small number of flat colours need fewer.

Dominance sorts by how many pixels each colour represents — the most common colours appear first.

Brightness sorts from darkest to lightest, which is useful for seeing your palette as a tonal scale from shadow to highlight.

Hue sorts by colour wheel position (red → orange → yellow → green → blue → purple), great for seeing the rainbow distribution of your image.

The downloaded PNG shows each colour as a tall swatch with its HEX code, RGB values, and a colour name label. The palette is 1200px wide and sized to fit all swatches, making it easy to share with design teams, clients, or save as a reference file. The background is white so it prints cleanly and works in presentations.