Inspect
Pull a brand palette from any image
Drop an image — get the 6 to 12 dominant colors in HEX, RGB, and HSL. Click any swatch to copy. Great for matching designs to inspiration photos or product photography.
Drop an image to extract its palette
JPG, PNG, WEBP — works best with photos and product shots
How dominant color extraction works
Behind the scenes, the tool samples pixels from your image, places each pixel in 3D RGB color space, and runs a median-cut algorithm to partition the space into N color buckets. The center of each bucket is returned as a representative color, and the size of each bucket is reported as the percentage of the image it represents. This is the same algorithm used in libraries like color-thief and the original GIMP indexed-color quantizer.
Use cases
- Brand identity — extract a palette from a hero photo to match site colors to imagery.
- Mood boards — pull palettes from inspiration photos and combine into a moodboard CSS variable set.
- Tailwind / CSS variable generation — get the exact HEX values to drop into
tailwind.config.jsor:rootcustom properties. - Product photography — derive accent colors from your product shots so the surrounding UI feels coordinated.
- Wallpaper-matched themes — extract colors from a desktop wallpaper to generate a matching VS Code or terminal theme.
Tips for good palettes
- Use high-contrast source images — washed-out photos return washed-out palettes.
- Crop first if you need accent colors — if you only care about the colors of the subject (not the background), crop the image first.
- Start with 4–6 colors — that's the practical maximum for a usable brand system.
- Check the percentages — colors below 5% are usually noise. Use them as accents at most.