Color Picker
Choose an image
Pick a file above and a sampling canvas appears here. Nothing is uploaded. The image is read and processed in this page.
Load an image, click a point, and this reads the colour of that exact pixel in hex, RGB and HSL, with a rough plain-language name. It samples one pixel, not an average of the area, which is what you want when matching a specific colour and worth knowing when the result surprises you.
How it works
The image is drawn to a canvas at its natural size and displayed scaled to fit. A click is mapped back from the displayed position to the image's own pixel grid before sampling, so the colour read is the colour at that point in the original rather than at the scaled-down position.
- Hex is the same value written in base 16. #ff8800 is red 255, green 136, blue 0.
- HSL describes the same colour as a hue angle, a saturation percentage and a lightness percentage, which is far easier to adjust by hand.
- The colour name is the nearest match from a small vocabulary, so it is a rough description rather than a standard.
- Photographs are noisy, so two adjacent pixels in what looks like a flat area can differ by several values in each channel.
One caveat worth stating: a JPEG has been through lossy compression, which shifts colours slightly, particularly near edges. If you are matching a brand colour from a screenshot, sample away from any edge, or better, get the value from the brand guidelines rather than from a picture of it.
Examples
Reading a colour
Action
Click a point
Result
#ff8800 · rgb(255, 136, 0) · hsl(32°, 100%, 50%)
Three notations for the same colour. HSL makes it obvious this is a fully saturated orange at mid lightness.
Sampling a scaled image
Image
4000px wide, displayed at 600px
Result
The pixel from the original grid
The click is mapped back by the display ratio, so you read the true colour rather than one from a downscaled preview.
Noise in a flat area
Action
Click twice in the same sky
Result
Slightly different values
Sensor noise and JPEG compression mean no photographic area is truly flat. For an average rather than a point, use the palette extractor.
Frequently asked questions
Why do two clicks in the same area give different colours?
Because it samples one pixel exactly, and no area of a photograph is uniform. Sensor noise and JPEG compression both introduce pixel-to-pixel variation. That precision is the point when matching a specific pixel; when you want the representative colour of a region, the palette extractor averages instead.
Can I pick a colour from anywhere on my screen?
Not from this page. A web page cannot read pixels outside itself, for obvious security reasons. Chrome and Edge expose a system eyedropper through the EyeDropper API on some pages, and every operating system has a screenshot tool. Take a screenshot and load it here.
Is the hex value exact?
It is exactly what is in the image file at that pixel. Whether that matches the original design is another matter: a JPEG has been through lossy compression, which shifts colours slightly, and a screenshot may have been through colour management. For a brand colour, use the published value.
What is the colour name based on?
The nearest match from a list of about 25 common colour words, by distance in RGB. It is a rough description to help orient you, not a standard. There is no authoritative naming of the 16.7 million possible colours.
How is this different from the palette extractor?
This reads one pixel that you choose. The extractor analyses the whole image and returns its dominant colours with their proportions. One answers "what colour is that", the other answers "what colours is this made of".