Image Color Picker
Click any pixel of an image to get its exact color as HEX, RGB, and HSL — plus the average color of the whole image.
Designers: grab the exact shade from a photo, screenshot, or logo without opening a heavy editor. Click to sample, tap a value to copy it, and use the whole-image average for quick palette work. Sampling happens locally in your browser.
Your image never leaves your browser — colors are sampled on your device.
How to use this calculator
- Choose the image you want colors from.
- Click the exact spot on the image to sample that pixel.
- Click a HEX, RGB, or HSL chip to copy it.
- Optionally use the whole-image average shown beside it.
The formula
HEX packs the three channels as two base-16 digits each: R=212, G=175, B=55 is 0xD4, 0xAF, 0x37 — written #D4AF37. HSL is the same color expressed as hue/saturation/lightness.
Worked example
Sampling a pixel with RGB values 212, 175, 55 reports HEX #D4AF37 — and sampling pure red (255, 0, 0) reports HSL 0, 100%, 50%.
Frequently Asked Questions
How accurate is the picked color?
Exact for the pixel you click in the image as displayed. One caution: JPG photos store slightly blended values, so neighboring pixels vary by a point or two — that is the photo's own data, not measurement error. The displayed image is capped at 900 px wide for speed, and sampling maps your click to the true position.
What is the average color useful for?
It is the mean of every opaque pixel, handy as a background tint that harmonizes with the image, a placeholder color while the image loads, or a quick read on whether a photo leans warm or cool overall.
What do HEX, RGB, and HSL each mean?
They are three spellings of the same color. HEX (#D4AF37) is the web standard for CSS. RGB gives the red, green, and blue channel values 0-255. HSL describes hue (the color wheel angle), saturation, and lightness — easier to adjust by eye, e.g. 'same color but lighter'.
How do I copy a value?
Click any of the value chips (HEX, RGB, or HSL) under a sampled color and it is copied to your clipboard, confirmed by a 'Copied' note. Paste it straight into your CSS or design tool.
Is my image uploaded for analysis?
No. The image is drawn to a canvas inside your browser tab and the pixels are read locally. Nothing is sent anywhere, which makes it safe for unreleased designs and client work.