Brand Extractors·4 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 is what the Website Color Extractor automates: it reads the page's linked stylesheets and inline styles and hands you ranked hex values. Here is how the process works and how to read what comes back.

Open the free Website Color Extractor All insights

When you need a competitor's colors exactly

Close enough is not.

Exact colors come up in more briefs than you would 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. It fetches the page HTML, reads up to 25 linked stylesheets and every inline style block, and collects each color it finds, whether written as hex, rgb, rgba, hsl or a named color. Everything is converted to hex and counted. Colors within 6 steps of each other on every RGB channel are merged and their counts added, so one brand blue is not split into several swatches by rounding.

The count is the insight. A value declared 214 times 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. What the scan cannot see: colors set by JavaScript after load, colors inside images or SVG files, and stylesheets pulled in with @import.

CSS variables and design tokens

Where mature brands keep the palette.

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

The scan counts each color where its literal value is declared. Places that only reference a variable with var() hold no color value, so they do not add to the count, and on token-driven sites the usage numbers can look flatter than the real visual weight. Token names do not survive into the swatch list, but the values and their role groups do.

A worked brand palette pull

Real numbers from a scan.

Click Extract brand colors on a mid-size SaaS site and the summary bar might read: 41 unique colors, 6 stylesheets scanned, 118 KB CSS. The From CSS tab opens with #1A73E8 at 214 uses, #202124 at 180, #FFFFFF at 162, #F8F9FA at 95 and #34A853 at 41.

The Grouped tab then tells the story: #1A73E8 and #34A853 land under Brand color, #202124 under Black / near-black, and the rest under Neutral and White. In two minutes you know the brand runs one dominant blue, one supporting green and a plain gray scale. The export box turns the top 12 into a :root block with names like --brand-1 and --neutral-1, SCSS, a Tailwind config, JSON with hex, rgb and hsl values, or Adobe and GIMP swatch files. That is a palette slide, sourced.

Mistakes that skew a scraped palette

The data is honest; readings of it are not always.

Watch for these when you turn raw swatches into conclusions.

Treating the From OG image tab as the brand palette. Colors sampled from a social image 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.
Ignoring the alpha badge and copying a 20 percent overlay tint as a solid, then wondering why your mockup looks heavier than the site.

Tips for sharper color research

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

Check the summary bar before quoting results. It shows how many stylesheets were blocked, and if a third of the CSS refused to load, say so in the deck. Date every export, too. Palettes drift with redesigns, and a file named for its month tells you at once whether your research reflects the brand as it looks today.

Website Color Extractor vs related color tools

Extraction and generation are different jobs.

The Website Color Extractor answers what colors a site really uses. The Color Palette Generator answers the forward question, building schemes from a base color you choose, and the Color Shades Generator builds tints and shades once research turns into designing. For a color that lives in a logo or photo file rather than in CSS, use Color Palette from Image. For a complete teardown, pair the extractor with the Logo Extractor and the Website Font Detector. The Brand Asset Pack Downloader includes a colors.json with the top 12 colors plus palette files for design apps.

Try it now

Open Website Color Extractor

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

Open Website Color Extractor

Write a review