Image Color Extractor
Drop any PNG, JPG or WebP and extract the dominant colors. Click a result to use it as your palette base. Nothing leaves your browser.
PNG, JPG or WebP, up to 8 MB. Pixels are processed here in your browser.
Choose an image or try the sample to see its dominant colors.
Continue with this color
What this page covers
This page explains the workflow and links directly to the relevant section of the main Chromoforge tool.
- Extracts up to six dominant colors using k-means clustering in RGB space.
- Click any extracted color to set it as the palette base color immediately.
- Supports PNG, JPEG and WebP up to 8 MB.
- Extraction runs locally in the browser via the canvas API — no image is transmitted anywhere.
Worked example
The sample image contains dark blue (#182A3A), sand (#E8DED0) and terracotta (#C56B4B). Try it above, select sand, then open the contrast checker with dark blue as text. Extraction groups sampled RGB pixels into up to six clusters; results are approximate and can differ from colors at sharp edges.
Test the actual text and background together. A color name or shade number does not guarantee readable text.
:root {
--image-1: #182A3A; /* dark blue */
--image-2: #E8DED0; /* sand */
--image-3: #C56B4B; /* terracotta */
}
.card { background: var(--image-2); color: var(--image-1); }How many colors are extracted?
Six, sorted by how much of the image each one covers. The extraction runs k-means clustering on downscaled pixel data and returns the average color of each cluster, so every result stands for a group of similar pixels rather than a single sampled pixel. You get fewer than six only when two clusters resolve to the same hex value.
How accurate is the extraction?
Accurate enough for design reference work. The clustering is deterministic — the starting centroids are taken from fixed positions in the sampled pixels — so the same image always produces the same colors. The image is downscaled before sampling, so a small detail can be averaged into a larger neighbouring area. For brand-critical color matching, always verify extracted values against official brand guidelines.
Is my image uploaded anywhere?
No. The file is read from a local object URL and drawn onto a canvas element entirely in your device's memory. No network request is made during extraction.