Design starts with a color palette, and inspiration often comes from photos, screenshots, or brand assets. The Rankato Image Palette Extractor analyzes an image and returns its most-representative colors using median-cut quantization (the same technique in Adobe's palette generator and Chrome's Vibrant.js). Export directly as CSS custom properties, a Tailwind config snippet, an ASE file, or a JSON array.
How palette extraction works
The tool quantizes every pixel to a limited palette using median-cut (a well-established color quantization algorithm) and returns the resulting color list sorted by prevalence. The first color is usually the background; subsequent colors capture the image's dominant tones. 6 colors is enough for most palettes; bump to 12 for a broader spectrum.
Vibrant vs. muted
Two modes: Dominant returns colors by pixel count (favors backgrounds and large areas). Vibrant post-filters to favor saturated, memorable colors — usually more useful for brand analysis. Toggle both to compare.
Export formats
Export the palette as: CSS custom properties (--color-primary: #...), a Tailwind theme.extend.colors object, an Adobe Swatch Exchange (.ase) file for import into Photoshop/Illustrator, a Sketch palette, or plain JSON. Each format is a copy-paste away.