You spotted a color you like in a photo, a logo, or a screenshot, and now you need its hex code so you can reuse it in a design, a website, or a document. A hex code is just a six-character label for a color, like #3A7BD5, that software understands exactly. The good news: you do not need Photoshop or any paid app to read one. Any modern browser can look at the individual pixels of an image and tell you the precise color under your cursor.
This guide explains how to do that, when the result is trustworthy, and when a different method will serve you better.
What a hex color code actually is
A hex code describes a color by its red, green, and blue components, each written as a two-digit hexadecimal number from 00 to FF (0 to 255 in normal counting). So #FF0000 is pure red, #000000 is black, and #FFFFFF is white. The same color can also be written as RGB (rgb(255, 0, 0)) or HSL (hsl(0, 100%, 50%), describing hue, saturation, and lightness). These are three ways of writing the same thing, and most design and web tools accept at least one of them.
Getting the code from an image
The core idea is simple: an image is a grid of pixels, and each pixel stores one exact color. A color picker reads the pixel you point at and converts its raw red-green-blue values into a hex code you can copy.
The Image Color Picker on Every Boring Tool does this entirely inside your browser. When you choose a file, it is read directly from your device and drawn onto a hidden canvas at its full resolution. Nothing is uploaded to a server, there is no sign-up, and no watermark is added to anything. The color you read is the color that was actually in the file.
Steps
- Open the Image Color Picker and choose an image file. PNG, JPG, WebP, GIF, and BMP all work.
- Once the image appears, move your cursor across it. A small square in the corner previews the hex code of whatever pixel is under the cursor in real time.
- Click (or tap, on a phone) the exact spot whose color you want. That locks the color in place so it stops changing as you move.
- Read the results below the image: the large swatch and hex code, plus RGB and HSL versions and a breakdown of the individual red, green, blue, hue, saturation, and lightness values.
- Press Copy next to the format you need. Use hex for most web and design work; use RGB or HSL if your tool prefers those.
- Each color you click is saved to a small row of recent swatches (up to twelve). Click any swatch to re-select it and copy its hex again, which is handy when you are collecting a small palette.
Because the tool reads at the image's native resolution rather than the on-screen preview, the value you get is the true pixel you clicked, not an approximation of a scaled-down thumbnail.
Honest limits and when to use something else
A pixel picker is precise, but precision is not the same as getting the color you meant to get. A few things to watch for:
- JPEG compression shifts colors. Photos saved as JPG are compressed in a way that subtly changes pixel values, especially near edges and in flat areas. If you sample a "solid" background in a JPEG, neighbouring pixels can differ by several values. Click a spot well inside a uniform area, and sample two or three nearby points to confirm they agree before trusting the number.
- One pixel is not an average. The tool reports the single pixel you click, not the average of a region. Gradients, textures, shadows, and anti-aliased edges all mean adjacent pixels carry different colors. If you need the representative color of a textured area, sample several points and pick the middle value yourself.
- Screens and profiles can lie. The hex you read is the color stored in the file, which is not always the color the original designer intended. Images with an embedded color profile, or screenshots taken on a wide-gamut display, may look different elsewhere. For brand-critical work, ask for the official hex value from a brand or style guide rather than eyedropping a logo off the web.
- Transparency is not part of the code. The hex and RGB values describe color only. If a pixel is semi-transparent, that transparency is not captured in a six-character hex code.
If your goal is to match an exact brand color, the source file's official specification always beats sampling. If you need to extract a full multi-color palette automatically, a dedicated palette generator will cluster colors for you. And if you are picking colors live from your whole screen rather than from a saved image, a desktop eyedropper utility or your operating system's built-in color picker may be quicker.
A quick sanity check
After you copy a hex code, paste it into any color preview and compare it side by side with the source. If it looks right, you are done. If it looks off, you probably clicked an edge or a compressed pixel, so sample again a little further into the solid area. Two or three quick clicks almost always settle it, and the whole process stays on your own device from start to finish.