What This Tool Does
The Image Color Picker lets you drop as many color points on an image as you need, each with its own precision zoom loupe so you can land on the exact pixel you want - no more guessing which shade of a gradient you actually clicked. It also analyzes the whole image to surface its dominant colors and can generate a random palette sampled straight from the picture.
How the Zoom Loupe Works
While you drag a color point, a circular magnifier appears showing a heavily zoomed, pixel-accurate view of the area under your cursor with a center crosshair. This makes it possible to pick exact colors even from small details, soft gradients, or anti-aliased edges where a normal click would be a guess.
How Dominant Colors Are Calculated
The dominant color panel uses k-means clustering - the same class of algorithm used in real color-analysis software - to group every pixel in the image into a handful of representative color clusters, then ranks them by how much of the image each cluster covers. Because the algorithm starts from random seed points, hitting Refresh can surface a slightly different (and sometimes more useful) grouping.
Color Formats Supported
- HEX - the standard
#RRGGBBformat used in CSS and design tools. - RGB - red, green, blue channel values from 0-255.
- HSL - hue, saturation, lightness - intuitive for adjusting shades.
- HSB - hue, saturation, brightness (also called HSV), common in design software.
- CMYK - cyan, magenta, yellow, key (black) - used for print work.
Switch formats at any time using the dropdown - every point, dominant color, and palette entry updates instantly.
How to Use It
- Upload: Drop an image or browse for one.
- Pick points: Click anywhere on the image to drop a color point. Drag any point afterward to fine-tune it with the zoom loupe.
- Explore: Check the Dominant Colors panel for the image's most prominent shades, or hit Random Palette to sample a fresh set of colors.
- Copy: Click any swatch to copy its value, or use the CSS/JSON buttons to copy an entire panel at once.
Built-In Accessibility Check
Every picked color shows small "Aa" contrast chips indicating whether black or white text would read clearly on top of it, based on the WCAG contrast ratio formula - handy when you're picking a color for a background rather than just admiring it.
Privacy & Security
Your image never leaves your device. Every pixel read, every cluster calculation, and every palette generated happens locally using the Canvas API - nothing is uploaded to a server, no account is required, and there are no usage limits.
Frequently Asked Questions
How many color points can I add?
As many as you want. Each one gets its own row in the Picked Points panel with a remove button if you want to clean up.
Why do the dominant colors change slightly each time I refresh?
The clustering algorithm starts from randomized seed points, so re-running it can land on a marginally different (and sometimes better) grouping of the same image data - the overall palette stays representative either way.
Does this tool store or upload my images?
No. Everything happens in your browser using the Canvas API. Nothing is sent to a server.