ColorSnap
Pull a real palette out of any image, then fix it by hand. Clustering runs in a perceptual colour space, the eyedropper works at pixel level, and nothing ever leaves your browser.
Drop an image here or click to upload
PNG, JPG, WebP, AVIF, GIF, BMP, HEIC, TIFF and SVG — up to 80 MB, read in your browser
Palette
Load an image to build a palette from it.
How it works
Bring an image in
Drop it, pick it, paste it, or send it over from another oLoveTools tool. Nothing runs yet.
Set it up first
Choose how many colours you want, how deeply to sample, and which tones to ignore.
Extract when you say so
Median cut narrows the field, then k-means refines it in OKLab, where distance matches what you see.
Fix it by hand
Pin what works, drop what doesn't, and pick anything the maths missed with the eyedropper.
Sees colour the way you do
Clustering happens in OKLab, so two blues that look identical never both make the cut while the one orange in the shot gets dropped.
Eyedropper with a loupe
Zoom to the pixel, hover for the value, click to keep it. Alt-click removes the swatch closest to what you're pointing at.
Pin what already works
Lock a swatch and the rest of the palette rebuilds around it, instead of starting from scratch and losing your keeper.
Readability, checked
Real WCAG 2.1 contrast ratios against white, black and every other swatch, plus protan, deutan and tritan simulation.
100% in your browser
No upload, no model downloaded from a CDN, no network call at all. The image stays in the tab and disappears when you close it.
Exports people actually use
CSS custom properties, SCSS, a Tailwind v4 theme block, JSON, a GIMP .gpl palette, SVG swatches and a PNG sheet.
A palette that matches the image, not a blurred average of it
Most extractors shrink your photo to a thumbnail and count pixels in a fixed grid, which blends neighbouring colours together and invents shades that were never there. ColorSnap samples the image at full resolution, keeps the exact average of every colour bin it fills, and clusters those bins in OKLab — a space where numeric distance matches perceived difference. The result is the difference between a palette of four near-identical blues and one that actually contains the orange in the corner.
The heavy pass runs off the main thread
The pixel scan happens in a Web Worker on an OffscreenCanvas, so the interface stays responsive on a 50 MP photo. What comes back is a compact histogram, and every later change — palette size, saturation floor, pinned swatches — is re-solved from it in milliseconds without touching the image again.
Automatic first, manual whenever you want
Dropping a file does not start anything: the image waits while you choose the settings. You can also skip the automatic pass entirely and build the palette by hand from the first click, with zoom, a loupe, pinning and undo. Every colour is editable afterwards, and re-extraction keeps whatever you pinned.
100% private, and that is literal
There is no upload, no API, no model fetched from a CDN and no analytics on your image. Everything — decoding, sampling, clustering, exporting — happens with browser APIs inside your tab. Your image lives in memory only, and it is gone the moment you close the page.
Frequently asked questions
QIs my image sent to any server?+
No. Decoding, sampling and clustering all happen with canvas and Web Worker APIs inside your browser. There is no upload and no network request involving your image at any point.
QWhich formats can I open?+
PNG, JPG, WebP, AVIF, GIF, BMP and SVG open natively. HEIC and HEIF from an iPhone are converted in the browser, and TIFF is decoded locally too. The limit is 80 MB per file. You can drop, browse, paste from the clipboard, or receive an image from another oLoveTools tool.
QWhy doesn't it extract the palette as soon as I drop the file?+
Because the settings change the answer. Palette size, sampling depth and the saturation floor all shape what you get, and running before you have set them just wastes a pass. The image waits; you press the button. If you would rather not use the automatic pass at all, there is a button that goes straight to the eyedropper.
QWhat does the deviation number mean?+
It is the average perceptual distance, in OKLab, between the colours in your image and the palette colour each one was assigned to. Below about 3 the palette is a faithful description of the image; above 6 you are looking at a loose impression of it. Adding colours lowers it, and it is the honest way to tell whether five swatches were enough.
QWhat does pinning a colour do?+
A pinned swatch is treated as fixed. When you change the palette size or re-run the extraction, the pinned colours stay exactly as they are and the remaining slots are recomputed around them, so you never lose the one swatch you already liked.
QCan I export straight into my project?+
Yes. CSS custom properties, SCSS variables plus a map, a Tailwind v4 @theme block, JSON with HEX/RGB/HSL/OKLCH and coverage, a GIMP .gpl palette for GIMP, Inkscape and Krita, SVG swatches, plain text, and a PNG sheet. Variable names come from the colours themselves, so you get --deep-teal rather than --color-4.