Color Picker
Pick colors from image.
Loading tool…
Picking colour from an image
A colour picker reads the value of an individual pixel and reports it in the notations you need — hexadecimal for CSS, RGB channels, HSL for design work. The image is decoded to a canvas, and sampling a point returns the exact red, green, and blue values stored at those coordinates.
Two practical caveats come with that. Photographs are noisy, so adjacent pixels in what looks like a flat area can differ noticeably; sampling an average over a small region gives a more representative value than a single point. And JPEG compression subtly shifts colours, especially near edges, so a colour picked from a compressed screenshot of a brand asset may be a shade off the official value. For brand work, always confirm against the source file or the brand guide.
Why we built this tool
Designers and developers pull colours out of images constantly: matching a stylesheet to a mockup, extracting a palette from a photograph, identifying a brand colour from a screenshot, or checking that an implemented interface matches its design.
Screenshots of unreleased interfaces and client brand assets are not things to upload to a website for the sake of reading one pixel. Ours draws the image to a canvas in your browser and samples locally, so the picture never leaves your device, and the answer appears instantly with no round trip. No upload, no account, and it keeps working offline while you are deep in a design tool.
Tips and common mistakes
- Sample several nearby pixels in noisy areas and take the consistent value rather than the first one.
- Colours picked from a compressed screenshot can be a shade off; confirm brand colours against the source file.
- Check the contrast ratio of any colour pair you intend to use for text.
- Screen colour profiles differ, so a value sampled on one monitor may look different on another.
Quick start: using Color Picker
- Load the image you want to sample.
- Zoom in on the area of interest for precision.
- Click the pixel to read its colour value.
- Copy the notation your project needs — hex, RGB, or HSL.
- Sample a few nearby points if the area is noisy, and take the consistent value.
Convert between notations or build tints and shades with Color Converter.