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.
A test where the right answer was known in advance. The flat illustration in our Conversion Lab was drawn by a script, so its six colours are written in our source:
#fdf3e3 #f4a261 #2a9d8f #264653 #e76f51 #e9c46a. Running it through our colour picker extracted all 6/6 exactly. Two extra values appeared —#fcedda #f6ba88— and those are not errors: they are anti-aliased blends along the circle edges, real pixels in the file. Download the same image and check both claims yourself.
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.
We can check the palette function against a known answer, which is rare. The flat illustration in our Conversion Lab was drawn by a script, so its six colours are written in our source: #fdf3e3 #f4a261 #2a9d8f #264653 #e76f51 #e9c46a. Our colour picker extracted all 6/6 exactly.
A palette extractor is easy to build and hard to verify, so we gave ours a test with a known answer. The illustration in our test corpus is drawn by a script, so its six colours are written down in advance: #fdf3e3 #f4a261 #2a9d8f #264653 #e76f51 #e9c46a. Feeding that PNG to our own image colour picker returned #fdf3e3 #f4a261 #2a9d8f #264653 #e9c46a #e76f51 #fcedda #f6ba88 — a match of 6/6 on the known colours, plus two extra swatches (#fcedda, #f6ba88) that are anti-aliased edge pixels rather than mistakes. That is a falsifiable test, not a claim: if the extractor regressed, this page would be wrong and you could prove it by downloading the same file.
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.
And the surprise is instructive rather than a bug. Alongside those six, the picker also returned #fcedda #f6ba88 — anti-aliased blends along the circle edges. Those are real pixels in the file: zoom into any curved edge and the colour there is neither of the two colours it separates. A single-pixel pick can land on one of them, which is exactly why grabbing a palette is safer than trusting one click.
Those two extra swatches are also the answer to “why did my single pixel come back a colour that is not in the design”. Anti-aliasing blends the shape colour into the background across a one- or two-pixel border, so #f6ba88 genuinely exists in the file even though nobody chose it. Pick from the middle of a flat area, or take the palette and let frequency sort it out.
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.
Frequency is what turns a pixel into a palette. Our picker returned the six known colours in a different order from the file — #fdf3e3 #f4a261 #2a9d8f #264653 #e9c46a #e76f51 #fcedda #f6ba88 — because it sorts by how much of the image each colour covers, not by where it appears. That ordering is the useful part: the first two entries are almost always the background and the dominant shape, which is exactly the pair you want for a page theme.
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.