How to capture a background HEX value for an A/B test

You need the HEX value for a landing page background, but the color shown on screen may not match the value in the design file. It can also change visually where text, images, gradients, or transparent layers overlap.

Use the Color Picker to sample a point on the page and read its visible HEX, RGB, and HSL values. Then use the same sampling method on each A/B variant so your comparison is useful.

Capture the background color

1. Open the Color Picker in Chrome or Edge on a computer. Picking a color from anywhere on the screen requires one of these browsers for the full feature.
2. Open the landing page in another tab or window and make sure the variant you want to measure is visible.
3. Return to Color Picker and start its screen color picking action. When the screen picker appears, point to a flat part of the background and select it. Avoid text, buttons, images, shadows, and the edges of sections.
4. Read the HEX value shown by the tool. Record it with the variant name and the sampled location, such as “Variant A, top-left blank area.” Repeat the same process for Variant B.

For a fair comparison, sample the same kind of area in both versions. If the background is one solid color, a single point away from other elements is usually enough. If it is a gradient or image, record several points and note where each one was sampled.

Choose a consistent comparison method

For a solid background

Pick a broad, unobstructed area in each variant. Stay well away from text and element boundaries, where antialiasing can blend nearby colors into the pixel you sample. If several clean areas return the same HEX value, the background is likely a uniform color in those spots.

For a gradient or image background

A single HEX value cannot represent a background that changes across the page. Sample matching positions, such as the center of the hero area and a lower corner, and record each value separately. For an image background, the sampled result describes that visible pixel, not the image as a whole.

For a background with a transparent overlay

Sample the page as a visitor sees it. A transparent tint, gradient overlay, or dimming layer can change the displayed color even when the underlying background value stays the same. If you need the original CSS color rather than the visible result, check the page's design source or inspect its styles instead of treating the sampled pixel as the source value.

What the result means

The variants show the same HEX value

The sampled pixels match at those locations. That does not prove every part of the backgrounds is identical, especially if either version uses a gradient, image, or overlay. Sample other corresponding areas if you need to compare the full section.

The variants show different HEX values

The visible pixels differ at the points you selected. The change might be intentional, or it might come from a transparent layer, a background image, a gradient, or a nearby shadow. Sample a few nearby points to see whether the difference is consistent or limited to a transition.

Nearby points on one page show different values

The background may not be a flat color, or another visual layer may cover part of it. A gradient naturally produces changing values. If you expected a uniform field, check the design and page styles for overlays, opacity, or decorative elements.

Fix common sampling problems

1. Use a supported browser and device. The full screen color picker works in Chrome and Edge on a computer. In other browsers, the feature may be reduced or unavailable. Switch to Chrome or Edge on a desktop or laptop and try again.
2. Make the page easy to sample. Move other windows out of the way and bring the target page to the front before starting the picker. Make sure the point you need is actually visible on screen.
3. Pick a point away from edges. A pixel beside text, a button, or a section border can contain a blend of colors. Choose a clear patch of background, or use matching positions on a gradient.
4. Keep display conditions the same. Compare both variants on the same screen with the same browser and display settings. Night mode, color filters, or a changed display profile can alter how colors appear. On Windows 11, check Settings › System › Display. On macOS, check System Settings › Displays.
5. Reload and try again if the picker does not open. Return to the tool, reload the page, and start the screen picking action again. If it remains unavailable, check that you are using Chrome or Edge on a computer and that the browser is up to date.

Why a visible HEX value can differ from the design value

HEX is a way to write a color using red, green, and blue channel values, such as #336699. The Color Picker reports the color of the pixel you select on screen. It does not identify which CSS rule, image, or layer produced that pixel.

For example, a semi-transparent white overlay over a blue background creates a lighter visible color. A screen picker reads the result of that combination. A gradient also changes color across its area, and browser rendering or display color settings can affect what you see. So, use the sampled value to compare visible results, and use the original design or page styles when you need the underlying color token.

Keep a short record of the variant, sampled point, and HEX value for each comparison. The Color Picker runs in your browser, and the sampled color stays on your device.