🎨 Image Color Picker: Get the Hex, RGB and HSL Code From Any Photo

What is the Image Color Picker?

A digital image is a grid of pixels, and every pixel stores a color as four numbers: red, green, blue and alpha (opacity), each from 0 to 255. An eyedropper, or color picker, simply reads those numbers back for the exact pixel you point at. This tool does that by drawing your image onto an HTML canvas and calling getImageData, which returns the raw red, green, blue and alpha bytes for any coordinate. There is no guessing or averaging: the value you see is the precise color stored at that pixel.

The same color can be written in several notations. Hex (for example #3B82F6) is the compact form used in CSS and design tools, where each pair of characters is one channel in base 16. RGB writes the same three channels as plain decimal numbers, rgb(59, 130, 246), which is easier to read and to tweak by hand. HSL (hue, saturation, lightness) describes the color the way a person tends to think about it: which hue on the color wheel, how vivid, and how light or dark. All three describe the identical color, so pick whichever your workflow expects.

One subtlety is that pictures saved as JPEG are compressed in a lossy way, so a region that looks like one flat color is often made of many slightly different pixels. That is why two clicks a few pixels apart on the same area can return different hex codes. The magnifier helps you see individual pixels and target the exact one you mean. For an averaged, dominant palette of a whole image rather than a single pixel, a color extractor is the better tool.

Hex, RGB and HSL all describe light, which is how a screen produces color by mixing red, green and blue beams. Print works the opposite way, by mixing cyan, magenta, yellow and black (CMYK) ink on paper, which absorbs light rather than emitting it. If you need a picked color for a print job, convert the RGB value to CMYK first: K equals 1 minus the largest of the scaled R, G, B values, and each ink channel is then (1 minus that color's scaled value minus K) divided by (1 minus K). Printed color also depends on the paper, ink and press, so treat the converted number as a starting point, not a guarantee, and ask your printer for a proof.

Chromium-based browsers ship a built-in EyeDropper API that lets a website sample any pixel on your entire screen, not just an uploaded image, but it only works in Chrome, Edge and a handful of other browsers, gives you one reading with no history, and is not available on most phones. This tool works in any modern browser and on mobile, keeps a running strip of your last twelve picks so you can compare several samples at once, and lets you zoom in with the magnifier before you commit to a click. If you actually need a small palette of the dominant colors across a whole photo rather than one exact pixel, reach for a color extractor instead; the two tools solve different problems.

Keep in mind that the number this tool reports is exact for the bytes stored in the file, not necessarily for what your eye perceives. Two monitors can render the identical hex code slightly differently depending on their calibration and color profile (sRGB, Display P3 and so on), and a photo shot under warm indoor lighting can carry a color cast that makes a white wall read as a pale yellow. If a picked color needs to match a physical object exactly, such as paint or fabric, treat the reading as a strong starting point and confirm it against a real swatch in the lighting you will actually use.

When to use it

• Grabbing the exact brand color from a logo or screenshot so you can match it in CSS or a design file.
• Identifying a paint, fabric or product color from a reference photo before you buy.
• Reverse-engineering a website or app color scheme from a screenshot when you do not have the style sheet.
• Sampling a color from artwork or a mood-board image to reuse in your own palette.
• Checking the precise pixel value at a point in a chart, map or diagram.
• Comparing the text and background colors in a screenshot to check whether the contrast is legible before you ship a design.

How to use the Image Color Picker

1. Click "Choose an image" and select a PNG, JPG, GIF, WebP or BMP file from your device.
2. Move your cursor over the image: the round magnifier shows the pixels under the crosshair.
3. Click the exact pixel you want to sample.
4. Read the hex, RGB and HSL values for that pixel.
5. Click any value box, or a swatch in the Recently picked row, to copy it to your clipboard.
6. Click Clear to start over with a different image.

Formula & method

Worked examples

The same colors written in hex, RGB, HSL and CMYK (CMYK is an approximate conversion for print)

What each pixel channel means

Which color format to use, and where

Common mistakes to avoid

• Expecting a flat color from a JPEG region. JPEG compression introduces tiny color variations, so a patch that looks solid is actually many near-identical pixels. Two nearby clicks can give slightly different hex codes. Use the magnifier to target the exact pixel, or pick a PNG source for flat colors.
• Sampling an anti-aliased edge. Pixels on the boundary between two colors are blended (anti-aliased), so they are neither color exactly. Click well inside a region, not on its edge, to get the true color you mean.
• Ignoring the alpha value. A pixel can look one color but be partly transparent. When alpha is below 255 the tool shows an rgba() value. The visible color also depends on whatever is behind it, so the hex alone may not reproduce what you saw.
• Assuming a screenshot matches the original colors. Screenshots can be affected by your display color profile, brightness and any color filters. The picked value is exact for the file, but it may differ from the source artwork it was captured from.
• Using the RGB value straight for a print job. Printers mix cyan, magenta, yellow and black ink, not light, so an RGB or hex value has to be converted to CMYK before it can be printed. The printed result usually looks a bit duller than the bright screen color, because CMYK covers a smaller range of colors than RGB. Always ask for a proof before a full print run.
• Not accounting for your monitor's color profile. Two monitors can render the exact same hex code differently depending on calibration and color profile (sRGB, Display P3 and so on). The number this tool reports is exact for the file, but if you need a color to match precisely on paper or another screen, calibrate your display or use a color-managed workflow rather than trusting the hex code alone.

Glossary

Pixel

The smallest unit of an image, a single dot that stores one color as red, green, blue and alpha values.

Eyedropper

A tool that reads back the exact color of the pixel you point at, named after the dropper icon in design software.

Hex code

A six-character color written in base 16 as #RRGGBB, the standard form in CSS and most design tools.

RGB

A color written as three decimal channels, red, green and blue, each from 0 to 255.

HSL

A color model describing hue (position on the color wheel), saturation (vividness) and lightness.

Alpha

The opacity channel of a pixel, from 0 (fully transparent) to 255 (fully opaque).

CMYK

A print color model of four inks, cyan, magenta, yellow and key (black), mixed subtractively on paper instead of mixed as light like RGB.

Color profile

A file, such as sRGB or Display P3, that tells a device how to interpret color numbers, which is why the same hex code can look slightly different on two screens.

Frequently asked questions