You found the perfect blue in a photo, a screenshot or a logo, and you want that exact color in your own design. You don’t need Photoshop for this — a browser image color picker reads the pixel directly and hands you a code you can paste anywhere.
HEX and RGB are the same color, written two ways
Every pixel on screen is a mix of red, green and blue, each from 0 to 255. A picker gives you that value in two common notations:
- RGB —
rgb(59, 130, 246)— the three channels as plain numbers. - HEX —
#3B82F6— the same three numbers in base 16, two digits each (3B= 59,82= 130,F6= 246).
They’re interchangeable; HEX is just more compact for CSS and design tools. If you need HSL or another format, run the code through a color converter.
Picking one pixel vs. grabbing a palette
There are two jobs, and they need different approaches:
- One exact pixel — click the spot you care about. This is perfect for “what blue is that button?”
- The overall color scheme — use the extracted dominant palette. It samples the whole image, groups near-identical colors, and shows the most common ones. That’s how you pull a brand’s key colors out of a screenshot in one shot.
Why a single pixel can surprise you
If the image is a compressed JPG, the area that looks like one flat color is actually full of tiny variations the format introduced. Sample two adjacent pixels and the numbers may differ by a few points. For a solid “this is the color”, the palette (which averages a region) is more reliable than a single click. PNGs and vector exports don’t have this problem because they aren’t lossy.
Everything stays on your device
A browser-based picker reads the image with a <canvas> element locally — nothing is uploaded. That means it works offline and your images never leave your machine.
Related tools
- Convert the code to HSL or check contrast with the color converter.
- Turn your picked colors into a gradient or shadow in the CSS generator.
From one color to a whole palette
A single picked color is a starting point, not a scheme. To build a usable set, pull the dominant color first, then generate its lighter and darker siblings by editing only the lightness in HSL — that keeps the family harmonious. A practical spread is one base, two tints (lighter), two shades (darker) and one accent from elsewhere in the image.
Common mistakes
- Sampling an anti-aliased edge. The pixels where two colors meet are blended and semi-transparent, so they give a muddy, in-between value. Click well inside a flat area instead.
- Trusting a screenshot’s color absolutely. OS screenshots can carry a display color profile, and messaging apps may re-compress them — the value can drift slightly from the original file.
- Picking one pixel from a gradient. You’ll get exactly that spot and nothing about the transition. For gradients, sample both ends.
FAQ
Does zooming the image change the value I get? No. A canvas-based picker reads the original pixel data regardless of on-screen zoom, so the code is the same whether you’re zoomed in or out.
How many colors should a palette have? Four to six usable colors is plenty for most designs — one or two dominants, a couple of supporting tones, and an accent.
Can I pick a color from anywhere on my screen, not just an uploaded image? A browser tool works on images you load into it. To grab a pixel from any window, most operating systems now ship a built-in eyedropper (and some browsers expose the EyeDropper API).
Once you have a code, see HEX, RGB and HSL explained to convert and adjust it, then build effects with the CSS generator.