Image color picker
Pick the exact colour of any spot in a photo, screenshot or logo: HEX, RGB, HSL, OKLCH and its nearest colour name. The image never leaves this device.
Open an image, then hover or tap the spot whose colour you want.
Colour hover or tap the image
Nearest name —
Kept 0 of 24
Click the image, or tap it on a phone, to keep a swatch. Kept colours stay in this browser until you clear them.
Privacy: the image is read in your browser and never uploaded. It is opened inside this page with the browser's own canvas. The only thing saved is your list of kept colours (just the hex codes), in this browser's local storage on this device; Clear all deletes it. The page sends an anonymous page-view count and three fixed event names (open, keep, copy), never a colour, a file name or a size.
How to pick a colour from an image
- Open the image. Tap Choose an image, drop the file on the box, or copy a screenshot and press Ctrl+V (⌘V on a Mac).
- Aim. Move the mouse over the picture, or press and drag a finger on a phone: the magnifier shows the pixels around the point, the sampled ones ringed, and sits above your finger so it is not hidden. Arrow keys move the point one pixel at a time (Shift for ten).
- Choose the sample size. 1×1 reads one pixel, which is right for flat logos and screenshots. For a photo use 3×3 or 5×5, which averages 9 or 25 pixels and smooths out noise.
- Copy or keep it. Copy the HEX, RGB, HSL or OKLCH line, or click the picture (tap on a phone, or press Enter) to keep it as a swatch. Keep up to 24, then copy them all as CSS variables or JSON.
- Take it further. Each kept swatch links to the contrast checker (against white) and the colour converter with the colour already filled in.
What it cannot do
- Colours are as the file stores them, not as the object was. A photo of a wall gives the wall as the camera saw it under that light, after white balance and editing; it is not the paint's colour. The same wall in shade and in sun can differ by dozens of RGB levels.
- No paint brand or Pantone codes. The only names are the 148 standard CSS colour names, and the "nearest" one can be clearly different (see the distance).
- Wide-gamut photos are converted to sRGB. HEX and RGB are sRGB values, so a vivid Display P3 or Adobe RGB colour outside sRGB is clipped to the nearest one sRGB can show.
- Very large images are read from a smaller copy. Above about 16.7 megapixels (4,096 × 4,096) some browsers, iPhone Safari among them, refuse a canvas that big; the page then says so and samples a scaled-down copy, where one pixel is the average of several.
- Pick from screen appears only in browsers with the EyeDropper feature (desktop Chrome, Edge and Opera); Safari and Firefox do not have it yet, so the button is hidden there.
Reading the values
| Format | Example (#3A7BD5) | Use it for |
|---|---|---|
| HEX | #3A7BD5 | CSS, design tools, brand guides: the short form most apps accept |
| RGB | rgb(58, 123, 213) | Red, green, blue from 0 to 255; what Office, Canva and most code take |
| HSL | hsl(215, 65%, 53%) | Hue in degrees, saturation, lightness; easy to make a lighter or darker shade |
| OKLCH | oklch(58.6% 0.153 257.2) | Modern CSS: lightness that matches how bright it looks, chroma, hue |
The nearest name is found by distance in the OKLab colour space (deltaE OK, scaled so a just-noticeable difference is about 2). #3A7BD5's nearest name is royalblue (#4169E1) at 5.2: close, but you can see they differ. A picked logo blue rarely has a name of its own, so the distance tells you how far to trust the name.
Questions
How do I get the hex code of a colour in an image?
Open the image on this page, then hover over the spot (or tap it on a phone). The magnifier shows the pixels around your pointer with the sampled one ringed, and the HEX code, such as #3A7BD5, appears beside the image with a Copy button. Click or tap to keep the colour as a swatch.
Is there an online image color picker that does not upload the picture?
Yes, this one. The page runs online in your browser, but the picture is opened and read inside the page with the browser's own canvas, so it is never sent to a server, and it keeps working in airplane mode once loaded. Kept swatches are saved only in this browser's local storage, and Clear all deletes them.
How do I find the name of a colour in a picture?
Pick the spot and read the Nearest name line: the closest of the 148 named colours in the CSS Color 4 standard, with its distance. 0 means an exact match, under about 2 is hard to tell apart, and above 10 is clearly a different colour, so treat a large distance as "roughly this", not as the colour's name. Where two names are the same colour (gray and grey, aqua and cyan, fuchsia and magenta) both are shown.
How do I get the RGB value of a pixel?
Hover or tap the pixel and copy the RGB line, written as rgb(58, 123, 213): red, green and blue from 0 to 255. In a photo, neighbouring pixels differ because of sensor noise and JPEG compression (which also stores colour at half resolution in most photos), so switch Sample to 3×3 or 5×5 to read the average of 9 or 25 pixels instead of one.