Image Color Palette Extractor

How to use

1. 1Drag and drop an image into the dropzone, or click to choose a file. PNG, JPG, JPEG, WebP, GIF, AVIF, BMP, and SVG are supported up to 20 MB.
2. 2Pick a palette size with the preset buttons (4, 5, 6, 8, 10, 12) or type a custom value between 2 and 16. The palette refreshes instantly when you change the size.
3. 3Use the Sort by buttons to order the swatches by Frequency, Hue, Lightness, or Dark to light to match how you plan to use the colours.
4. 4Click HEX, RGB, or HSL on any swatch to copy that format. Each card also shows the share of pixels the colour represents in the image.
5. 5Open the Export panel, pick HEX list, CSS variables, SCSS, Tailwind config, JSON, or Comma separated, and use the Copy button to grab the whole palette in one go.

About this tool

Image Color Palette Extractor pulls the most representative colours out of a dropped image and gives you a clean, usable palette with HEX, RGB, and HSL codes. Unlike a single-pixel colour picker, the extractor runs median-cut quantization (the classic algorithm used by GIMP and most palette generators) over a downscaled copy of your image. Median-cut repeatedly splits the largest box of pixels along its widest colour axis at the median, so the resulting palette is balanced and the colours genuinely differ from each other rather than being a cluster of near-identical shades. Pick how many colours you want (anywhere from 2 to 16), sort the result by frequency, hue, lightness, or dark to light, and copy each swatch as HEX, RGB, or HSL with one click. The export panel produces a HEX list, CSS custom properties, SCSS variables, a Tailwind config snippet, a JSON dump that includes the share of pixels each colour represents, or a comma-separated string you can paste into Figma, Canva, or a brand brief. Transparent pixels are skipped so PNG logos with see-through backgrounds give clean results, large images are downscaled before analysis so the tool stays fast even on phone-camera photos, and a gradient strip across the palette shows the overall colour balance at a glance. Useful for designers building a brand kit from a photo, marketers grabbing colours from a screenshot, developers porting a mockup into CSS, illustrators pulling a swatch set from a reference image, and anyone who needs the actual codes behind the colours they can see. The image you drop is decoded in your browser and the pixel buffer never leaves your device.

Free to use. Works in your browser. No signup, no login.