Image Color Picker

Upload the image above and click the pixel you want. The HEX code appears immediately, along with RGB, HSL, HSV, CMYK and Lab values, and a copy button for each. There is no sign-up and no limit on how many colours you pick or how large the image is.

Yes. "Pick from screen" opens your browser's share dialog, where you choose a specific tab, an application window, or the entire screen. What you pick appears in the picker as a live view, and you then click the area you want with the loupe to aim — exactly as you would on an uploaded image. You can freeze the frame first if the content is moving. Nothing is recorded or transmitted: the frames go straight into a canvas in the page and the capture stops when you clear it.

Use "Pick from screen" and choose that site's tab from the share dialog. The page appears in the picker and you click the colour you want. This works on images, video, gradients and canvas elements — everything an element inspector cannot tell you. If you only have a screenshot, upload it instead and click. Note that a picked pixel is the rendered colour, so where a site applies opacity or a filter you get what you actually see rather than the value written in its stylesheet.

A shortcut. It uses the browser's built-in EyeDropper API to grab a single pixel from anywhere on your display with no share dialog at all — quickest when you want one colour and know exactly where it is. It only appears in Chrome, Edge and Opera, which are the browsers that implement it, and it has no loupe or averaging. "Pick from screen" is the fuller route and works everywhere that can share a screen.

Yes. "Use the camera" opens a live view you can point at an object — a wall, a fabric, a product — and clicking reads the colour. Freeze the frame first if the image is moving. One caveat worth stating plainly: a camera reports the colour under the light in the room, and its white balance will shift that. For matching paint or fabric, use flat daylight and treat the result as a strong starting point rather than a measurement.

Pick it, and the name appears under the hex code. The match is done in CIE Lab rather than RGB, because RGB distance does not match how different two colours look — green occupies a huge part of that space and blue a small one, so a naive nearest-neighbour search calls far too many things green. The tool also tells you how close the match is: if the picked colour is not genuinely near any named one, it says so rather than printing a confident name for something 30 ΔE away.

The CSS named colours. That is a deliberate choice over a larger paint-catalogue list: every name reported here is also a valid CSS keyword, so you can paste it into a stylesheet and get exactly the colour shown. Each is also tagged with a plain family — red, blue, brown — because someone asking "what colour is this" usually wants "blue", not "cornflower blue".

Usually the sample size. A single pixel of a JPEG is not the colour of the thing it belongs to; it is that colour plus compression artefacts, which on a photo can be several shades out. Switching to 3×3 or 5×5 averages a small square and lands much closer to what you perceive. The second cause is picking near an edge, where pixels are a blend of both sides — the loupe shows you when that is happening.

No. The file is read into a canvas in your browser and every pixel is sampled locally. Nothing is transmitted, no copy is kept, and once this page has loaded the tool works with the network off. The same is true of the camera: the video stream is never sent anywhere, and the stream is stopped as soon as you clear it or leave.

By median cut. The obvious method — count the colours and take the most frequent — reliably returns five near-identical shades of whatever fills most of the frame, because a photographic sky alone contains thousands of distinct but similar values. Median cut repeatedly splits the colour volume at the median of its widest axis, so each swatch stands for a genuinely different region of the image.

They are the standard arithmetic conversion, and they are a reasonable starting point for a design brief — but they are not proofing values. A real RGB-to-CMYK conversion depends on the press, the ink and the paper, encoded in an ICC profile that a browser has no access to. Any online tool giving you CMYK without asking which profile is doing the same arithmetic; this one just says so.

Accessibility. It shows how readable your picked colour is as text on white and on black, using the WCAG 2.1 formula. The thresholds are 4.5:1 for normal body text and 3:1 for large text — below those, people with low vision will struggle, and it is the most common accessibility failure on the web.

Yes. Paste it into the field and press Convert. It accepts #4A90D9, the three-digit shorthand, eight-digit hex with alpha, rgb() and rgba() in any spacing, and CSS colour names like tomato. You get the same full readout — every format, the name, the harmonies, tints, shades and contrast — without needing an image at all.

Tints are the colour mixed toward white and shades toward black, which is how you build a usable scale from a single brand colour rather than guessing. Harmonies are colours at fixed angles around the hue wheel: complementary sits opposite for maximum separation, analogous takes the neighbours for a calm low-contrast scheme, triadic spaces three evenly. Click any of them to make it the selected colour.

Anything your browser can display: JPG, PNG, WebP, GIF, AVIF, BMP and SVG. Screenshots are the most common input and work exactly like photos. Very large images are fine — sampling reads the pixel directly at full resolution rather than from a scaled-down preview, so what you pick is the real value.