HTML Image Color Picker
Love a color in a photo and want its hex code? Drop the image in and grab the dominant palette instantly, or click any pixel with the built-in eyedropper. Every code copies with a single click, and your image never leaves your browser.
or
Two ways to grab a color
The palette
The tool scans the pixels and pulls out the six most common colors as swatches. Perfect for matching a design to a photo.
The eyedropper
Want one specific spot? Click anywhere on the image and the exact pixel color lands on your clipboard as a hex code.
Hex everywhere
You get clean hex codes like #b95953 that drop straight into your HTML and CSS.
Totally private
Everything is read with a canvas in your browser. Nothing is uploaded, so even big images stay on your machine.
How to use it
- Add an image. Drag a file onto the box or browse for one.
- Read the palette. Six dominant colors appear as swatches with their hex codes.
- Copy a color. Click a swatch to copy its hex, or click anywhere on the image to grab that exact pixel.
- Paste and go. Drop the hex into your stylesheet, design tool or wherever you need it.
Frequently asked questions
How do I get the colors from an image?
Drop an image in and the tool reads its pixels to show the six most common colors as swatches. Click any swatch to copy its hex, or click the image to grab the exact color of that pixel.
Are my images uploaded to a server?
No. The image is read locally with an HTML canvas, so it never leaves your device. The tool is free and works offline once loaded.
What color format do I get?
Hex codes like #b95953, which work everywhere in HTML and CSS. Clicking a swatch or a pixel copies the hex value to your clipboard.
Why are the palette colors approximate?
To stay fast, the tool groups similar shades together and averages them. The eyedropper, on the other hand, gives you the precise value of a single pixel.
Further reading: the MDN getImageData reference, Wikipedia on color quantization, and Wikipedia on web colors.
Found your colors? Get the image itself web-ready next.
Open the Image Optimizer→