NineClip Free Tools

Image Color Picker

Upload an image and click any pixel to read its exact colour as HEX, RGB, HSL and CMYK. Click a value to copy it. The picture stays in your browser.

Updated

Image Tools● Free No upload Instant

Loading Image Color Picker…

Your browser is preparing the tool. It runs 100% locally.

Quick answer

The Image Color Picker is an eyedropper for an uploaded image. Click any pixel and it reads that pixel's colour from a canvas and shows it as HEX, RGB, HSL and CMYK; click a value to copy it. It works in any browser and runs on your device, so the image is never uploaded. It reads one pixel at a time, in the sRGB colour space.

What the Image Color Picker does

You upload a picture and click a spot on it. The tool reports the colour of that pixel in HEX, RGB, HSL and CMYK at the same time, and one click copies any of them to your clipboard.

A swatch picker makes you guess a colour. This one samples a real photo or graphic, so you can lift the colour straight out of a logo, screenshot, mockup or photograph.

How it works

The tool draws your image onto a canvas in the page. When you click, it maps the click position to the matching canvas pixel, reads that pixel's red, green and blue bytes with getImageData, and converts them to the other formats.

The code runs in JavaScript on your device. Your picture is not uploaded, and the tool behaves the same on a phone as on a desktop.

Processing pipeline

  1. Upload an image. Drop in or choose any image. The tool draws it onto a canvas in your browser.
  2. Click a pixel. The cursor turns into a crosshair. Click anywhere on the image to sample that point.
  3. It reads the colour. The tool reads that pixel's red, green and blue values from the canvas.
  4. Copy any format. You see HEX, RGB, an rgb() string, HSL and CMYK. Click any value to copy it.

Privacy

The tool samples pixel colours from a canvas in your browser. It sends the image to no server and keeps no copy of it.

When you close the tab, the image is cleared from memory. That makes the picker safe to use on unreleased artwork or private screenshots.

Technical details

ActionUpload, then click a pixel
ReadsExact pixel colour via canvas getImageData
OutputsHEX, RGB, rgb(), HSL, CMYK
CopyClick any value
Colour spacesRGB
Large imagesScaled to 2000px on the longest side
UploadNone: the image is read in your browser

Standards and references

  • Canvas getImageData (MDN): reads pixel data from the canvas as red, green, blue and alpha bytes (0 to 255) in the sRGB colour space. This tool reports those values.
  • EyeDropper API (Chromium 95+): the built-in browser eyedropper can sample any pixel on screen, but only Chromium browsers support it (Safari and Firefox do not yet). This canvas-based tool works on an uploaded image in any browser.
  • sRGB (IEC 61966-2-1): the default colour space the canvas reads. An embedded wide-gamut (Display-P3) profile is not applied, so values are reported in sRGB.
  • CMYK approximation: the CMYK percentages come from a profile-free formula, the same one the other colour tools use. Treat them as a screen-to-print estimate, not colour-managed output.

Accuracy and limits

It reads one pixel, not an average of an area. Neighbouring pixels can differ on a JPEG-compressed, noisy or anti-aliased edge, so click the middle of a flat area to get a representative colour.

Images up to 2000px on the longest side give you the exact source pixel. The tool scales larger images down for speed, so on those a picked colour is the displayed pixel, which blends a few nearby source pixels.

The canvas reads colour in sRGB. If your image carries a wide-gamut (Display-P3) profile, the values still come back as sRGB, so very saturated colours can differ slightly from what a colour-managed editor shows.

HEX, RGB and HSL are exact conversions of the pixel. The CMYK percentages are a profile-free approximation for rough print reference.

Fully transparent areas read as black (0, 0, 0) because the canvas has nothing behind them. Click an opaque part of the image instead.

Real-world uses

Matching a brand colour

Pull the exact HEX from a logo or a screenshot to reuse it elsewhere.

Sampling from a photo

Lift a colour from a photograph to build a palette or design around it.

Web and UI work

Read a colour from a mockup and drop the HEX or rgb() straight into CSS.

Checking a pixel

See what a colour really is, in four formats side by side.

When it fits, and when it doesn't

Good for

  • Reading a colour from an uploaded image
  • Matching a brand HEX from a logo or screenshot
  • Sampling a photo for a palette
  • Getting HEX, RGB, HSL and CMYK from one pixel

Not the best choice for

  • Picking a colour from anywhere on your screen
  • Averaging a region instead of one pixel
  • Colour-managed, print-accurate CMYK
  • Reading a wide-gamut value exactly

To pick from a swatch rather than an image, use the Color Picker. To pull a whole palette from an image automatically, use the Color Palette Extractor. To sample anywhere on screen, use a Chromium browser's built-in eyedropper or a desktop tool.

Frequently asked questions

How do I pick a colour from an image?
Upload the image and click any pixel. The tool reads that pixel's colour and shows it as HEX, RGB, HSL and CMYK; click any value to copy it.
Does it pick the exact pixel I click?
Yes, for images up to 2000px on the longest side. The tool scales larger images down for speed, so on those the picked colour is the displayed pixel, a blend of a few nearby source pixels.
What formats does it give me?
HEX, RGB (as numbers and as an rgb() string), HSL and CMYK. Each of the five values copies with one click.
Can I pick a colour from anywhere on my screen?
No. This tool works on an image you upload. To sample anywhere on screen, use a Chromium browser's built-in eyedropper or a desktop colour tool.
Is my image uploaded?
No. The image is drawn onto a canvas in your browser and read locally. Nothing is sent to a server.
Why does the colour look slightly off from my editor?
There are two likely causes. A single pixel on a JPEG or an edge can differ from its neighbours, and the canvas reads in sRGB, so a wide-gamut image can come out a little different. Click a flat area for a representative colour.
Is the CMYK accurate for printing?
Treat it as a rough guide. The CMYK is a profile-free approximation; real print work needs a colour-managed conversion with an ICC profile for your press and paper.
Why is the picked colour a blend on a big photo?
Images over 2000px are scaled down so the page stays fast, and scaling blends pixels. Pick from an image at or under 2000px on the longest side for the exact original pixel.
What happens if I click a transparent area?
It reads as black (0, 0, 0), because the canvas has no background behind a transparent pixel. Click an opaque part of the image to get a real colour.
Which colour does it read on an edge?
Exactly the pixel under your click. Anti-aliased edges blend two colours, so click a flat interior area for the true colour.
Does it work on mobile?
Yes. Tap the image to pick a colour. Reading and copying work the same way on a phone.
Is it free?
Yes. It costs nothing and you do not need an account.

References

Checked against the tool's code, which draws your image to a canvas and reads the clicked pixel with getImageData in sRGB. The page states the limits that follow from that: you get a single-pixel sample, very large images are scaled down, and the CMYK figures are a profile-free approximation.

PopularHot

Image Compressor

Compress an image to JPEG with a quality slider and watch the file size drop as you drag, in your browser.

ImageOpen Tool
PopularNo Upload

Image Resizer

Resize an image to exact pixel dimensions in your browser, with the aspect ratio locked and a lossless PNG out.

ImageOpen Tool
Popular

Image Cropper

Drag a box over the part of the picture you want to keep and download just that region as a lossless PNG.

ImageOpen Tool
Trending

PNG to WebP Converter

Convert a PNG to a much smaller WebP in your browser, keeping transparency, at 92% quality.

ImageOpen Tool

JPG to PNG Converter

Convert a JPG to a lossless PNG in your browser. Nothing more is lost from here on, though the JPEG's existing compression stays.

ImageOpen Tool

PNG to JPG Converter

Turn a PNG into a smaller JPG in your browser. Transparent areas become white and the JPEG is saved at 92% quality.

ImageOpen Tool

Back to the Image Color Picker

Your file is processed on this device and never uploaded, and there's no account to create.

Go to the tool Explore Image Tools