Brand Extractors·3 min read

Reverse Engineering a Brand Palette From Live CSS

Screenshot color pickers lie. JPEG compression shifts hues, anti-aliasing blends edges, and the value you eyedrop off a screenshot is rarely the value the brand actually ships. Reverse engineering a brand palette properly means reading the site's CSS, where every color is written down in plain text. That's what the Brand Color Extractor automates: it fetches every stylesheet a site loads and hands you ranked hex values. Here's how the process works and how to read what comes back.

Open the tool All insights

When you need a competitor's brand colors exactly

Close enough isn't.

Competitor palette research shows up in more briefs than you'd expect. A rebrand pitch needs a slide proving the client's blue sits two shades away from the market leader's. A positioning deck maps every rival on a color wheel. A design system audit asks whether your grays match what the category has trained users to expect.

All of those need real values. Presenting #1A73E8 when the competitor ships #1B74E9 is fine; presenting a screenshot-picked #2E80D4 is a credibility problem waiting for a designer in the room to catch it.

Reverse engineering a brand palette from stylesheets

CSS is the source of truth.

The extraction is blunt and effective: fetch the page HTML, follow every stylesheet link, read every inline style block, and collect each color literal found, whether it's written as hex, rgb, rgba, hsl, or a named color. Everything normalizes to hex and gets counted.

The count is the insight. A value declared 214 times across the CSS is a workhorse; a value declared once is probably a leftover. Ranking by usage separates the palette the brand lives in from the noise every large codebase accumulates, and clustering near-identical values keeps rounding artifacts from inflating the list.

Colors from CSS variables and design tokens

Where mature brands keep the palette.

Sites with a design system declare colors from CSS variables at the root, something like --color-primary: #0F62FE and --color-surface: #F4F4F4, then reference the tokens everywhere else. That's good news for research, because the token block is effectively the brand's published palette documentation, sitting in a public file.

A scan picks these up where the literal values are declared. Token names don't survive into the swatch list, but the values and their groupings do, and on token-driven sites the extracted brand color group tends to match the official style guide almost exactly.

A worked brand palette pull

Real numbers from a scan.

Feed a mid-size SaaS site into the extractor and a typical result reads: 41 unique colors from 6 stylesheets and 118 KB of CSS. The ranked list opens with #1A73E8 at 214 uses, #202124 at 180, #FFFFFF at 162, #F8F9FA at 95, and #34A853 at 41.

The grouped view then tells the story: #1A73E8 and #34A853 land under brand color, #202124 under near-black, and the rest are neutrals. In two minutes you know the brand runs one dominant blue, one supporting green, and a warm-free gray scale. That's a palette slide, sourced.

Mistakes that skew a scraped palette

The data is honest, readings of it aren't always.

Watch for these when you turn raw swatches into conclusions.

Treating the OG image palette as the brand palette. Quantized photo colors are mood, not identity; the CSS tab is the record.
Reporting utility grays as brand colors because they rank high. Neutrals always dominate usage counts.
Mistaking hover and pressed-state variants for primaries; a darkened button shade is a derivative, not a second brand color.
Forgetting that colors applied by JavaScript at runtime, on canvas charts for instance, never appear in stylesheets.
Copying an rgba overlay tint as a solid, then wondering why your mockup looks heavier than the original site.

Tips for sharper competitor palette research

Scan two pages per brand: the homepage and one product or pricing page. Marketing pages sometimes carry campaign colors that the application UI never uses, and the difference between the two scans is itself a finding.

Also note the blocked-stylesheet count before quoting results. If a third of the CSS refused to load, say so in the deck. And when you need the palette alongside the mark and typography, run the scan the same day you pull the logo, since redesigns quietly invalidate old research.

Brand Color Extractor vs related color tools

Extraction and generation are different jobs.

The Brand Color Extractor answers what colors does this site really use. The Color Palette Generator answers the forward question instead, building complementary and analogous schemes from a base color you choose, which is the tool to open once research turns into designing your own palette. For a complete teardown, pair the extractor with the Logo Extractor and the Brand Font Detector, or let the Brand Asset Pack collect the visual assets in one ZIP while this tool supplies the color data.

A brand color habit worth stealing

When you extract a competitor set, date the export. Palettes drift with redesigns, and a swatch file named for its month tells you instantly whether your research reflects the brand as it looks today or the one from two site versions ago.

Try it now

Open Brand Color Extractor

The tool is one click away. No sign up, no upload, no payment.

Open Brand Color Extractor

Write a review