Your files never leave your device. All processing happens locally in your browser.
How do I get a colour palette from an image online for free without uploading it?
Open Color Palette from Image, then drop, click-to-browse or PASTE a picture. It is decoded into an offscreen canvas and its pixels are read entirely in your browser; a modified median-cut quantizer reduces them to 2–12 dominant colours, each shown with its hex, RGB, HSL, pixel share, nearest CSS colour name, WCAG contrast and a compact AA / AAA readability rating. A live eyedropper reads any exact pixel, and you can export the palette as CSS variables, JSON, a GIMP .gpl, a PNG swatch sheet, or plain HEX / RGB / HSL lists. Nothing is uploaded.
Drop, browse or paste a PNG / JPG / WebP / GIF / BMP — it never leaves your device
Modified median-cut (volume × population) so a small vivid accent isn’t swallowed by a big region
2–12 colours with hex / RGB / HSL, pixel share, nearest CSS name, WCAG contrast & AA/AAA rating
Live on-image eyedropper for any exact pixel; one-tap copy of every value
Sort by dominance, hue or lightness; export CSS vars, JSON, GIMP .gpl, PNG, or HEX/RGB/HSL
100% client-side — no upload, no server, no CDN, no tracking
What is
Color palette from image (client-side dominant-colour extraction)
Getting a colour palette from an image means reducing the millions of pixel colours in a picture to a small set of representative “dominant” colours. A client-side extractor does this entirely in the browser: the image is drawn to an HTML5 <canvas>, its RGBA pixels are read with getImageData, and a colour-quantization algorithm — here a modified median cut — clusters similar pixels and reports each cluster’s population-weighted average colour and its share of the pixels. Because a swatch is a cluster average rather than one exact pixel, the palette is a faithful approximation, and an eyedropper is provided for reading exact pixel colours.
No. The image is decoded into an offscreen canvas and its pixels are read and clustered on your own device. There is no upload, no server, no CDN and no tracking, so the picture never leaves your browser.
Color Palette from Image is 100% client-side. When you drop, browse or paste a picture it is loaded into an in-memory HTML5 <canvas>; the tool reads its RGBA pixels with getImageData and runs the whole colour-quantization and eyedropper logic in the page. No bytes are sent to a server, there is no upload endpoint and no CDN in the processing path, and nothing is logged or stored. The tool works offline once cached, keeps no accounts and sets no tracking, and the image and palette are discarded the moment you close the tab.
It uses a modified median cut: the colour cube is repeatedly split along its longest axis, always splitting the box with the largest volume times pixel count, so a small vivid accent isn’t swallowed by one big region.
The pixels are quantized with a Bloomberg/Leptonica-style modified median cut. The full set of sampled colours is treated as one box in RGB space; the engine repeatedly splits the box along its widest colour axis at the median, but it always picks the box with the greatest priority — its colour-cube volume multiplied by how many pixels it holds. Weighting by population (rather than just colour range, as plain median cut does) keeps small but distinct clusters — a logo, a bright accent — from being merged into one huge near-uniform region such as a sky. Each final box’s swatch is its population-weighted average colour, and its share of the sampled pixels is reported as a percentage.
It grades how readable that colour is as text on plain white and on plain black. AAA means ≥ 7:1 contrast, AA means ≥ 4.5:1 (normal text), AA Large means ≥ 3:1 (large / bold text or UI), and Fail is below 3:1.
Each swatch shows its WCAG contrast ratio against white and against black, plus a compact rating so you can tell at a glance whether it works as a text colour. The thresholds follow WCAG 2.x success criteria 1.4.3 / 1.4.6 / 1.4.11: ≥ 7:1 earns AAA (passes for all text), ≥ 4.5:1 earns AA (passes for normal-size text), ≥ 3:1 earns “AA Large” (passes only for large or bold text and UI components), and anything below 3:1 is a Fail. It is a quick guide that treats the swatch as text on pure white or black — it is not a substitute for testing the actual foreground/background pair you ship.
Yes. Copy the palette as CSS variables, JSON, a GIMP/Inkscape .gpl file, or plain HEX / RGB / HSL lists, or download a labelled PNG swatch sheet — all generated on your device.
After extraction you can order the palette by dominance, hue (spectrum) or lightness, then export it several ways: CSS custom properties (:root variables) to paste straight into a stylesheet, a JSON array with hex/RGB/HSL and share, a GIMP palette (.gpl) that GIMP, Inkscape and Krita import directly, plain HEX / RGB / HSL lists for professional design tools, Sketch or code, or a labelled PNG swatch sheet (each band shows the hex, pixel share and nearest CSS colour name). Every individual swatch and value is also one-tap copyable. All exports are produced locally — nothing is uploaded.
Detailed Explanation
📖How It Works
What Color Palette from Image Does
Color Palette from Image reduces the millions of pixel colours in a picture to a small set of representative dominant colours, entirely in the browser. The user drops, browses or pastes an image; it is drawn to an offscreen HTML5 <canvas>, its RGBA pixels are read with getImageData, and a modified median-cut quantizer clusters similar pixels into 2–12 swatches. Each swatch reports its hex, RGB and HSL values, its share of the sampled pixels, the nearest CSS named colour, its WCAG contrast against white and black, and a compact AA / AAA readability rating. A live eyedropper reads any exact pixel under the pointer, and a built-in local sample image lets you try it with no upload.
Input: PNG, JPG, WebP, GIF, BMP via drag-drop, file picker or clipboard paste
2–12 dominant colours, each a cluster average with a pixel-share percentage
Live on-image eyedropper for exact pixel colours (3×3 averaged)
Export CSS variables, JSON, GIMP .gpl, a PNG swatch sheet, or HEX/RGB/HSL lists
⚙️Methodology
Method: Modified Median-Cut Quantization
Pixels are quantized with a Bloomberg/Leptonica-style modified median cut, reusing the shared paletteExtractEngine so behaviour matches the other AnyTool palette tools. All sampled colours start as one box in RGB space; the engine repeatedly splits the box along its widest colour axis at the median, but it always splits the box with the greatest priority — its colour-cube volume multiplied by its pixel population. Weighting by population (not just colour range, as plain median cut does) prevents a large near-uniform region such as a sky from monopolising the palette and lets small, distinct clusters — a logo, a bright accent — stay represented. Each final box’s swatch is its population-weighted average colour; near-duplicate boxes are merged so no two identical swatches appear.
Splits along the longest RGB axis at the channel median
Keeps small vivid clusters that plain median cut would merge away
Swatch colour = population-weighted average of the box
Near-duplicate boxes merged; colours returned most-dominant first
🔧Technical Details
Sampling, Named Colours and WCAG Ratings
To stay fast on large images, the picture is rasterised with its long side capped at about 360px before sampling, and pixels are stride-sampled toward roughly 24k samples. Fully or mostly transparent pixels (alpha < 125) are skipped so the palette reflects visible colour, not the checkerboard behind a PNG. Colour maths — hex/HSL formatting, nearest-name matching in OKLab ΔE over 147 CSS keywords, WCAG contrast, and hue sorting in OKLCH — uses the culori library, loaded lazily so the page shell and ads paint first. Each swatch’s WCAG contrast against white and black is graded into a compact rating (AAA ≥ 7, AA ≥ 4.5, AA Large ≥ 3, otherwise Fail) following WCAG success criteria 1.4.3 / 1.4.6 / 1.4.11. The eyedropper averages a 3×3 window around the pointer to reduce JPEG noise.
Long side capped at ~360px; stride-sampled toward ~24k samples
Transparent pixels (alpha < 125) skipped
Nearest CSS name via perceptual OKLab ΔE over 147 keywords
WCAG rating: AAA ≥ 7, AA ≥ 4.5, AA Large ≥ 3, else Fail
culori loaded lazily; hue sort in OKLCH; eyedropper 3×3-averaged
📋Use Cases
When to Reach for This
Use it to pull a brand or mood palette out of a photo, screenshot, poster or reference image without an account, watermark or upload: seed a website or app colour scheme, match a hero image, build a moodboard, or lift a competitor’s on-screen colours. Because every swatch carries hex / RGB / HSL, its nearest CSS name and a WCAG readability rating, you can move straight from an image to accessible design tokens — export CSS variables to drop into a stylesheet, JSON for a design system, a GIMP .gpl for GIMP / Inkscape / Krita, or a PNG swatch sheet to share. The eyedropper is there when you need one exact pixel rather than a cluster average.
Turn a photo, screenshot or poster into a usable colour palette
Seed website / app schemes with hex, RGB, HSL and nearest CSS names
WCAG rating per swatch to spot accessible text colours early
Export CSS variables, JSON, GIMP .gpl or a PNG swatch sheet
Eyedropper for an exact pixel when a cluster average isn’t enough
⚠️Limitations
Honest Limitations
A swatch is the average of a cluster of similar pixels, not one exact pixel, so a subtle accent can be masked by a large near-uniform region — raise the colour count or use the eyedropper for an exact value. Because the image is sampled at a capped size, the palette is a faithful approximation rather than a per-pixel census. Colours are read in sRGB, so a wide-gamut or colour-managed original may look slightly different in a print or design app, and JPEG chroma subsampling can nudge hues. The WCAG rating treats each swatch as text on plain white or black — a quick guide, not a substitute for testing your real foreground/background pair. The tool reads pixel colour as displayed; it does not correct white balance or infer an object’s “true” colour under different lighting.
Swatches are cluster averages, not exact pixels (use the eyedropper for exact)
Capped sampling = approximation, not a per-pixel census
Read in sRGB; wide-gamut / colour-managed sources may differ on the target medium
WCAG rating is white/black only — verify your real colour pair
No white-balance / true-colour correction — pixel colour only
🔒Privacy & Security
Private by Design
Everything happens on the user’s device. The image is decoded into an in-memory HTML5 <canvas> and its pixels are read and clustered locally with no upload endpoint, no server-side processing and no CDN in the path. Even the built-in sample image is a self-contained inline SVG, so nothing is fetched. The only optional network use is consent-gated ads; the image bytes, the extracted palette and any eyedropper reading never leave the browser. The tool works offline once cached, keeps no accounts, sets no tracking, and discards the image and palette the moment the tab is closed.
Image decoded to a local <canvas>; pixels read with getImageData on-device
No upload, no server-side processing, no CDN in the extraction path
Sample image is a local inline SVG — nothing is fetched
CSS, JSON, .gpl and PNG exports all generated locally
Works offline once cached; no accounts, no tracking; discarded on tab close
Colour-quantization approaches for extracting a palette from an image
Method
How it works
Trade-off
Used here
Modified median cut
Split the box with the largest volume × pixel count
Fast; keeps small vivid accents represented
Yes
Plain median cut
Split the box with the widest colour range
Fast, but a big flat region can dominate
No
K-means clustering
Iteratively move K centroids to cluster means
Can be more faithful but slower and init-dependent
No
Frequency histogram
Bucket colours and pick the most common bins
Simple, but merges perceptually distinct colours
No
All run client-side on stride-sampled pixels; the eyedropper reads exact pixels directly. As of July 2026.
