Reading a website's brand colors
What the brand scan reads
Point the tool at a public web page and it fetches the page server-side and reads the colors it declares: theme-color meta tags, inline styles, embedded CSS and SVG fills, ranked by how often each one is used. That ranking is the interesting part — a brand can declare a vivid primary and still paint most of its interface in neutrals, and the proportions show which colors are really carrying the design.
Why audit brand colors at all
Competitive teardowns, redesign briefs and design-system migrations all start with the same question: what palette is really in use? Declared brand guidelines age quickly; the live site is the truth. Seeing a competitor's actual primary, accent and neutral ramp — with the proportions they use them in — tells you where your own palette needs to differ to stay recognisable, and which of your pages have drifted from your own tokens.
It is also an accessibility smoke test. Once you have the real text and background colors, run the pairs through the contrast checker — marketing pages routinely ship body text below the WCAG AA threshold, and finding that in a rival's audit (or your own) is a concrete, fixable finding.
Limits of the scan
Colors that exist only inside images, canvas or video are not in the stylesheet layer; for those, save a screenshot and use the image palette extractor. Pages behind logins, consent walls or bot protection can only be read partially, and heavily personalised pages show the default theme rather than a logged-in one. Treat the result as a faithful sample of the public surface, not a full crawl.
What to do with the report
Save the palette you find, compare it side by side with yours in palette diff, and rebuild any keeper colors as a proper OKLCH scale in the picker so the borrowed inspiration becomes an accessible, systematic palette rather than a copied HEX list.
A teardown workflow that ships
1) Scan the marketing homepage and the product app shell separately — they often diverge. 2) Keep the top five by frequency plus any vivid accent, discard near-duplicates. 3) Check text/background pairs that appear in screenshots. 4) Rebuild keepers in OKLCH so your system is intentional, not a hex dump. 5) Diff against your current tokens before a rebrand so stakeholders see what actually moved.
Export CSS variables or Tailwind @theme when you only need a starter; open Studio when you need full ramps and DTCG. For colors that exist only inside hero images, finish with the image extractor.
Who this tool is for
Design-system owners auditing drift, agencies pitching redesigns, PMs comparing competitors, and engineers who need brand tokens tonight without waiting on a brand deck. Free, no signup — paste a public URL and leave with ranked OKLCH and HEX.