BrowserTools
Home / Images / Image Color Picker, Get Colors From Any Photo

Image Color Picker, Get Colors From Any Photo

Pick colors from any image in your browser. Hover with a magnifier loupe, click to grab HEX, RGB and HSL values, and extract a dominant palette.

Maintained by BrowserTools

Loading Image Color Picker, Get Colors From Any Photo… If nothing happens, please enable JavaScript.

An image color picker (often called an eyedropper tool) tells you the exact color of any pixel in a photo, screenshot, logo or design mockup. Load an image, hover over it with the magnifier loupe to inspect individual pixels, and click to capture the color as a HEX code, an RGB value or an HSL value, each with one-click copy. The tool also analyses the whole picture automatically and extracts a dominant color palette, so you can grab a matching set of up to eight swatches in seconds without any manual sampling.

Frequently asked questions

How do I pick a color from an image?
Load an image by dragging it onto the tool, choosing it with the file input, or pasting it from the clipboard. Move your cursor over the picture: a magnifier loupe shows the pixels around the cursor and a live preview of the color underneath it. Click to lock that color, then copy it as HEX, RGB or HSL with the copy buttons.
Is my image uploaded to a server?
No. The image is decoded and drawn on a canvas element inside your own browser, and every color calculation happens on your device. Nothing is transmitted anywhere, which makes the tool safe for confidential screenshots, client assets and unreleased designs. It even works offline once the page has loaded.
What color formats does the picker provide?
Each picked color is shown in three formats at once: HEX (for example #3A7BD5), RGB (for example rgb(58, 123, 213)) and HSL (for example hsl(215, 65%, 53%)). All three describe exactly the same color; they are just different notations used in CSS, design tools and image editors. Each format has its own one-click copy button.
How does the dominant palette extraction work?
The tool downscales the image and buckets every pixel into coarse color groups, then ranks the groups by how many pixels fall into each one. The most frequent groups that are visually distinct from each other become the palette, up to eight swatches. It is a fast frequency-based quantization that runs entirely in your browser in a fraction of a second.
Can I paste a screenshot directly from the clipboard?
Yes. Take a screenshot, then press Ctrl+V (Cmd+V on a Mac) anywhere on the page. The image from your clipboard loads straight into the picker without saving it to a file first, which is the fastest way to grab a color from something currently on your screen.
Which image formats are supported?
Any format your browser can decode works, which covers JPEG, PNG, WebP, GIF, BMP, SVG and, in most modern browsers, AVIF. Animated formats are sampled on their first frame. If the file opens as an image in a browser tab, this picker can read colors from it.
How accurate is the picked color?
The picker reads the decoded pixel values directly from the canvas, so within one image it is exact for the pixel you click. Keep in mind that lossy formats such as JPEG introduce compression artifacts, so a flat color area may contain pixels that differ slightly from the original design value. The magnifier grid helps you see that variation and choose a representative pixel.
What is the difference between HEX, RGB and HSL?
HEX and RGB both express a color as red, green and blue components; HEX packs them into six hexadecimal digits while RGB lists them as decimal numbers from 0 to 255. HSL instead describes hue (position on the color wheel), saturation and lightness, which is often more intuitive when you want to tweak a color, for example making it darker without changing its hue.
Can I keep several colors and compare them?
Yes. Every click adds the color to a history strip below the image. Click any swatch in the history to make it the active color again and see its HEX, RGB and HSL values. The clear button empties the history when you want to start over. The history lives only in the page, so reloading starts fresh.
Why do colors picked from a JPEG look slightly off?
JPEG compression works in small blocks and discards fine color detail, so edges and flat areas pick up tiny variations that were not in the source design. If precision matters, pick from a PNG or another lossless export, or use the magnifier to sample a pixel from the middle of a large flat area rather than near an edge.

About Image Color Picker, Get Colors From Any Photo

Getting a color out of an image is a three-step job: load, hover, click. You can drag and drop a file anywhere on the tool, browse for it with the file input, or simply paste a screenshot straight from the clipboard with Ctrl+V (Cmd+V on a Mac). The magnifier shows a zoomed grid of the pixels around your cursor together with a live preview of the color underneath it, which makes it easy to land on exactly the right pixel even in fine details such as anti-aliased text, thin borders or subtle gradients. Every color you click is added to a history row, so you can compare candidates side by side and re-select any of them later with a single click.

Everything happens locally in your browser. The image is decoded onto an HTML canvas on your own device and never leaves it: there is no upload, no server-side processing, no account and no tracking of your files. That makes this picker safe to use with confidential material such as unreleased product shots, client brand assets or internal screenshots. It also means the tool keeps working offline once the page has loaded and responds instantly regardless of your connection speed, because there is simply no network round trip involved.

Typical uses are everywhere in day-to-day design and development work. Front-end developers pick a brand color out of a logo to reproduce it in CSS. Designers verify that an exported asset really uses the approved brand values. Marketers check color consistency across campaign images, and illustrators sample reference photos to build a painting palette. The automatic palette extraction is especially handy for building a color scheme from photography, for example pulling a website theme out of a hero image. When you want to refine or convert the values you picked, the color converter and palette generator tools on this site pick up right where this one leaves off.

From Eyedroppers to Hex Codes: How We Learned to Name Screen Colors

The eyedropper metaphor is older than most people expect. Early paint programs of the 1980s, including Deluxe Paint on the Amiga and MacPaint on the Macintosh, needed a way to let artists reuse a color already on the canvas, and a pipette sucking up a drop of paint was the skeuomorph that stuck. When Photoshop 1.0 shipped in 1990 it carried the eyedropper into professional workflows, and every image editor since has kept both the tool and the icon, to the point where sampling any value from anywhere in an interface is now generically called eyedropping.

The six-digit hex code is a happy accident of hardware. Displays adopted 24-bit color in the late 1980s, with one byte per channel, and a byte is exactly two hexadecimal digits, so #RRGGBB was the most compact human-readable spelling of what the video memory actually contained. HTML 3.2 standardised the notation for the web in 1997, alongside a set of 16 named colors inherited from the Windows VGA palette. The much larger list of names browsers understand today, including oddities like PapayaWhip and DarkSlateGray, came from the X11 window system, where researchers at MIT and DEC named colors in the 1980s partly by eye, and in a few cases reportedly by comparing them with Crayola crayons.

One relic of that era still surfaces in design conversations: the web-safe palette. In the days of 8-bit displays, browsers could only guarantee 216 specific colors would render without dithering, so designers restricted themselves to hex values built from 00, 33, 66, 99, CC and FF. Modern screens render billions of colors and the constraint has been irrelevant for two decades, yet those chunky web-safe values still show up in old style guides, a fossil record of the time when picking a color meant negotiating with the hardware.

Related tools

Color Converter & Contrast Checker

Convert colors between HEX, RGB, HSL and HSV, plus WCAG contrast ratio checker.

Color Palette Generator

Generate complementary, analogous, triadic, tetradic, monochromatic and shade/tint palettes from any base color.

Image Resizer, Resize Photos Online

Resize images by width, height or percentage, lock the aspect ratio and pick a fit mode. 100% in your browser, no uploads.

Image Compressor (JPG / WEBP / PNG)

Reduce image file size with adjustable quality, see before/after side by side.
Support