Two gray panels don't match? How to check why

Two panels that are meant to be the same gray can look noticeably different. The cause might be a real difference in their colors, a display setting, or the colors around each panel changing how your eyes perceive it.

Sample both panels on the same screen with the Color Picker. Comparing their HEX or RGB values helps separate a color mismatch from a visual effect.

Compare the two gray panels

1. Open the Color Picker in Chrome or Edge on a computer. Its on-screen picking feature may be reduced or unavailable in other browsers, and it is not available on phones.
2. Use the tool's on-screen color sampling feature. If the browser asks you to share a screen, window, or tab, choose the one showing both panels.
3. Sample a flat area near the center of the first panel. Avoid text, borders, shadows, rounded corners, and highlights, which can change the pixel color.
4. Note the HEX and RGB values shown by the tool, then sample the same kind of area in the second panel. Compare the values, not just the gray shown in the picker.
5. Repeat each sample once or twice in a nearby spot. If the values vary within a panel, it may have a gradient, transparency, texture, or a shadow rather than one solid gray.

Sample both panels in the same browser window and at the same zoom level. If they are on different monitors, compare them on one screen first if possible. A display profile or brightness difference can make identical color values look different from screen to screen.

What the color values mean

The HEX and RGB values match

The sampled screen pixels have the same reported color, even if the panels look different to you. Look at the area around each panel: a gray beside white can seem darker than the same gray beside black. Borders, shadows, nearby colors, and contrast can all affect how your eyes judge a shade.

Also check whether the two panels are on the same monitor and in the same part of the screen. Some displays have uneven brightness or color across the panel. If the difference disappears when you move both panels next to each other, the original layout was likely affecting your perception.

The values differ by a small amount

The displayed pixels are not exactly the same color. A small difference can come from opacity, a translucent overlay, a gradient, a shadow, or a color adjustment applied to one panel. If you are comparing two designs, inspect the source color and any effects applied on top of it.

For neutral gray, the red, green, and blue values are usually close to one another. If one channel is consistently higher, the gray may have a subtle warm or cool tint. For example, more red can make it look warmer, while more blue can make it look cooler.

The values change as you sample nearby points

The panel is not a single flat color at those locations, or the display is rendering different pixels across it. Check for a gradient, a translucent layer, a border, a shadow, or a fine texture. Sample farther from the edge and compare the center areas again.

How to make the panels match

1. Set one shared color value. In the design or app where the panels were made, copy the same HEX or RGB value to both. Do not rely on choosing two grays by eye. If you are using transparency, match the opacity as well as the underlying color.
2. Remove effects while comparing. Temporarily turn off shadows, overlays, gradients, and blending effects, if the app provides those controls. Sample the plain panels again. Restore only the effects you need after checking the base color.
3. Turn off color-shifting display features. In Windows 11, open Settings › System › Display and check Night light, HDR, and the selected Color profile. On a Mac, open System Settings › Displays and check Night Shift, True Tone on supported models, and the selected color profile. Temporarily disable color-shifting features for a consistent comparison.
4. Use the same display conditions. Set both panels on one monitor, at the same zoom and brightness. If you need to compare across monitors, use each monitor's on-screen controls to select the same picture mode and similar brightness, then sample again.
5. Check the source file or app. If the picker reports different values but the source color fields are identical, one panel may have an effect or the app may be applying a color adjustment. Reopen the design in its original app and check for those changes before editing the color value.

Windows and macOS menu labels can vary slightly by device and version. A monitor may also have its own color temperature, contrast, or picture mode controls, separate from the computer's display settings.

Why gray is especially easy to misjudge

Gray has no strong hue to anchor your eye, so small changes in brightness or color temperature can stand out. The surrounding colors matter too: a gray panel on a warm beige background may look cooler than the same panel on a blue background. That does not necessarily mean the panel's color value changed.

A browser color sample reports the color rendered at a screen point. It cannot tell you whether a design file uses the intended color, whether a monitor is calibrated, or whether another app will show the same shade. Use the sample to find a difference, then check the design and display settings that could explain it.