🎨 Image Color Picker (Eyedropper)
By ToolNimba Editorial Team · Updated 2026-06-19
PNG, JPG, GIF, WebP or BMP. The image is read in your browser and never leaves your device.
Choose an image, then click a pixel to read its color.
This image color picker lets you pull the exact color out of any photo, screenshot or graphic. Upload an image, move your cursor over it to magnify the pixels, then click the spot you want. The tool reads that single pixel and shows its hex, RGB and HSL values, ready to copy with one click. It works entirely in your browser, so the picture never leaves your device.
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.
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.
How to use the Image Color Picker
- Click "Choose an image" and select a PNG, JPG, GIF, WebP or BMP file from your device.
- Move your cursor over the image: the round magnifier shows the pixels under the crosshair.
- Click the exact pixel you want to sample.
- Read the hex, RGB and HSL values for that pixel.
- Click any value box (or a swatch in the recently-picked row) to copy it to your clipboard.
Formula & method
Worked examples
You click a pixel whose channels read R = 255, G = 0, B = 0 (pure red).
- Hex: 255 = FF, 0 = 00, 0 = 00, so the code is #FF0000
- RGB: rgb(255, 0, 0)
- Scale to 0 to 1: max = 1 (red), min = 0
- Lightness L = (1 + 0) ÷ 2 = 0.5 = 50%
- Saturation = (max − min) ÷ (max + min) = 1 ÷ 1 = 100%
- Hue is on the red point of the wheel = 0 degrees
Result: HEX #FF0000 · rgb(255, 0, 0) · hsl(0, 100%, 50%)
You click a mid-grey pixel with R = 128, G = 128, B = 128.
- Hex: 128 = 80 in base 16, so all three pairs are 80, giving #808080
- RGB: rgb(128, 128, 128)
- Scale to 0 to 1: max = min = 0.502
- Lightness L = (0.502 + 0.502) ÷ 2 = 0.502 = 50%
- Saturation = 0 because max equals min (no color, pure grey)
- Hue is undefined for grey and reported as 0
Result: HEX #808080 · rgb(128, 128, 128) · hsl(0, 0%, 50%)
The same colors written in hex, RGB and HSL
| Color | Hex | RGB | HSL |
|---|---|---|---|
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Mid grey | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
What each pixel channel means
| Channel | Range | Meaning |
|---|---|---|
| Red (R) | 0 to 255 | Amount of red light in the pixel |
| Green (G) | 0 to 255 | Amount of green light in the pixel |
| Blue (B) | 0 to 255 | Amount of blue light in the pixel |
| Alpha (A) | 0 to 255 | Opacity: 255 is fully opaque, 0 is fully transparent |
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.
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).
Frequently asked questions
How do I get the color from an image?
Upload the image, move your cursor over it to magnify the area, and click the pixel you want. The tool reads that pixel and shows its hex, RGB and HSL color, which you can copy with one click. Everything happens in your browser.
Is my image uploaded to a server?
No. The image is read locally using your browser FileReader and drawn to a canvas on your device. It is never sent anywhere, which keeps your screenshots and private images fully on your machine.
Why do two clicks on the same area give different hex codes?
Photos saved as JPEG use lossy compression, so a region that looks like one color is really many slightly different pixels. The picker reads each pixel exactly, so nearby clicks can differ. Use the magnifier to target the precise pixel you want.
What is the difference between hex, RGB and HSL?
They are three ways to write the same color. Hex packs the red, green and blue channels into a base-16 string like #3B82F6. RGB lists the same channels as decimals. HSL describes hue, saturation and lightness, which is closer to how people think about color.
Can I pick a color from a transparent PNG?
Yes. The tool also reads the alpha (opacity) channel. If the pixel is partly transparent it shows an rgba() value with the opacity included, so you can see both the color and how see-through it is.
Why can it not read some images?
Browsers block reading pixel data from certain images for security, mainly SVG files and images loaded from another site. Save the image as a PNG or JPG to your device first, then upload that file and it will work.