Online Color Picker

What a color picker does, and how to use one well

An online color picker (also called an eyedropper) answers one question: what is the exact color value at this point? Designers use it to match a competitor’s brand color, developers use it to pull a token out of a mockup, and anyone debugging a page uses it to find out why two “identical” blues do not match.

Three ways to arrive at a color

Sliders. When you have a direction rather than a target (“a bit lighter, a bit less saturated”), the HSL sliders are the fastest route. Hue rotates around the color wheel, saturation moves between grey and vivid, lightness moves between black and white. Because the three axes are independent, you can raise lightness without accidentally shifting the hue — which is exactly what happens when you hand-edit a HEX value.

Hex input. When a spec, a style guide or a colleague gives you a value, paste it. The picker accepts #RGB shorthand, full #RRGGBB, rgb(), rgba(), hsl(), hsla() and plain keywords like red.

Image sampling. When the source is visual — a logo, a screenshot, a photo — drop it in and click the pixel you want. Sampling reads pixels through a canvas in your browser, so the file is never uploaded. This is the practical way to answer “what green is that button?” without screenshotting, emailing and guessing.

Reading the three output formats

#2457D6 is the HEX form: three pairs of hexadecimal digits for red, green and blue. rgb(36, 87, 214) is the same color expressed in decimal 0–255 channels, which is what most graphics libraries expect. hsl(223, 72%, 49%) is the same color expressed as hue 223°, 72% saturation, 49% lightness — the form that is easiest to reason about when you need variants. Converting between them is lossless, so pick whichever form your destination expects.

Common pitfalls

Sampling a compressed image. JPEG artifacts and PNG shadows mean a pixel at the edge of a logo may not be the flat brand color. Zoom in or sample from the middle of a solid area.

Sampling a semi-transparent area. What you see may be the color composited over a background, not the color itself. Sample from an opaque region.

Forgetting the contrast check. A color that looks good on a swatch can be unreadable as text. After picking a foreground color, run it through the WCAG contrast checker before committing to it.

What to do next

Once you have a base color, open the palette generator to derive lightness steps, or the color wheel to find a contrasting accent. If you just need the number in another notation, the HEX to RGB converter does that on its own page.

How a browser-based eyedropper actually works

Under the hood the tool draws your image into a canvas element at its native resolution, reads the pixel under your cursor through the canvas API, and converts those red, green and blue bytes into HEX, RGB and HSL. Because everything happens locally, nothing is uploaded and sampling is instant. One caveat worth knowing: the number you get is the file’s raw pixel value, not necessarily what your display is showing — operating-system color management, screen profiles and night-light filters all shift what you perceive, but not the underlying data. For web and product work the raw value is almost always the one you want.

Browser eyedropper vs. OS picker vs. DevTools

Three tools solve adjacent problems. An operating-system picker (Digital Color Meter on macOS, PowerToys on Windows) samples whatever is composited on screen at a point — including anti-aliasing and brightness adjustments — which makes it the right tool for reading colors from anything with no source file, such as a video frame or another app. Your browser’s DevTools color inspector reads the computed CSS value directly from the page, which is exact for live sites. This page’s eyedropper sits in between: precise pixel data from images and screenshots you have locally, with an interface a designer can use without opening a console. Rule of thumb: DevTools for live CSS, this picker for image assets, the OS tool for everything else on screen.

Screenshots: pick the right format

When you sample from screenshots, use PNG: it stores pixels exactly, so the value you read is the value that was rendered. JPEG introduces small per-pixel errors around edges, so always sample from the middle of a flat area rather than a border, and accept that a screenshot that went through a chat app’s compression may already differ from the original by a few units per channel.

Uses beyond design

Developers use the eyedropper to extract a chart series color from a screenshot, to pull a brand green out of a logo before writing any CSS, and to settle “these two blues look different” disputes by sampling both and comparing the numbers. If you are doing that last one, the recent-colors history keeps your last 20 samples visible, so the comparison is on screen instead of buried in clipboard history. Once you have the exact value, paste it into the HEX to RGB converter for other notations, or run it against candidate backgrounds in the contrast checker before it ships.

Frequently asked questions

How do I pick a color from an image?

Drop an image into the upload area, click to choose a file, or paste a screenshot. Once it loads, move the pointer over the image to preview colors and click to copy the value and sync it to the picker above.

Does the picker upload my image?

No. Image color picking reads pixels through a local canvas element, so the image never leaves your browser.

Which color formats does it output?

HEX, RGB and HSL are updated live as you move, and each one has its own copy button.