Color Palette Extractor
Upload an image to extract its dominant color palette instantly.
About This Tool
The Color Palette Extractor is a free browser-based tool that analyzes any image and identifies its dominant colors using a median cut quantization algorithm. Whether you are designing a website, creating a brand identity, or looking for color inspiration from photographs, this tool gives you an accurate breakdown of the most prominent colors in any image.
All processing happens entirely in your browser using the Canvas API. Your images never leave your device — there are no uploads, no server-side processing, and no third-party analytics on your data. This makes it safe for proprietary images, unreleased design assets, and confidential brand materials.
The tool extracts between 3 and 10 colors from your image, depending on the palette size you choose. Each color is displayed as a swatch with its HEX, RGB, and HSL values, along with a percentage showing how much of the image that color represents. Click any swatch to copy its color code instantly.
For accessibility-focused workflows, the built-in contrast checker lets you compare any two extracted colors to verify WCAG 2.1 contrast ratios. This is especially useful when deriving a color scheme from a photo — you can quickly confirm that your text and background color pairs meet AA or AAA compliance before using them in production.
The export feature generates production-ready code. Choose
from CSS custom properties (variables), Tailwind CSS theme
configuration, JSON data, or SVG swatches. The CSS export
creates a :root block with numbered variables, while the
Tailwind export produces a configuration object you can paste
directly into your tailwind.config.js.
If you need to pick a single color from a specific pixel, try our Image Color Picker. For converting between color formats, use the Color Converter. To check color accessibility compliance in detail, see the Accessibility Color Checker.
How to Use
- Upload an image by dragging and dropping it onto the upload area, or click to open the file picker. PNG, JPG, GIF, WebP, and SVG formats are supported.
- The tool automatically extracts the dominant colors and displays them as swatches with HEX, RGB, and HSL values.
- Adjust the Palette size slider (3-10) to extract more or fewer colors from the image.
- Click any color swatch to copy its HEX value to your clipboard.
- Enable Contrast Check mode, then click two swatches to see their WCAG contrast ratio with AA/AAA pass/fail indicators.
- Choose an Export format (CSS, Tailwind, JSON, or SVG) and click Copy to copy the generated code.
- Use the keyboard shortcut Ctrl+Shift+C to quickly copy the current export output.
- Click Clear to reset and upload a new image.
Popular Color Palette Extraction Examples
FAQ
Is my data safe when using this tool?
Yes. All image processing happens client-side in your browser using the Canvas API. Your images are never uploaded to any server. No data leaves your device, making it safe for confidential or proprietary images.
What color extraction algorithm does this tool use?
The tool uses a median cut quantization algorithm. It samples the image pixels, groups similar colors into buckets, and splits the largest color ranges until the desired palette size is reached. This produces a representative set of dominant colors weighted by their frequency in the image.
What image formats are supported?
The tool supports all common web image formats including PNG, JPEG, GIF, WebP, and SVG. Any image that can be rendered in an HTML canvas element will work.
How is the color distribution percentage calculated?
The percentage represents how many sampled pixels fall into each color bucket relative to the total number of sampled pixels. Colors with higher percentages dominate larger areas of the image.
Can I export the palette for use in my CSS or Tailwind project?
Yes. The tool generates CSS custom properties (variables) in a :root block, Tailwind CSS theme configuration as a JSON object, raw JSON with all color values, and SVG swatches. Click the format tabs and copy the output directly into your project.
What does the contrast check feature do?
The contrast check compares two extracted colors and calculates their WCAG 2.1 contrast ratio. It tells you whether the pair passes AA (4.5:1 for normal text), AAA (7:1), or AA Large (3:1 for large text) compliance levels. This helps ensure accessibility when using extracted colors for text and backgrounds.
Why do some colors look slightly different from the original image?
The quantization algorithm groups similar colors into averaged buckets. Minor rounding occurs to reduce noise and produce clean, usable color values. For pixel-perfect color picking, use the Image Color Picker tool instead.
Related Tools
Color Converter
Convert colors between HEX, RGB, HSL formats with contrast checker and palette generator.
Image Color Picker
Extract colors from any image with a visual eyedropper. Get HEX, RGB, and HSL values with one click.
CSS Gradient Generator
Create linear, radial, and conic CSS gradients visually with color stops, angle control, and live preview.
Accessibility Color Checker
Check WCAG 2.1 color contrast ratios for AA and AAA compliance. Test foreground and background color pairs with live preview.
CSS Variable Generator
Design color theme systems with CSS custom properties. Auto-generate shade scales, semantic tokens, and dark mode variants.
Tailwind CSS Converter
Convert plain CSS to Tailwind CSS utility classes. Paste CSS rules and get equivalent Tailwind classes instantly.