webtoolshelper
Website Tools

Website Color Analyzer

Get the colours a website really uses. The analyzer reads the inline CSS and up to eight stylesheets, normalises every colour – hex, rgb, hsl and names – and ranks them by how often they appear, with their role: text, background, border, SVG or shadow. Colour custom properties are listed, and wherever a CSS rule sets both a text and a background colour, the pair is shown with its WCAG contrast ratio. Click a swatch to copy it.

  • Encrypted connection
  • No sign-up
  • Free to use
Analyse pasted HTML instead

How to use Website Color Analyzer

  1. Enter a page address (or paste HTML).
  2. Click “Analyse colours”.
  3. Browse the palette and roles.
  4. Check the contrast of the pairs.

Website Color Analyzer features

Normalised palette

Hex values with counts.

Roles

Text, background, border, SVG.

Contrast pairs

WCAG ratios.

Variables

CSS custom properties.

Paste mode

Analyse HTML you paste, e.g. from a staging site.

Safe fetching

Public addresses only, with size and time limits.

When to use Website Color Analyzer

  • Finding brand colours of a site.
  • Accessibility reviews.
  • Design system audits.
  • Inspiration for new palettes.

Website Color Analyzer FAQ

Why so many colours?

Frameworks and old styles add colours that are rarely used; the most frequent ones are usually the real palette.

Are colours from images included?

No; use the Image Color Extractor for images.

Why only some contrast pairs?

A pair is only certain when one CSS rule sets both colours; other combinations depend on the page structure.

What does @10% mean?

The colour is used with 10% opacity.

Why do I see so many similar colours?

Large sites often accumulate slightly different shades over time. Merging them into a few design tokens makes the CSS smaller and the design more consistent.

Can I export the palette?

Yes. Copy the colours as a list or as CSS custom properties to reuse them in your own stylesheet or design tool.

Why is a colour I can see on the page missing?

Colours inside images, SVG files loaded separately or styles added by JavaScript are not part of the CSS the analyzer reads.

WCAG Contrast Checker Check whether text is readable against its background. Enter two colours in any… Website Font Detector Find out which fonts a site uses and how it loads them. The detector reads the… Image Color Extractor Find the exact colour of any pixel in a photo, logo or screenshot. Hover to see a… Color Palette Generator Create a harmonious colour scheme from a base colour, or pull a palette out of a…

Finding a site’s real palette

A site’s CSS records every colour decision, including ones visitors rarely see. Ranking by usage separates the core palette from leftovers.

Check uncertain combinations with the WCAG Contrast Checker.

The analyzer collects every colour declared in a site’s CSS – hex codes, rgb(), hsl() and named colours – converts them to one format and counts how often each appears. Grouping by role (text, background, border, SVG, shadow) shows which colours make up the real palette and which are one-off values.

Colour custom properties such as --primary are listed separately; they are usually the intended design tokens. Where a rule sets both a text and a background colour, the contrast ratio is calculated, so low-contrast combinations stand out for accessibility work.

Use the result to document an existing brand palette, to clean up near-duplicate colours that crept into a stylesheet, or to study a design you like. Colours used only in images or added by JavaScript are not included.

Designers use the result to document a brand palette from a live site, developers to replace scattered hex codes with a small set of CSS custom properties, and accessibility reviewers to find low-contrast text and background pairs. The ranking by frequency shows which colours really define the design and which are leftovers.

Other useful tools