How to pick a neutral UI gray for a design system audit

Your interface has several grays that look almost identical, but small differences can make a design system feel inconsistent. Some grays lean blue or brown, while others change between buttons, borders, and backgrounds.

Use color values, not your eyes alone, to audit them. The Color Picker can sample colors from anywhere on your screen and show HEX, RGB, and HSL values. It works best in Chrome or Edge on a computer.

Sample and compare your grays

1. Open the Color Picker in Chrome or Edge on a computer. Use its picker to sample a gray from your design system or a page showing the interface.
2. Choose a flat area of the color. Avoid text, icons, shadows, gradients, and antialiased edges, which can mix the gray with nearby colors.
3. Record the displayed HEX and RGB values for each color you are auditing. Sample each role separately, such as page background, card surface, border, and secondary text.
4. Compare the readings. Check whether colors intended to share a token have the same value, and whether distinct roles are using different grays on purpose.

Keep a short record of the component, its intended role, and the sampled value. This makes it easier to spot a one-off gray that was added outside the shared design tokens.

What the color values mean

All three RGB values match

A gray with equal red, green, and blue channel values is a neutral gray in the RGB color model. For example, #808080 has red, green, and blue values of 128. A color such as #777777 is also neutral, but darker.

Equal RGB channels are a useful starting point for an audit, not proof that the color is suitable everywhere. You still need to check how it works with the text, surface, and other colors beside it.

The RGB values differ slightly

Unequal channels mean the color has a tint. For example, a value with more blue than red may appear cool, while more red can make it feel warm. The difference can be subtle, so compare the actual values instead of deciding by appearance alone.

A tinted gray is not automatically a mistake. It may be an intentional brand choice. Confirm the intended value in the design system before replacing it with an untinted gray.

Two areas look the same but have different values

They may use separate color tokens, or one area may have transparency, an overlay, or a shadow. A screen sample shows the color as it appears at that point, which may not be the original token value. Check the component source or design file before changing the shared color.

A neutral gray has poor contrast

Neutrality and contrast are separate checks. A gray can have equal RGB channels and still be too close in brightness to the background. For example, #767676 against pure white is about 4.5:1, just above the commonly used 4.5:1 contrast target for normal text. Recheck the actual color pairing in the product, especially if transparency or overlays are present.

Correct a gray that fails the audit

1. Confirm the sample. Sample a broad, flat part of the component again. If you sampled a border edge, text edge, or shadow, the value may include neighboring pixels.
2. Check the intended token. Look up the component's assigned color in the design file or source. Do not replace a deliberate tinted gray just because its channels differ.
3. Adjust for the role. If the gray is used for text, judge it against its actual background. If it is a surface or border, check that it remains distinguishable from adjacent surfaces and meaningful controls.
4. Use a shared value. When components are meant to match, point them to the same design token instead of entering slightly different gray values in each one.
5. Check the full range of states. Review the gray in the default, hover, focus, disabled, and selected states. A color that looks clear on one card may disappear beside a different background or border.
6. Sample the revised interface. Use the Color Picker to check the rendered color again. Confirm that the components meant to match now share values and that the color still has enough contrast for its purpose.

Keep neutral gray choices consistent

Do not make every gray in a system identical. Text, borders, disabled controls, and background surfaces have different jobs and may need different lightness values. The goal is to define a small, intentional set of grays and apply each one consistently.

Document each token with its value, role, and important contrast pairings. Record colors in the format your design system uses, such as HEX or RGB, and note whether a sampled value came from the source token or from the rendered screen. That distinction helps the next person avoid changing a color based on a misleading sample.

Use the same browser and a consistent screen view when you repeat the audit, since the rendered appearance can vary between devices and display conditions.