What it does
This tool lets you pull colors out of any image in two ways:
- 🖱️ Manual picker — click anywhere on the image and instantly get the exact color of that pixel, in HEX, RGB, and HSL.
- ✨ Auto palette extraction — automatically analyzes the whole image and generates a palette of its most dominant colors, using a color quantization algorithm (median cut).
Everything happens locally in your browser using the <canvas> API. Your image is never uploaded anywhere.
Try it
How it works
Manual picking
- When you load an image, it's drawn onto an off-screen
<canvas>at its natural resolution. - On click, the tool reads the pixel under your cursor with
CanvasRenderingContext2D.getImageData(x, y, 1, 1), which returns the exact[R, G, B, A]values at that coordinate. - Those values are converted to HEX and HSL and displayed instantly.
Automatic palette extraction
The extractor uses a simplified median cut color quantization algorithm, the same family of technique used by tools like Photoshop's "Indexed Color" conversion:
- Every pixel of the (down-sampled, for performance) image is collected into one big bucket of
[R, G, B]points. - The bucket with the greatest color range (along whichever channel — R, G, or B — varies the most) is found and split in two at its median, repeatedly, until there are as many buckets as the requested palette size.
- Each final bucket is averaged into a single representative color — that's one palette swatch.
This tends to produce visually meaningful dominant colors rather than just "the N most frequent exact pixel values," which would be skewed by noise and compression artifacts.
Notes
- Large images are automatically downscaled (max ~200px on the longest side) before extraction purely for performance — this doesn't affect the manual picker, which always reads from the full-resolution image.
- Everything — decoding, drawing, sampling, quantizing — runs with built-in browser APIs (
<canvas>,Image). No image data is ever sent over the network. - Works with PNG, JPEG, WebP, GIF (first frame), and other formats your browser can natively decode.