Image Dominant Color Extractor
Extract dominant colors from any image — copy as HEX, RGB, HSL, CSS vars, or JSON.
Drop an image here
PNG · JPG · WebP · GIF accepted
Preview
Colors to extract
Dominant colors (most prominent first)
About Image Dominant Color Extractor
Drop any image and instantly see its dominant color palette — extracted using the median cut algorithm. Copy individual swatches or export the entire palette as CSS custom properties, a JSON array, or a Tailwind-compatible config object. Transparent pixels are automatically excluded, making it ideal for logos and product shots with transparent backgrounds. All processing runs in-browser via the Canvas API — no uploads, no server, no account required.
Is my image uploaded?
No. The image is drawn to an in-browser Canvas and pixels are read locally. Nothing is sent to a server.
What is median cut?
Median cut is a color quantization algorithm that recursively divides the color space, always splitting the bucket with the widest color range. It produces perceptually balanced palettes and is used internally by tools like Photoshop and GIMP.
Why does the result differ from other tools?
Different tools use different quantization strategies and downsampling rates. Median cut optimizes for color-range coverage rather than raw pixel frequency, so muted background colors may outrank a small vivid accent.
Can I use the JSON output in Tailwind?
Yes — copy it, then paste the object into the theme.extend.colors section of your tailwind.config.js. Rename the keys as needed.
Related: Color Palette Generator · WCAG Contrast Checker · Tints & Shades Generator
Keywords: dominant color extractor, image color picker, extract colors from image, color palette from photo, median cut algorithm, css custom properties, design tokens, tailwind color config