Why a color's HEX value changes after a screenshot

You sample a color in a design, take a screenshot, then get a different HEX value from the screenshot. That does not always mean the color changed. A screenshot captures a rendered image, and the screen picker reads the color currently displayed, not necessarily the original file's color data.

Use the Color Picker to sample both versions on screen. Comparing them in the same browser and at the same size helps reveal whether the difference comes from the image, the screenshot, or how the browser displays it.

Compare the color in both versions

1. Open the Color Picker in Chrome or Edge on a computer. Other browsers may offer a reduced version or no screen picking.
2. Follow the browser's screen-sharing prompt, then select a flat area of the original image or design. Avoid edges, text, shadows, and transparent areas.
3. Note the HEX value. Open the screenshot on the same screen, at its original size if possible, and sample the matching flat area.
4. Repeat each sample two or three times, choosing the center of the same patch. If the values vary around an edge but match in the center, scaling or antialiasing is likely affecting the edge pixels.

The Color Picker reads a color from the screen. It does not inspect the original image file's embedded color profile or report the source program's original RGB values. For that reason, a difference between its two readings does not by itself prove that the screenshot file changed the color.

What the result means

The HEX values match

The displayed pixels you sampled have the same RGB values. The colors should be close when viewed under the same display conditions, though two screens can still make the same value look different.

The values differ by a little

You may have sampled neighboring pixels, especially if the image was resized or the area has a soft edge. A screenshot can also include slight changes from scaling, transparency, or the way an app renders its content. Sample a larger, solid patch to check.

The values differ across a whole flat area

The screenshot or the way it is displayed may have changed the color data. Check whether the screenshot was saved as JPEG, whether the original uses a wide-gamut profile, and whether the two images are being shown in different apps or browsers.

The HEX values match, but the colors look different

HEX is a code for red, green, and blue channel values, commonly treated as sRGB in web content. It does not describe every part of how a color looks. A display profile, HDR mode, or a different screen can change its appearance without changing the HEX code you sampled.

How to get a more reliable comparison

1. Sample a solid center area. Pick a region well inside the color, away from text, borders, gradients, and shadows. Antialiasing blends edge pixels with the background, so those pixels are not the original flat color.
2. Compare at the same zoom. Display both images at 100% when possible. Browser zoom, fit-to-window scaling, and operating system display scaling can interpolate pixels, creating new values between the original ones.
3. Check the screenshot format. PNG is lossless, so it does not add JPEG-style compression artifacts. JPEG can alter color values, especially around sharp edges and fine details. If you need exact pixel comparisons, capture or export as PNG.
4. Use one app for both images. Open the original and screenshot in the same browser or image app. Different programs can interpret embedded color profiles differently, so comparing across apps can mix up a profile difference with a file change.
5. Convert both images to sRGB for web use. If the original has a wide-gamut profile, export a copy converted to sRGB before comparing it with a screenshot intended for a web page. Do not just assign a different profile, because that can change the meaning of the existing channel values.
6. Check the display profile if the visual appearance is the issue. In Windows 11, open Settings › System › Display › Color profile if that option is available for your display. On macOS, open System Settings › Displays and check the selected color profile. These settings affect how colors appear on the screen, and may not tell you whether the image file itself changed.

Why a screenshot is not always a copy of the source pixels

An image file can contain RGB values plus a color profile that explains how to interpret them. A color profile is a set of instructions for mapping those values to visible colors. When an app displays the image, it may convert the source values for the display. A screenshot records a rendered view of that content, so it can represent the displayed result rather than preserve the source image's exact values and profile.

Other changes can happen before or during capture. A screenshot of a window that is scaled to fit may include resampled pixels. A transparent color may be blended with the background. HDR and wide-gamut display paths can also complicate comparisons between apps and file formats. The exact result depends on the operating system, browser, app, and capture method.

For a web design, use a consistent sRGB workflow and compare the exported image with the screenshot at the same size. For color matching on a physical display, also account for the monitor profile and viewing conditions. The HEX value describes channel numbers, not a guaranteed appearance on every screen.

The Color Picker runs in your browser, and the color you sample stays on your device.