Compare web design colors in Chrome and Edge

A color can look slightly different in Chrome and Edge, even when you open the same page on the same computer. The cause might be the page, a browser extension, or a display setting that changes how colors look.

Use the Color Picker to sample the visible color in each browser and compare its HEX or RGB value. This checks what is displayed on screen, not the original color written in the page’s code.

Compare the colors

1. Open the Color Picker on a computer in Chrome. The full screen color picker works in Chrome and Edge. Other browsers may show a reduced version or none.
2. Open the page you want to check in Chrome and Edge. Keep both windows on the same monitor, and make sure you are looking at the same page state, including the same theme, selected options, and scroll position.
3. Use the picker to select a flat, solid area of the design in Chrome. If the browser asks you to share a screen, choose the display that contains the page. Note the HEX or RGB value shown by the tool.
4. Repeat the sample in Edge, choosing the matching spot in the design. Compare the values. Sample a few points inside the same color area if the first result seems surprising.

For a fair comparison, sample the center of a large color block, not an edge, thin line, letter, shadow, or gradient. Those areas can contain blended pixels that vary with text smoothing, transparency, or the exact point you select.

What the result means

The HEX or RGB values match

The sampled pixels have the same color values. If they still look different, check whether the windows are on different displays or surrounded by different colors. Nearby colors can change how a swatch appears to your eyes, even when its value is identical. Also check display settings such as Night light, True Tone, or HDR.

The values differ across the same flat area

The browsers are showing different pixel colors at the points you sampled. First confirm that both pages use the same theme and state. A different viewport size can trigger a responsive layout, which changes how the page is drawn. Extensions, browser profiles, cached page content, and color settings can also affect the result.

The value changes when you sample again

You may be sampling a gradient, animation, transparency effect, or a small area where the pointer lands on slightly different pixels. Pause the page if it is animated and sample the middle of a larger, solid region. If the area is too small, enlarge the page or use the browser’s zoom consistently in both browsers.

The picker does not offer full screen selection

Color Picker’s full feature works in Chrome and Edge on a computer. On a phone, or in another browser, screen selection may be limited or unavailable. Use Chrome or Edge on a computer for this comparison.

How to find the cause

1. Match the page state. Check that both browsers show the same URL, theme, content, and controls. Set the same window size and zoom level, then sample the same flat area again.
2. Check the display. Keep both windows on one monitor. On Windows 11, review Settings › System › Display › Night light and, if available, Settings › System › Display › HDR. On a Mac, review System Settings › Displays, including the color profile and, if available, True Tone and Night Shift. Settings can change the appearance of colors, so use the same display settings while comparing.
3. Rule out extensions. Open the page in a clean browser profile or a private window, with extensions disabled, and sample again. A dark mode, contrast, or color adjustment extension can change the page even when its address is the same.
4. Reload both pages. Refresh each browser and check that the page has finished loading. If the design uses animation, wait for it to stop or compare a still area that does not move.
5. Restart the browsers. Close and reopen Chrome and Edge, then repeat the test. If the difference remains only in one browser, update it and temporarily test with graphics acceleration switched off in that browser’s system settings. Restore the setting afterward if it makes no difference.

A screen sample is not the original design value

Color Picker reads the color of a visible pixel. That may not be the exact value a designer entered in CSS. A transparent layer blends with what is behind it, an image can have its own color profile, and effects such as shadows or gradients create many related pixel values. Text edges are also blended with the background.

If you need to compare the design’s source value, inspect the element’s CSS in the browser’s developer tools instead. Use the screen sample to compare what a person actually sees. When you report a mismatch, include the sampled HEX or RGB values, the browsers, and whether both pages were open on the same display.