How to Find the Exact Button Color Used on a Website
Learn how to find the exact button color used on a website, copy its HEX or RGB code, inspect hover states and avoid gradients, shadows and sampling errors.
29 July 2026
Quick Answer
- Open the webpage and activate AutoColorPicker.
- Place the pointer over the flat centre of the button—not its text, border, shadow or rounded edge.
- Click the pixel and copy the displayed HEX or RGB value.
- Repeat the process while hovering over the button to record its hover color.
- For a complete webpage workflow, see how to pick colors from a website in Chrome.
A landing page button may look orange, blue or green, but visual guessing will not give you the exact value. The fastest non-technical method is to sample the visible button pixel and copy its HEX or RGB code. The only complication is that the visible result may include a gradient, transparency, hover state, shadow or overlay.
Need the visible color?
Use AutoColorPicker to sample the rendered pixel that people actually see on the webpage.
Need the CSS source?
Use browser DevTools when you must identify a CSS variable, background declaration, pseudo-class or inherited style.
When Would You Need a Website Button Color?
| Task | Color to Capture | Where You May Reuse It |
|---|---|---|
| Landing-page inspiration | Primary CTA and hover state | Figma, Webflow or design brief |
| Brand consistency check | Live button versus brand guideline | Design system or QA report |
| Campaign creative | CTA, background and accent colors | Ads, banners or email graphics |
| Frontend QA | Default, hover, active and disabled colors | CSS ticket or bug report |
How to Find the Exact Button Color on a Website
Use this five-check workflow instead of clicking the first orange or blue pixel you see.
1. Open the exact page and device view
Button colors can differ between a homepage, pricing page, campaign landing page and mobile layout. Start on the exact version you want to inspect.
2. Activate AutoColorPicker
Click the extension icon and move the pointer over the CTA. The live preview helps you position the selector before saving the color.
3. Sample the flat centre
Avoid the label, icon, border, shadow and antialiased edge. Pick a flat area with enough space around the pointer.
4. Copy HEX and RGB
Save both formats when the color will be shared between designers, marketers and developers.
5. Repeat for button states
Record the default, hover, active, focus and disabled states where they are available. Do not store them all under one label.
Screenshot 1
Target landing page showing the complete CTA button before inspection.
Screenshot 2
AutoColorPicker positioned over the flat centre of the button with the detected value visible.
Screenshot 3
Default and hover colors recorded separately in the CTA inspection template.
Why Does the Button Show More Than One Color?
Gradient
Capture the left, centre and right values. A gradient is a transition between multiple colors, so one HEX code cannot represent the full button.
Transparency
The visible pixel may be a blend of the button color and the section behind it. Record the rendered result and inspect CSS when you also need the alpha value.
Hover effect
Moving the pointer may trigger a different color. Label the two values as “default” and “hover.”
Shadow or glow
The edge may include a shadow, highlight or glow. Sample the interior unless the effect itself is what you need.
For a complete collection of brand, background, text and state colors, use AutoColorPicker’s guide to extracting a website color palette.
HEX and RGB Output Examples
These are formatting examples, not recommended conversion colors. The right CTA color depends on the page background, brand system, audience and text contrast.
Free CTA Color Inspection Template
Record more than one color code
| Field | Value | Notes |
|---|---|---|
| Page URL | ________________ | Desktop or mobile |
| Default CTA | HEX ______ / RGB ______ | Sampled from centre |
| Hover CTA | HEX ______ / RGB ______ | Pointer active |
| Button text | HEX ______ / RGB ______ | Check contrast |
| Gradient / border / shadow | ________________ | Record separately |
Do Not Judge a CTA by Color Alone
A bright button does not automatically produce more conversions. Check whether it is visually distinct from the surrounding page, consistent with the brand and easy to read. WCAG 2.2 requires a contrast ratio of at least 4.5:1 for normal-size text in most situations.
Practical check: capture the button background and its label color separately. Test the pair in the default and hover states before adding it to a design system.
Common Button-Color Inspection Mistakes
Sampling the label: the result is the text color, not the button background.
Clicking the rounded edge: antialiasing can blend the button with the page background.
Ignoring hover: the saved value may describe only the interactive state.
Treating a gradient as one code: record its main stops or inspect the CSS declaration.
Copying a competitor exactly: use color research for hierarchy and inspiration, then adapt it to your own brand.
Find every CTA color without guessing
Use the free inspection template above, then capture the exact HEX, RGB or HSL values from the live webpage with AutoColorPicker.
Download AutoColorPicker Free →Frequently Asked Questions
How do I find the color code of a button on a website?
Activate AutoColorPicker, hover over a flat area in the centre of the button, click the pixel and copy the displayed HEX or RGB value.
Can I pick a website color without DevTools?
Yes. A Chrome color-picker extension can sample the visible webpage directly without requiring you to inspect CSS rules.
Why do I get different colors from the same button?
The button may contain a gradient, transparency, shadow, hover effect or antialiased edge. Sample the centre and record each visual state separately.
Should I use HEX or RGB for a website button?
Both can represent the same solid color. HEX is compact and common in design systems, while RGB is useful when adjusting individual channels or working with transparency.
How do I inspect a button’s hover color?
Move the pointer over the button until its hover state appears, then sample the new background color. Developers can also force the hover state through the DevTools Styles panel.
Product and technical references
AutoColorPicker · Pick Website Colors in Chrome · Extract a Website Color Palette · Chrome DevTools CSS Guide · WCAG 2.2