Hex Color Code: How to Find the One on Screen

Three ways to read a color, from most exact to most convenient

Read it from the page itself. If the color is part of a web page, open the browser's developer tools, select the element and look at its computed style. This gives you the value that was actually written, not a sample of pixels, which means antialiasing, transparency and image compression cannot distort it. It is the only method that returns the original rather than a measurement of the original.

Use the browser's own eyedropper. Chromium browsers put a color picker inside the developer tools color swatch, and it can sample anywhere on the screen. This works on images and on anything that is not a styled element, and it needs nothing installed.

Take a screenshot and zoom in. The slowest and the most universal: capture, open the image in any editor, magnify until you can see individual pixels, and read the color of the one you want. Use this when the color is in another application, in a video frame, or on a device whose browser has no picker.

The order matters. Each step down adds a stage where the value can change.

Hex, RGB and HSL are the same color written three ways

Hex is six hexadecimal digits in pairs — red, green, blue — each pair a number from 0 to 255 written in base sixteen. It is compact and it is what most design tools hand you.

RGB is the same three numbers in decimal. It is easier to reason about arithmetically and it is what you use when a color needs an alpha channel.

HSL is the same color reorganized into hue, saturation and lightness. Nothing is gained in precision, but adjusting is far easier: making a color lighter without changing its character is one number in HSL and three coordinated changes in hex.

Converting between them loses nothing, because they describe the same point in the same space. If a conversion comes back different, something else changed it — see the next section.

Why the same color returns two different values

This is the trap. A color picked off the screen is a measurement of what was displayed, and several things sit between the written value and the displayed pixel.

Color profiles. A modern display can show colors outside the standard sRGB range, and the system converts values on the way to the panel. A screenshot may be tagged with the display's profile rather than sRGB, so the same visual color lands on different numbers depending on what took the picture and what opened it.

Compositing. What you sample is the final blend. If anything above the color is semi-transparent — an overlay, a shadow, a dark-mode scrim — you are reading the mixture, not the layer you meant.

Compression. JPEG stores color at lower resolution than brightness, so pixels near an edge in a photo can be several steps off. PNG and screenshots taken as PNG do not have this problem.

If exactness matters, go back to the first method and read the written value.

Edges, gradients and other places not to sample

Antialiasing means the outline of text and the edge of any curve is deliberately made of in-between colors. A pixel one step inside the letterform is a blend of the text color and the background, and it is not a color anyone chose. Sample from the middle of a large flat area instead.

Gradients have no single value by definition. If you need one from a gradient, decide which end you want and sample well inside it, or read both ends and treat the gradient as two colors.

Shadows, glows and glass effects are the same problem in a different shape: they are a calculation over whatever is behind them, so the number changes when the background does.

Two checks before you use the color you found

Contrast, if any text sits on it. Those thresholds are not folklore: WCAG 2.2, a W3C Recommendation, sets 4.5 to 1 for body text and 3 to 1 for large text in success criterion 1.4.3. A color and a color that looks fine on your screen can fail badly on a dimmer one. Check the pair rather than trusting the impression.

Whether the color is carrying information on its own. If red means an error and green means success and nothing else marks the difference, the message does not reach a viewer who does not separate those hues, and that is roughly one man in twelve. Add a word, an icon or a change of shape. Our color-vision and color-perception pages are useful for seeing what the difference actually looks like.

Neither check takes a minute, and both are far cheaper now than after the color is used in fifty places.

When the number is not what you need

For print, hex is the wrong space entirely. Screens emit light and mix red, green and blue; ink absorbs it and mixes cyan, magenta, yellow and black. There is no fixed conversion between them — the answer depends on the paper, the ink and the press — so a printer will ask for a CMYK value or a spot color reference, not your hex.

For a brand color, ask for the specification rather than sampling a logo from a website. The published value is authoritative; a picked pixel is whatever survived that particular export.

And for a color you merely want to reuse consistently, write it down once in the notation your tools use, and convert from that one source instead of resampling. Every resample is another chance for the number to drift.