Color Palette Extractor Online Free
Upload any image and instantly extract its dominant color palette. Get HEX, RGB, and HSL values for every color. Copy any value with one click. No signup, no install.
Finding the dominant colors with k-means clustering
Extracting a palette from a photo isn’t as simple as counting unique pixel values, most photos contain tens of thousands of near duplicate colors thanks to compression noise and gradients. This tool solves it with k-means clustering, the same general purpose clustering algorithm used across data science, applied here to points in three dimensional RGB space instead of a spreadsheet of numbers. It runs entirely as plain JavaScript over canvas pixel data, no upload, no external color API.
How the clustering actually runs
That distance function, Math.sqrt(dr*dr + dg*dg + db*db), is straight Euclidean distance in RGB space. It’s not perceptually uniform, two colors a fixed distance apart in RGB don’t necessarily look equally different to a human eye, but it’s fast and it produces genuinely representative dominant colors for a general-purpose extractor.
Sort modes and what they’re computing
| Sort | Basis |
|---|---|
| Frequency | Pixel count assigned to each cluster, descending |
| Luminance | 0.299R + 0.587G + 0.114B, brightest first |
| Hue | HSL hue angle, ascending around the color wheel |
| Saturation | HSL saturation, most vivid first |
Format tabs
Every extracted color can be viewed as HEX, RGB, or HSL, all derived from the same underlying cluster center, formatting only, no re-extraction happens when you switch tabs.
PNG export
Draws each swatch as a labeled rectangle onto a new canvas and exports it as a downloadable strip image, useful for dropping a palette reference straight into a design file.
CSS and JSON export
CSS export writes a :root block with numbered custom properties; JSON export serializes each color’s index, hex, RGB object, and HSL string for use in a design token pipeline.
- k-means clustering, the general algorithm this tool applies to RGB pixel data.
- Lloyd’s algorithm, the iterative assign-and-update loop k-means implementations typically use.
- CanvasRenderingContext2D.getImageData(), the API this tool uses to read raw pixel values.
Where an extracted palette helps
Pulling a brand consistent color palette from a client’s logo or product photo, generating CSS custom properties directly from a mood board image, checking what colors actually dominate a photo before building a matching UI theme, or exporting a JSON token file from a photograph to feed into a design system pipeline. Photographers and designers also use extractors like this to quickly caption or tag images by their dominant color family.
FAQ: Color Palette Extractor Online Free
Yes, completely free. No account, no signup, no watermark, and no payment at any point. The tool works entirely in your browser.
The tool uses a k-means clustering algorithm running entirely in JavaScript. It samples pixel data from your image, groups similar colors into clusters, and returns the center color of each cluster as a dominant color. This approach gives you perceptually distinct colors rather than raw pixel values.
No. Everything runs locally in your browser using the HTML5 Canvas API and the FileReader API. Your image is read into memory and processed on your device. Nothing is sent to any server.
The tool accepts PNG, JPG, WEBP, GIF, BMP, and SVG files. Any format your browser can render as an image element will work. Large images are automatically downsampled before processing to keep it fast.
Sorting by frequency shows the most common colors first. This is useful for finding the dominant mood of the image. Sorting by brightness orders colors from lightest to darkest, which is helpful when building a tonal scale. Sorting by hue arranges colors around the color wheel, and sorting by saturation puts the most vivid colors first.
Click Export as CSS Variables. The tool copies a :root block with each color as –color-1, –color-2, and so on. Paste it at the top of your stylesheet and reference the variables anywhere in your CSS.
K-means clustering returns the average center of a color cluster, not an exact pixel color. The result is a representative dominant color for a group of similar pixels. You can increase the color count to get more specific clusters, or reduce it for a broader, more simplified palette.
From the blog
Notes on images and colour
Format choices, compression tradeoffs and accessible palettes.
