About this tool
This tool draws your image onto an HTML canvas and reads the color value of whatever pixel you click, using the Canvas API's pixel data access. Images wider than 640 pixels are scaled down to 640 pixels wide before sampling, so on large images each sampled pixel can be a blend of several neighboring pixels from the original file; for pixel-exact values, crop or resize the image to 640 pixels wide or less first. Everything happens locally in your browser — the image is never uploaded anywhere.
How to use the Image Color Picker
- Choose an image from your device.
- Click anywhere on the image to sample the color at that point.
- Read the HEX and RGB values — click a different spot to sample again.
Common use cases
- Matching a brand color from a logo or screenshot in your own design work
- Pulling the exact background color out of a photo for a website or graphic
- Checking the precise hex code of a color you saw somewhere and want to reuse
Getting an accurate sample
For the most representative result, click in the middle of a solid, evenly-colored area rather than near an edge or a gradient — pixels right at a boundary between two colors can pick up a blended or anti-aliased value that doesn't quite match either color. Compressed image formats like JPEG can also introduce tiny color variations between adjacent pixels that aren't visible to the eye but do show up in a single-pixel reading; if you need a precise brand color, a PNG or the original source file will usually give a cleaner result than a heavily compressed JPEG.
Things to watch out for
The color you sample comes from the image data (scaled down if the image is wider than 640 pixels), which isn't always identical to how the color looked in person — photos are affected by lighting, camera white balance, and screen calibration, so a "red" sampled from a photo may read slightly differently than the same red viewed in real life. If you need the result in a different format (like converting HEX to HSL, or vice versa), pass the value into the Color Converter.
How a HEX code maps to RGB
A HEX color is the same three numbers as RGB, written in base 16. The six digits are three pairs, one each for red, green and blue, and each pair runs from 00 (0) to FF (255). To convert #1E90FF:
- Red
1E= 1 × 16 + 14 = 30 - Green
90= 9 × 16 + 0 = 144 - Blue
FF= 15 × 16 + 15 = 255
So #1E90FF is rgb(30, 144, 255). The digits A to F stand for 10 to 15. Each channel has 256 levels, so there are 256 × 256 × 256 = 16,777,216 possible colors. The picker shows HEX in capitals; #1e90ff is the same color, because CSS treats HEX codes case-insensitively.
Large images are sampled at display size
To fit the page, images wider than 640 pixels are scaled down to 640 pixels wide before sampling. Each pixel you click in a large photo is therefore a blend of several original pixels. On flat areas of color that makes no difference. On fine detail, such as thin text, a one-pixel line or a sharp edge, the value can differ from any single pixel in the original file. For an exact reading of a tiny detail, crop the area you need first so the image is 640 pixels wide or less, then load the crop.
Transparent areas
The picker reports only red, green and blue, not transparency. Fully transparent pixels in a PNG or WebP are stored by the canvas as transparent black, so clicking one reads #000000 even though it looks like the page background. Click on an opaque part of the image, or flatten the image onto a solid background first.
From a picked color to a usable palette
Once you have a HEX value, paste it into the Color Converter for HSL, or into the Contrast Checker to see whether text in that color is readable on your background. The WCAG contrast guide explains the 4.5:1 minimum for normal body text.
Frequently asked questions
No. The image is read directly into your browser and drawn to a canvas element locally — it's never uploaded or transmitted anywhere.
You're seeing the color of the single pixel you clicked (on images wider than 640 pixels, a pixel of the scaled-down copy), which can look different from the surrounding area, especially near edges, gradients, or JPEG compression artifacts. Zoom in or pick a spot in a flatter color area for the most representative result.
The Color Converter translates a color value you already know between HEX, RGB, and HSL. This tool extracts a color value from an actual image — use this first if you're starting from a photo, then the Color Converter if you need it in a different format.
Choose the photo, then click the spot whose color you want. The tool reads that pixel from a canvas in your browser and shows its HEX code, such as #1E90FF, and its RGB values. Click in a flat, evenly colored area for the most representative result.
The picker reports red, green and blue only. Browsers store fully transparent pixels as transparent black, so their RGB values are 0, 0, 0 even though you see the page background through them. Sample an opaque part of the image or flatten it onto a solid color first.