Image

How to Pick a Color from an Image

Dev Nexus4 min read

Use an eyedropper to sample the exact pixel color you want and copy it as HEX, RGB or HSL - accurately, and without guessing by eye.

You have an image - a logo, a mockup, a screenshot, a photo - and you need the exact color of one part of it. Not "about that shade of purple", but the precise code you can paste into your CSS or design tool.

An eyedropper does exactly that. It samples the color of a single pixel and reports it back as a code you can copy. This guide walks through picking a color from an image and reading it as HEX, RGB or HSL, and the small details that keep your sample accurate.

The Problem

Matching a color by eye is unreliable. Two shades that look identical on screen can be several values apart, and "close enough" shows up immediately when a button or heading sits next to the real brand color. Manually reading a color is even harder when all you have is a screenshot or an exported PNG rather than the original design file.

The other trap is precision. Zoom into any gradient, drop shadow or anti-aliased edge and neighbouring pixels differ. Sample the wrong one and your "exact" match is off by a hair - enough to notice, not always enough to explain.

The Solution

The fix is to read the pixel's color directly instead of guessing. Open the Color Picker, load your image, hover the eyedropper over the exact spot you want, and click. The tool reads that pixel's raw RGBA value and converts it into HEX, RGB and HSL at once, with a live swatch so you can confirm the match.

Because it runs entirely in your browser, the image never leaves your device - safe for confidential mockups and client work. Once you have the code, copy it in one click and paste it wherever you need. If you then need to change the image's format or size, Convert Image handles that locally too.

Step-by-Step Guide

1
Load your image
Open the Color Picker and drop your image onto it, or click to choose a file. It is read locally in the browser, so nothing is uploaded - a screenshot, PNG, JPEG or photo all work.
2
Move the eyedropper to the target pixel
Hover over the image and a crosshair follows your pointer, previewing the color underneath. Line it up on the exact spot you want - a button fill, a brand accent, one stop in a gradient.
3
Zoom in for precision
On gradients, shadows and anti-aliased edges, adjacent pixels differ slightly. Zoom in so a single pixel is easy to hit, which avoids accidentally sampling a neighbouring color.
4
Click to sample the color
Click the pixel to lock it in. The tool reads its RGBA value and shows the color as HEX, RGB and HSL together, plus a swatch so you can visually confirm the result.
5
Copy the format you need
Use the copy button beside HEX, RGB or HSL to grab the notation your CSS or design tool expects, then paste it straight into your code or file.

Common Mistakes

Sampling from a lossy JPEG
JPEG compression shifts colors slightly, so a HEX pulled from a JPEG can differ from the original design value. Sample from a PNG or the source file when you need an exact match.
Clicking without zooming on gradients
On smooth gradients and soft edges, neighbouring pixels vary. Picking at normal zoom can grab the wrong pixel. Zoom in first so you hit exactly the color you mean.
Ignoring transparency
A semi-transparent pixel's visible color depends on the background behind it. The same pixel looks different over dark versus white, so account for the backdrop when matching.
Copying the wrong format
Pasting an RGB string where a HEX is expected - or dropping an alpha channel your target needs - breaks the style. Copy the notation that matches where it is going.

Frequently Asked Questions

How do I get the HEX code of a color in an image?

Load the image into an online color picker, move the eyedropper over the pixel you want, and click. The tool reads that pixel and shows its HEX code, which you can copy in one click.

Can I pick a color from a screenshot?

Yes. A screenshot is just an image, so you can load it and sample any pixel's color - useful for matching a color from a live site when you do not have its source styles.

Is my image uploaded when I pick a color?

No. The Color Picker reads the image locally in your browser using the canvas API, so the file never leaves your device and the tool works offline.

Why is my picked color slightly off from the original?

Usually because the image is a lossy JPEG or was captured through a color profile that shifted the values. Sample from a PNG or the original asset for an exact match.

What is the difference between the HEX and RGB values I get?

They are the same color in different notations - HEX is a compact hexadecimal string, RGB lists the red, green and blue channels as numbers. Use whichever your target tool expects.