HTML Website Color Analyzer

Wondering what colors a website is using?

Just enter the website URL and our analyzer will scan the site, list the main colors, and show you their HEX and RGB codes.

Great for inspiration or competitor research.

Get Our Free Inspiration Guide

Ad - Managed WordPress Hosting from SiteGround - Powerful, yet simple to use. Click to learn more.

Free Color Picker From HTML

HTML Color Extractor

Paste HTML, click Analyze Colors. Click swatches to select or use the checkboxes. Select All and Clear Selection help speed things up. Downloads will include only the selected colors if any are selected.

Accessibility & Keyboard Tips

  • Fully keyboard navigable: Tab/Shift+Tab to move focus; Enter/Space to activate buttons.
  • Visible focus outlines and ARIA live regions announce the result count to assistive tech.
  • High‑contrast UI meets WCAG contrast targets for text and controls.

Accuracy Tips

  • Paste any relevant style rules or inline styles that define your colors.
  • CSS variables (var(–brand)) won’t resolve unless the actual color values are present; consider pasting the resolved CSS.
  • External stylesheets referenced via a link are not fetched—copy their contents into the field.

Troubleshooting

  • 0 found”: Ensure your snippet includes actual color values (not only class names). Add any related style rules.
  • Alpha colors: Semi‑transparent colors are shown as 8‑digit HEX (e.g., #RRGGBBAA).

How To Use The App

1. Paste your HTML

Click into the “Paste HTML” field and paste any HTML snippet.

Works with inline styles (e.g., style=”color:#1a73e8″), style blocks, and attributes like bgcolor or font color=””.
If your colors live in an external CSS file, paste that CSS into the field too.

2. Extract colors

Click Extract colors (or press Cmd/Ctrl + Enter).
The app scans your input and finds color values, including:

#hex (3, 4, 6, or 8 digits)

rgb()/rgba()

hsl()/hsla()

Named colors (e.g., tomato, rebeccapurple)

Colors inside gradients and shadows

3. Review your swatches

Results appear as color tiles sorted by hue, each labeled with a normalized HEX value (uppercase).
A live badge shows the total number of colors found.

4. Copy colors

To copy a single HEX, click Copy on that swatch.

To copy everything at once, click Copy all Hex (it copies a newline‑separated list).

5. Start over (optional)

Click Clear to reset the input and results.
Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.

Affiliate Disclosure:  Some links on this Site are affiliate links, which means that if you click on these links and make a purchase, we may earn a commission at no additional cost to you. We only recommend products and services that we believe will add value to our visitors. Please assume that any links leading you to products or services are affiliate links and that we may receive a commission if you make a purchase.