Image Palette Extractor
Extract the dominant colors from any image as a clean palette. Copy each swatch as HEX, RGB or HSL, or export the whole set as CSS variables or a Tailwind color scale. The extraction is deterministic and runs fully in your browser: the same image always gives the same palette, and nothing is uploaded.
Drop an image here
Your image stays on your device. Nothing is uploaded.
Drop or choose an image to extract its color palette.
What this tool does
Drop in a photo, a screenshot or a logo and this tool pulls out the colors that define it. It uses median-cut quantization, the classic algorithm that groups an image's pixels inside the RGB color cube and splits them until it has the number of representative colors you asked for. The result is deterministic: run it twice on the same image and you get exactly the same palette, so it is safe to rely on in a design system. Every swatch comes with its HEX, RGB and HSL values, ready to copy with one click, and you can export the whole palette as CSS custom properties or a Tailwind color scale to paste straight into your project. Because the image is decoded and analyzed in your browser, it never leaves your device.
What you can use it for
- Build a brand palette from a logo or a reference photo in seconds.
- Turn a mood board or a screenshot into CSS variables you can paste into a stylesheet.
- Pull a Tailwind color scale out of an illustration to keep your UI on brand.
- Grab the exact HEX of a color in a picture without a separate eyedropper tool.
- Check the dominant colors of a product photo before designing around it.
How to use it
- Drop an image onto the box, or click to choose one from your device.
- Slide the color count to pick how many swatches to extract, from 2 to 12.
- Click any swatch to copy its value in the format you selected.
- Switch the export format between HEX, RGB, HSL, CSS variables and Tailwind.
- Copy the whole palette or download it, then send the colors to the design tools below.
Everything runs inside your browser. No file is uploaded to any server. See more tools in this field.
Related tools
ImageColor Palette Generator
Generate harmonious color palettes from any base color: analogous, complementary and more. Free and in your browser, ready to copy.
Color Converter: HEX, RGB, HSL
Convert colors between HEX, RGB and HSL online. Paste any format and get the others instantly. Free, no upload and in your browser.
Color Contrast Checker (WCAG)
Check WCAG color contrast between text and background, with live previews, pass or fail grades and accessible color suggestions. In your browser.
Image Converter: PNG, JPG, WebP
Convert images between PNG, JPG and WebP online, in either direction. Fast, free and entirely in your browser, no upload needed.
Frequently asked questions
How are the colors chosen?
The tool uses median-cut quantization. It treats every pixel as a point in the RGB color cube, repeatedly splits the busiest region along its widest axis, and averages each final group into one swatch. The swatches are then ordered by how much of the image they cover, so the most dominant color comes first.
Is the palette always the same for the same image?
Yes. The algorithm is fully deterministic: there is no randomness, so the same image and the same color count always produce the exact same palette. That makes it reliable for design systems and repeatable documentation.
Is my image uploaded anywhere?
No. The image is decoded and analyzed entirely in your browser with plain JavaScript. It is never sent to a server, which is why there is no size limit and no waiting.
Which image formats work?
Any format your browser can decode: PNG, JPG, WEBP and GIF. Fully transparent pixels are ignored so they do not pull the palette toward an invisible background color.
How do I use the colors in my design?
Copy a single swatch in HEX, RGB or HSL, or export the whole palette as CSS variables or a Tailwind scale. You can also open the Palette Generator, Color Converter or Contrast Checker from the buttons below to keep working with the colors.