Zoom far enough into any digital image and the illusion falls apart: what looked like a smooth wall of one blue turns out to be a mosaic of slightly different blues, no two squares quite alike. That is worth knowing before you go hunting for a color code, because each of those squares is a pixel, and every pixel holds one exact color. A browser can read that color and hand it back as a hex code — a six-character tag like #3A7BD5 that design software treats as an unambiguous instruction.
So when you spot a shade you like in a photo, a logo, or a screenshot and want to reuse it in a layout, a stylesheet, or a slide deck, you do not need Photoshop or a paid app to read its code. The browser you already have can do it. What follows is how, plus the less obvious part: knowing when the number you get is the one you actually want.
First, what the six characters mean
A hex code splits a color into its red, green, and blue parts, each written as a two-digit hexadecimal number running from 00 to FF — the same as 0 through 255 in ordinary counting. That is why #FF0000 is pure red, #000000 is black, and #FFFFFF is white. The identical color can also be spelled out as RGB, like rgb(255, 0, 0), or as HSL, like hsl(0, 100%, 50%), which describes it by hue, saturation, and lightness instead. None of these is more "real" than the others; they are three notations for one color, and most design and web tools will happily take at least one of them.
Reading a pixel's color, click by click
The mechanism is straightforward. An image is a grid of pixels, each storing a single exact color, and a color picker simply reports the raw red-green-blue value of whichever pixel you point at, converted into a hex code you can copy.
The Image Color Picker on Every Boring Tool works this way. Every step happens on your own machine: the file you pick is read straight off your device and painted onto an off-screen canvas at full size, so the image never leaves your computer, nothing is stamped onto it, and there is no account to create before you begin. The color you read back is exactly the color that was sitting in the file.
- Open the Image Color Picker and load a file — PNG, JPG, WebP, GIF, and BMP are all accepted.
- Move the cursor across the picture. A little preview square in the corner shows the hex code of whichever pixel sits under the pointer, updating as you go.
- Click the spot you want, or tap it on a phone. That pins the color in place so it stops shifting as your hand moves.
- Read the results below the image: a large swatch and its hex code, the same color written as RGB and HSL, and the individual numbers behind them — red, green, blue, hue, saturation, and lightness.
- Press Copy next to whichever format you need. Hex covers most web and design work; reach for RGB or HSL when the tool you are pasting into prefers those.
- Every pixel you click drops into a strip of recent swatches, which holds the last twelve. Click an older one to bring it back and copy its hex again — handy when you are gathering a few colors into a rough palette.
One detail carries more weight than it looks: the picker samples at the image's true resolution, not the shrunken copy shown on screen. The code you copy is the genuine pixel you aimed at, not a guess drawn from a resized thumbnail.
Why a precise reading can still be the wrong color
A pixel picker never rounds and never averages; it reports exactly what is in the file. But "exact" and "the color you actually meant" are not the same thing, and the gap between them is where people get caught.
- JPEG compression nudges colors around. The JPG format shrinks file size by shifting pixel values, worst of all along edges and across areas that ought to be flat. Sample what looks like a single-color background in a JPEG and the pixels next door may sit several points apart. Aim well inside a uniform patch, then check that two or three neighbours agree before you trust the reading.
- A pixel is a point, not an average. The tool returns the one pixel under your click, never a blend of the region around it. Gradients, textures, shadows, and anti-aliased edges all put different colors in touching pixels. When you want the representative color of a textured area, take several samples and settle on the middle value yourself.
- The file's color is not always the intended color. What you read is the color stored in the image, which can drift from what the designer had in mind. An embedded color profile, or a screenshot captured on a wide-gamut display, can look one way on your screen and another elsewhere. For anything brand-critical, get the official hex from a brand or style guide rather than eyedropping a logo off a web page.
- Transparency lives outside the code. Hex and RGB describe color and nothing more. If a pixel is semi-transparent, that see-through quality has no place in a six-character hex code.
Where another tool wins
To match an exact brand color, the source file's own specification always beats sampling by eye. To pull a whole multi-color palette in one pass, a dedicated palette generator will cluster an image's colors and do the grouping for you. And if you are grabbing colors live off your entire screen rather than out of a saved file, a desktop eyedropper utility or the color picker built into your operating system is usually the quicker route.
One last check
Copy your hex code, paste it into any color preview, and hold it beside the original. If it looks right, you are finished. If it looks off, you most likely caught an edge or a compression-warped pixel — so click again a little deeper into the solid area. Two or three tries almost always settle the question, and each attempt is instant, with nothing to wait on in between.