Check a design color in the browser for a website redesign

You have a color on a website, mockup, or image that you want to reuse in a redesign, but its exact value is unclear. Guessing by eye can leave buttons, links, and backgrounds slightly different.

Use the Color Picker to sample a visible color and read its HEX, RGB, and HSL values. For full screen-picking support, open it in Chrome or Edge on a computer.

Check a design color

1. Open the Color Picker in Chrome or Edge on a computer. Other browsers may offer a reduced version or no screen sampling.
2. Use the tool's screen color sampling action. If the browser asks you to choose a screen or window, select the one showing the color you want to inspect.
3. Move the picker over a flat, solid part of the color and select that point. Avoid the edge of text, icons, or shapes, where screen pixels can blend with neighboring colors.
4. Read the color values shown by the tool. Record the HEX value for a CSS color or design specification, and keep RGB or HSL too if that is what your design software uses.

For a redesign, take separate samples for each color role, such as the page background, body text, link, and primary button. Give each sample a clear label and note where you found it. This helps you avoid treating two similar-looking shades as the same color.

What the result means

The HEX value is a match for your CSS

HEX is a compact way to write a screen color, usually as six numbers and letters after a hash sign, such as #336699. You can use this value in a CSS declaration or pass it to a designer. Keep the leading hash when your code or design tool expects it.

RGB gives the same color in three channels

RGB lists the amounts of red, green, and blue that make up the sampled color. Each channel is usually a number from 0 to 255. Use RGB if your design software asks for separate channel values, or if you need to compare one channel at a time.

HSL is useful for making related shades

HSL describes hue, saturation, and lightness. Hue is the color family, saturation is how vivid it is, and lightness is how bright or dark it is. If two colors have a similar hue but one looks washed out, comparing saturation and lightness can help explain the difference.

Values change when you sample nearby pixels

A solid area should give you a consistent value when you sample its center. At the edge of text or an icon, antialiasing blends the foreground with the background to make the edge look smooth. The sampled value there may be neither the text color nor the background color. See why color picker values vary around text edges if you need to inspect those areas.

How to fix a color that looks wrong

1. Sample the middle of a flat area. Move away from borders, shadows, gradients, and text. A single point in a solid patch is a better reference than a blended edge.
2. Check that you sampled the intended screen. If the same page is open on more than one monitor, confirm the selected screen or window, then sample the color again.
3. Compare under consistent display conditions. Night modes and color adjustments can change how colors look to you. On Windows 11, check Settings › System › Display › Night light. On macOS, check System Settings › Displays › Night Shift. Turn these features off while comparing if you want a more consistent visual reference.
4. Try the supported browser. If screen sampling is unavailable, use Chrome or Edge on a computer. The browser may restrict this feature elsewhere, and changing a site permission will not add support to an unsupported browser.
5. Check the source design file if you need the original brand value. A color sampled from a displayed page can be affected by rendering, transparency, gradients, and other visual effects. The original design file or stylesheet is a better source for the intended base value.

What a screen color sample can and cannot tell you

The Color Picker reads a color from the pixels displayed on your screen. That makes it useful for matching a visible website element or checking a mockup, but it does not prove that the value is the original color in the site's source code. A semi-transparent layer, gradient, or hover effect can change the final color you see.

A sampled HEX value also does not guarantee that the color will look identical on every monitor. Displays can have different brightness, color profiles, and settings. For a website redesign, use the sampled value as a practical starting point, then check the result on the screens and in the page states that matter.

You do not need to upload a screenshot to sample a color from the screen.