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
How to use Website Color Analyzer
- Enter a page address (or paste HTML).
- Click “Analyse colours”.
- Browse the palette and roles.
- 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.
Palettes from CSS
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.
How it works: our server downloads the page once through a guarded fetcher that only connects to public addresses, follows a limited number of redirects and stops after a size and time limit. The HTML is then analysed in your browser as inert text – scripts on the page never run and nothing is stored.
What it cannot see: content and resources that a page adds with JavaScript after it loads, pages behind a login, and servers that block automated requests. For those, open the page in your browser, use its developer tools, or paste the page source where the tool offers a paste option.
Use the results as a starting point: fix the items marked red first, review the yellow warnings in context, and run the check again after a change. Requests are rate-limited to keep the service fair; if you check many pages in a row, wait a few minutes.
Related checks on this site cover the rest of a technical review – speed and Core Web Vitals, security headers, structured data, accessibility and SEO signals – so you can work through a whole site audit one topic at a time.
Who it is for: site owners checking their own pages, developers debugging a release, SEO and marketing teams auditing clients or competitors, and students learning how the web works. No account or installation is needed, and the results are plain text and tables you can copy into a report or ticket.