About the Image Color Picker tool
Upload an image and click anywhere to read the exact color under the cursor — hex and RGB, copied to your clipboard in one click. A designer's everyday essential.
Pixel sampling happens in your browser. The image is read into memory, sampled, and discarded when you close the tab.
How to use it
- Add your image.
- Click anywhere to sample that pixel.
- Copy the HEX, RGB or HSL value.
Three notations for the same color
HEX (#2563EB) is the web standard, compact and used in CSS. RGB (37, 99, 235) states the three channel values directly and is what most design software expects.
HSL (hue, saturation, lightness) is the one to reach for when building a palette, because you can hold the hue and vary lightness to generate a consistent set of tints and shades.
Sampling accurately
JPG compression shifts individual pixel values slightly, so two neighbouring pixels in a flat area can differ. Sample from the middle of a large flat region rather than near an edge, where compression artefacts cluster.
For brand colors, always take the value from the original vector or brand guide rather than from a compressed screenshot.
Common mistakes
- Sampling from a JPG screenshot and treating the result as an exact brand color.
- Picking near an edge, where compression artefacts distort the value.
- Ignoring contrast requirements — a sampled color may be unreadable as text.
Questions people ask
Why does the same color sample differently in two places?
JPG compression alters pixel values slightly. Sample from a large flat area for the truest reading.
Which format should I use in CSS?
HEX for fixed colors, HSL when you want to generate variations programmatically.
Can I extract a whole palette?
Yes — the Color Palette Extractor pulls the dominant colors from the image at once.