How to find a button's background color

You see a button on a webpage and want to reuse its background color in a design, document, or another page. The color may look simple, but guessing by eye can give you a noticeably different shade.

Use TooLab's Color Picker to sample the color directly from your screen and read its HEX, RGB, or HSL value. This finds the color you can see, which may differ from the color set in the page's code.

Pick the button's background color

1. Open the Color Picker in Chrome or Edge on a computer. The screen picker works in those browsers. In other browsers, the tool may offer fewer features or no screen sampling.
2. Start the picker and follow the browser's prompt to choose the screen, window, or tab you want it to read. Select the page that contains the button.
3. Point the picker at a plain area near the center of the button, away from its label, outline, shadow, and rounded corners. Those details can have different colors from the background.
4. Read the HEX or RGB value shown by the tool and copy the format your design or code needs. For example, HEX may look like #2563EB, while RGB may look like rgb(37, 99, 235).

For a button with a gradient, sample more than one spot. A gradient changes color across its surface, so there is no single background value that describes the whole button.

What the color result means

The button has one solid color

If several samples from the flat center area match, the visible background is likely a solid color. Use the copied HEX or RGB value where you need to reproduce that appearance. A one-digit difference in a HEX value can change the displayed shade.

The value changes across the button

The button may use a gradient, a partly transparent background, or a visual effect such as a highlight. Sample the areas you want to match separately. If you need the original design value rather than a visual match, inspect the page's styles in the browser's developer tools and look for the computed background-color or gradient setting.

The color changes when you point at the button

Many pages use different styles for normal, hover, focus, pressed, and disabled states. A hover state appears while the pointer is over the button. A focus state appears when the button is selected for keyboard input. Decide which state you want to reproduce, then sample the button in that state.

The sampled color does not match what you expected

The picker reports the color rendered on your display, not necessarily the original value in the page's CSS. Transparency, shadows, filters, color profiles, and other layers can affect the visible pixel. If you need the exact CSS setting, use the browser's developer tools instead of treating the screen sample as the source value.

Fix common sampling problems

1. Sample the flat center. Avoid text, icons, borders, and shadows. If the button is small, zoom the page in before sampling, then restore the zoom when you are done.
2. Check the button state. Move the pointer away for the resting appearance, or place it over the button if you specifically need the hover color. For keyboard focus, select the button with Tab before sampling.
3. Choose the right browser and device. Use Chrome or Edge on a computer for the full screen picker. If the feature is unavailable in another browser, open the page in one of these supported browsers.
4. Share the correct screen area. If the browser asks what to share, choose the screen or window showing the button. If you selected the wrong area, stop the selection and start again with the correct one.
5. Check screen capture permission on a Mac. If macOS blocks screen access, open System Settings › Privacy & Security › Screen & System Audio Recording and allow your browser, then quit and reopen it. The exact setting name can vary on older macOS versions.

Screen color and page code can differ

A screen picker reads a pixel after the browser has drawn the page. That is useful when your goal is to match what a visitor sees. It cannot tell you whether the page used a named color, a HEX value, an RGB value, a gradient, or a transparent layer to produce that pixel.

For a single flat button, the screen sample is usually the quickest answer. If you are reproducing a design precisely, inspect the button's computed styles as well, especially when the background has transparency or changes on hover. The Color Picker reads colors from your screen, so you can sample the visible page without uploading a screenshot.