How to pick a neutral gray for a UI banner

A gray background can make a banner feel calm and keep attention on the offer, photo, or call to action. But the wrong gray can make text look faint, clash with a brand color, or appear tinted when placed beside other colors.

Start with equal red, green, and blue values, then compare a few shades in the actual banner layout. TooLab’s Color Picker can sample colors from your screen and show their HEX and RGB values, so you can capture a reference and check the result.

Pick and compare neutral grays

1. Open the Color Picker in Chrome or Edge on a computer. Its screen sampling feature works in those browsers. Other browsers may offer a reduced version or no screen sampling.
2. Choose a starting shade for the banner. For a light background, try #F2F2F2, #E6E6E6, and #D9D9D9. Each is a neutral gray because its red, green, and blue channels are equal.
3. Place those three colors in the banner design as separate swatches or temporary background versions. Keep the headline, small text, logo, photo, and call-to-action button in place so you can compare the gray in context.
4. Use the Color Picker to sample a reference gray displayed on your screen, such as a surface in an existing campaign graphic. Compare its HEX or RGB values with your candidates. Avoid sampling at the edge of text or a thin line, where blended pixels can produce a value that is not the intended color.

Do not decide from a color tile alone. A pale gray beside a vivid brand color may look cooler, while the same gray beside cream or orange may look warmer. Compare the options at the size and scale where the finished banner will be viewed.

What the color values tell you

All three RGB values match

A neutral digital gray has the same red, green, and blue value. For example, #E6E6E6 corresponds to RGB 230, 230, 230. A darker neutral such as #777777 has RGB values of 119, 119, 119. The numbers set the brightness, while the equal channels keep the color from leaning toward red, green, or blue.

The channels are different

A value such as #E6E8EB is a cool gray because its blue channel is higher than its red channel. That can be a deliberate brand choice, but it is not a strictly neutral gray. If the banner should feel balanced and unobtrusive, use equal channel values as your starting point. A tiny color cast can be difficult to notice until you compare swatches side by side.

The gray looks different next to the text or image

Colors influence how nearby colors appear. A gray can seem blue beside a warm beige, or warm beside a blue background, even when its RGB channels are equal. This does not mean the sampled value changed. Judge it against the banner’s actual foreground colors, not against a blank canvas.

Small text is hard to read

The background may be visually pleasant but still provide too little contrast. Check the headline, body copy, button label, and any small legal or promotional text separately. For normal-size text, aim for a contrast ratio of at least 4.5 to 1. Large text can use at least 3 to 1. The Color Picker reports color values, but it does not calculate or certify contrast.

Refine the gray before exporting

1. Match the gray to its job. A light gray can separate a text panel from a photo without competing with it. A medium gray may work for a card or button area, but it can make dark text harder to read. A dark gray can support white text, as long as the contrast is strong enough.
2. Compare one change at a time. Keep the layout and text the same while you change only the background gray. If you adjust the gray and text color together, it becomes harder to tell which change improved readability.
3. Check the call to action. Make sure the button stands apart from the gray surface and that its label remains easy to read. Do not rely on color alone to show that an element is clickable. A clear shape, border, or label also helps.
4. Check the design at its final size. Zoom out to the banner’s intended display size. Fine text can become difficult to read even when it looks clear while you are editing at high zoom.
5. Save the exact value. Record the chosen HEX value in your design notes or brand palette. This makes it easier to reuse the gray consistently in future banners.

Keep the sample in context

Screen sampling reports the color of a displayed pixel, not necessarily the original value used in the source design. Text edges, shadows, transparency, image compression, and overlapping layers can all blend colors. Sample a broad, flat area of the background when possible. If you need the exact color from an editable design, check the object’s fill value in that design rather than sampling a screenshot.

Also remember that a color can look different on another display because of brightness, color profiles, or night mode. For a banner that will appear across phones and computers, choose a gray that remains readable and visually quiet across more than one screen when you can.