CSS Color Audit: Find Every Color a Page Uses

## Why it matters

Design systems rot. A palette of eight colours quietly becomes forty as people paste one-off hex codes. An audit surfaces that drift: forty near-identical greys is a smell you can only see once they are counted in one place. Because it reads computed styles, it captures what the browser actually paints after the cascade, variables and inheritance, not what any single rule said.

That difference matters. A rule says color: var(--text) but the audit sees the resolved #1a202c. An audit shows reality. That is how you spot when designers and engineers are no longer speaking the same language about colour.

## How it works

The extension calls getComputedStyle() on every visible element, reads the values of color, background-color, border-color, fill and stroke, groups identical colours, counts which elements use each one, and builds a sorted list ranked by frequency and property.

Transparent and currentColor are skipped because they do not represent a real decision: transparent is always transparent, and currentColor is a reference, not a colour. The result is a genuine inventory of the colours that page uses, right now, in that viewport.

## What does not matter

An audit cannot tell you whether your palette is good, only what it is. A colour showing up 47 times does not mean it should be a token, just that it is common. And because the audit only scans the visible viewport, scrolling changes the result. A long page viewed at the top will not see footer colours.

## Code example

// Simplified example: get one element's computed colour
const elem = document.querySelector('.button-primary');
const computed = window.getComputedStyle(elem);
const bgColor = computed.backgroundColor;
console.log(bgColor); // rgb(56, 189, 248)
Copy

A full audit loops through all visible elements:

const colourMap = new Map();
document.querySelectorAll('*').forEach(el => {
  const styles = window.getComputedStyle(el);
  const bg = styles.backgroundColor;
  if (bg !== 'rgba(0, 0, 0, 0)') { // skip transparent
    const count = colourMap.get(bg) || 0;
    colourMap.set(bg, count + 1);
  }
});
// colourMap is now { 'rgb(56, 189, 248)': 47, 'rgb(255, 255, 255)': 312, ... }
Copy

## How Scalpel Color shows it

Open the CSS Colors tab and click "Harvest CSS colors". The extension reads every visible element's computed colour, groups them, and displays them sorted by frequency. Each swatch shows its usage count and the properties (background, text, border) and elements that use it. Everything is checked in your browser, and nothing about the page is sent to a server.

---

## How it works (technical depth)

Computed styles are the result of the full CSS cascade: specificity, inheritance, and cascading rules all resolved. A <p> inside a <div color: blue> will have computed color: rgb(0, 0, 255) even if no rule explicitly set that paragraph's colour. That is why an audit sees the real picture of a page, not just the rules a developer wrote.

The properties the audit reads are the main colour-carrying ones:

• color: text colour.
• background-color: element background.
• border-color: border.
• fill and stroke: SVG vector fill and outline.

If a swatch is used on both text and background, the audit counts them separately so you can see the pairing.

## What does not matter (expanded)

Computed styles have limitations. An element with opacity: 0.5 will not show as a changed colour in the computed value (opacity is separate), but on-screen it will blend with its background. The audit does not composite; it only reads the declared colour. If you need to understand transparency, the Contrast tab is a better view.

And the audit only sees what is rendered. A display: none element never gets visited. A visibility: hidden or overflow: hidden element is skipped if it is off-screen. The audit is a snapshot of what the browser is actually drawing right now.

## Turning an audit into action

An audit is a starting point, not a directive. Once you have the count, ask yourself:

1. Are forty colours intentional, or have standards drifted?
2. Which ten colours account for 80% of usage?
3. Can the near-duplicate greys be consolidated into two or three?
4. Which colours appear only once or twice? Are they brand, or strays?

From there, build a token set with the subset of colours that should be shared, and a plan to migrate rules onto those tokens.