Color
Image color picker
Drop in an image and click anywhere to read its exact HEX and RGB color. Useful for sampling brand colors from a logo, screenshot, or photo.
Written by Jay Sudha · Published · Last updated
Reading exact colors from any image
This tool is an eyedropper for images: drop in a photo, screenshot, logo, or design mockup, click any pixel, and it reports that pixel's exact color as both a HEX code (like #2D7FF9) and an RGB triple (like rgb(45, 127, 249)). Each value has its own copy button, so you can grab whichever format your design tool or stylesheet expects.
It is built for sampling a color you can see but do not have the code for: matching a brand color from a logo someone sent you, lifting a shade from a reference photo, recovering a color from a screenshot of a site you cannot inspect, or checking what color a specific pixel actually is rather than what you assume it is. The reading comes from the full-resolution image, not the scaled-down preview, so it is the value of the single pixel under your click rather than a blend of its neighbors.
Because it samples one exact pixel, where you click matters. Image compression, especially JPG, adds subtle noise, so two pixels that look identical can differ by a few values. Click squarely in the middle of a flat area of color, away from edges, gradients, and shadows, to get the representative value rather than a transition pixel.
Picking the right pixel, and the format you need
HEX is the form most used in CSS and design tools; RGB is handy when you need the individual channel numbers or want to add opacity later. Both describe the same color here: pick whichever your workflow uses. Transparency is reported separately: for a semi-transparent pixel the tool tells you how opaque it is and gives its color without the transparency, and a fully transparent pixel is flagged as having no color of its own.
The image is shown scaled to fit, so on a large photo one screen pixel covers several image pixels, and your click reads the one the pointer lands on. The readout shows the x and y position of the pixel it read, so you can see exactly where you sampled. For a pinpoint sample, work from a source where the area you care about is large enough to click confidently, or crop in first. If a color looks slightly off, click a few neighboring pixels and compare; on a compressed image the values will drift a little.
For a whole scheme rather than one color, the Color Palette Generator extracts the dominant colors at once.
How your image is handled
Everything runs in your browser. The image is drawn to a canvas on your own device and color values are read locally; on this site, your image is not uploaded to our servers, and it is gone when you close or reload the page. That makes it safe to sample colors from an unreleased design or a private screenshot.
There is nothing to download here; the output is the color value you copy. If the picker reports an unexpected color, the usual reasons are clicking an edge or anti-aliased pixel, JPG compression noise, or a color profile: a photo tagged with a wider color space, such as Display P3 from a recent phone, is color-converted by your browser before it is read, so a color-managed editor can show slightly different numbers. Re-click inside a solid region and the value should settle to what you expect.
Frequently asked questions
Both a HEX code (like #2D7FF9) and an RGB triple (like rgb(45, 127, 249)) for the exact pixel you click, each with its own copy button. HEX suits CSS and design tools; RGB is handy when you need the individual channel numbers.
Compression, especially JPG, adds subtle noise, so two pixels that look identical can differ by a few values, and edges include anti-aliased transition pixels. Click squarely in the middle of a flat area of color, away from edges and gradients, for the representative value.
It samples one exact pixel at a time. If you want a set of dominant colors from the whole image at once, use the Color Palette Generator instead.
Yes, separately from the color. For a semi-transparent pixel it shows how opaque the pixel is and gives its color without the transparency, not the blend you see against the page. A fully transparent pixel is flagged as having no color of its own.
No. The image is drawn to a canvas and read entirely in your browser. On this site, your image is processed on your own device and is not uploaded to our servers; nothing is stored once you close or reload the page.