Color Picker from Image

The color you click off an image is often not the color you meant to grab, and most image pickers just hand you that pixel and call it done. Edges are blurred, JPEGs are speckled, and the one pixel sitting under your cursor can be a blend of two colors or a stray bit of compression noise. So this picker has a toggle that reads a small patch around your click and averages it, so you land on the real flat color instead of whatever lucky pixel happened to sit under the crosshair. That is the part worth the page.

Everything else is what you'd expect. Drop in a photo, screenshot, logo, or mockup, move the crosshair to preview, click to lock a pixel, and its color fills in as HEX, RGB, and HSL with a copy button on each. The image opens in your browser and never gets uploaded, so an unreleased mockup stays on your machine and never touches someone else's server.

1. Add your image. Drop a file onto the box at the top, or click "browse your files". PNG, JPG, WebP, GIF, and BMP all work, anything your browser can open.
2. Hover to preview. Move the crosshair across the picture and the readout tracks the color under it, so you can line up on the exact spot before you commit.
3. Click to sample. One click locks that pixel, and HEX, RGB, and HSL fill in together with the swatch so you can eyeball it against the source.
4. Copy what you need. Hit copy on the HEX, RGB, or HSL row. HEX for a stylesheet, rgb() for plain 0-255 numbers, hsl() when you're about to lighten or darken it.
5. Grab a few. Every click drops into the "Picked colors" row, so five clicks across a photo give you a rough palette. Click any swatch to copy its hex again.
6. Flip on averaging when a spot looks noisy. The "Average small area" toggle reads a 5x5 patch instead of one pixel and returns the mean, covered right below.

Zoom into any image at the edge of a shape and you won't see a clean line. You'll see a few pixels of in-between color, where the software that made the image blended the two sides to keep the edge smooth. Click one of those and you get the blend, a muddy pink between a red circle and a white background, not the red you were after. The fix is boring but it works, aim for the solid middle of a colored area and stay off its border.

JPEG makes it worse. To shrink the file, JPEG throws away detail and leaves faint speckle across regions that should be one flat tone. Your eye smooths it over, the pixels don't. Two clicks a few pixels apart in the "same" patch of sky can come back a shade off. PNG is lossless and doesn't do this, which is why a PNG logo samples clean and a JPEG photo of the same logo doesn't.

That's what the averaging toggle is for. Turn it on and each click reads a 5x5 box, 25 pixels, and returns their average, which cancels out speckle and soft edges and lands close to the intended fill. On a noisy JPEG or a slightly soft graphic, leave it on. On a crisp PNG with big flat blocks of color, leave it off, a single pixel is already exact there and averaging near a boundary only smears two colors into one wrong answer. Quick rule, flat PNG single pixel, noisy photo average the patch.

One honest caveat. A photo of a real wall or a fabric swatch is never a spec, since what the camera saw leans on lighting and white balance. Treat a photographed color as the same family, not the paint's catalog number. Averaging steadies it, it can't undo the light.

You get the same color three ways at once, because the next step decides which one you want.

HEX (#3B82F6) is the compact six-digit web value most CSS and design tools expect, and it's the default copy for a stylesheet.

RGB (rgb(59, 130, 246)) is the identical color as plain 0-255 numbers, which is how Photoshop and GIMP show it, so it lines up when you're cross-checking an editor's color panel.

HSL (hsl(217, 91%, 60%)) describes it as hue, saturation, and lightness. Reach for this when you want to make a lighter or darker version of what you sampled, hold the hue and push the lightness up for a tint or down for a shade. It's the one you'd use to build a hover state off a base color.

If the pixel you clicked has transparency, common in PNG logos with a see-through background, the RGB and HSL rows switch to rgba() and hsla() and add the alpha on the end so you don't lose it. Land on a spot that is fully see-through and you get no code at all, just a line telling you there is nothing there to read, because the honest answer to "what color is this empty pixel" is that it doesn't have one. If you already have an exact code and only need another notation, skip the image and use the color converter.

Matching a brand color from a logo. You're rebuilding a site and you have the logo but no brand guide. Drop it in, click the fill, copy the hex, and you've got the real brand color instead of a close-enough guess you'll regret. Logos are usually flat PNG with clean edges, so single-pixel sampling nails them, leave averaging off.

Pulling a palette from a photo. Click the sky, a highlight, a shadow, an accent, and the "Picked colors" row builds the set. Feed those hexes into the color palette generator to build harmonies around them.

Checking contrast on a screenshot. Sample the text and whatever sits behind it straight off a rendered screenshot. Feed that pair to the contrast checker. Reading the pixels that actually shipped beats trusting the value someone meant to use.

If the color is live on your screen right now, in another tab or an app window, this is the wrong tool. Our color picker uses the browser's built-in eyedropper to grab a pixel from anywhere on screen, and if you'd screenshot the thing first anyway, just sample that screenshot here.