Upload any photo and instantly extract a beautiful color palette — dominant tones, vibrant accents, or muted earthen hues. Get HEX, RGB, HSL, and OKLCH values for every color. Export as CSS custom properties, SCSS, JSON, Tailwind config, Adobe ASE swatches, or a PNG swatch sheet. All free, all instant, nothing uploaded.
How to Extract Colors from an Image
01
Upload your imageDrag and drop onto the canvas, click to browse, or paste from clipboard with Ctrl+V. Supports JPG, PNG, WebP, GIF, and AVIF up to 20MB.
02
Choose extraction settingsPick Dominant, Vibrant, or Muted mode. Set how many colors to extract (3–12). Toggle off whites and blacks for cleaner results.
03
Explore and refineHover over the image to pick any pixel. Click to lock colors. Sort by hue, brightness, or saturation. View palette in Strip, Circles, Gradient, or Tints mode.
04
Export your paletteCopy any color value in HEX, RGB, HSL, or OKLCH. Export the full palette as CSS variables, SCSS, JSON, Tailwind config, ASE, or PNG. Download all formats in one ZIP.
Everything This Tool Can Do
Median Cut Extraction
Uses a pure JavaScript Median Cut algorithm on Canvas pixel data — no external library, no server. Fast, accurate, and 100% private.
3 Extraction Modes
Dominant finds the most-present colors. Vibrant favors high-saturation hues. Muted returns earthy, pastel, and low-contrast tones.
Pixel Color Picker
Hover over the image to see a magnifier loupe with the exact color under your cursor. Click any pixel to pin that color into the palette permanently.
Lock Individual Colors
Lock any swatch so it survives re-extractions. Perfect for keeping a specific brand color while re-running the extractor for the rest of the palette.
Color Harmony Analysis
Detects whether your palette is Analogous, Complementary, Triadic, Tetradic, or Monochromatic, and plots colors on an interactive hue wheel.
4 Palette Views
Switch between Strip, Circles, Gradient (smooth blend of all colors), and Tints (5 tints + 5 shades per color) views in one click.
Color Details Panel
Click any swatch for HEX, RGB, HSL, HSV, and OKLCH values, a color name, mood tag, WCAG contrast badges, complementary color, and tints/shades row.
6 Export Formats
CSS custom properties, SCSS variables, JSON, Tailwind config, Adobe ASE binary, and a PNG swatch sheet. Use Download All for a ZIP with everything.
WCAG Contrast Checker
Every color is automatically checked for WCAG AA and AAA compliance against white and black text, so you know at a glance which combinations are accessible.
Frequently Asked Questions
Yes, 100% free. No account, no watermark, no file size limits beyond 20MB. All processing happens in your browser — nothing is uploaded to any server.
The tool draws your image to an HTML Canvas and reads every pixel's RGBA data using getImageData(). A Median Cut algorithm then recursively splits the color space to find the most representative clusters. The result is N centroids — your extracted palette colors.
Dominant returns the most-present colors by raw pixel frequency. Vibrant filters towards high-saturation colors that stand out visually. Muted prefers low-saturation, earthy, and pastel tones — great for neutral brand palettes.
Yes. Hover over the image to activate the magnifier loupe — it shows the exact color under your cursor in real time. Click any pixel to pin that color into the palette with a lock icon. Locked colors are protected from re-extraction.
You can export as CSS custom properties (--color-1: #hex), SCSS variables ($color-1: #hex), JSON array, Tailwind CSS extend block, Adobe ASE binary swatch file, and a PNG swatch sheet. The Download All button packages CSS, SCSS, JSON, and PNG into a single ZIP.
OKLCH is a modern perceptually uniform color space (Lightness, Chroma, Hue) supported in CSS since 2023. It produces more consistent and predictable color manipulations than HSL, and is increasingly used in design systems and Tailwind v4.
No. All processing is done entirely in your browser using the Canvas API and JavaScript. Your images never leave your device — no data is sent anywhere.
You can upload JPG, JPEG, PNG, WebP, GIF, and AVIF images up to 20MB.
The Harmony panel analyses the hue distribution of your extracted palette and identifies the dominant color relationship — Analogous, Complementary, Triadic, Split-Complementary, Tetradic, or Monochromatic. Colors are plotted on a hue wheel for a visual overview, and an overall mood label summarises the palette feel.
Yes. The layout is fully responsive — on smaller screens the sidebar stacks above the canvas. The pixel picker and loupe are disabled on touch devices, but all other features including upload, extraction, and export work normally.