CSS Color Extractor

Paste CSS, SCSS or HTML and get every color it uses, deduplicated and counted, ready to export as a list or CSS variables. Runs entirely in your browser. Nothing is sent to any server.

CSS, SCSS or HTML

8 colors

Sort by

Most used Hue

Copy and download as

HEX list CSS variables

What is a CSS color extractor?

A CSS color extractor scans code for every color it uses and lists each one once, so you can see a project's real palette instead of the one in the style guide. This one finds HEX values, rgb(), hsl(), lab(), lch(), oklab() and oklch() anywhere in the text, and CSS color names inside declaration values, then merges the spellings that produce the same color, such as #2563eb, #2563EB and rgb(37, 99, 235). Each color shows how often it appears and how it was written, and the result can be copied as a list or as CSS custom properties.

Examples

Finding and reusing colors from code:

grep

grep -Eoh '#[0-9a-fA-F]{3,8}\b' src/**/*.css | sort | uniq -c | sort -rn

JavaScript

const hexes = css.match(/#[0-9a-f]{3,8}\b/gi) ?? [];
const unique = [...new Set(hexes.map((h) => h.toLowerCase()))];

Python

import re
from collections import Counter

Counter(m.lower() for m in re.findall(r"#[0-9a-fA-F]{3,8}\b", css))

CSS

:root {
  --color-1: #2563eb;
  --color-2: #ffffff;
}
.button { background: var(--color-1); }

Use Cases

Auditing a legacy stylesheet

Paste an old CSS file to see how many slightly different grays and blues have crept in, and which are used often enough to keep.

Building design tokens

Turn the colors a project already uses into CSS variables as the first step toward a token system.

Borrowing a palette

Copy the CSS of a page from your browser's developer tools and paste it here to get its colors.

Reviewing a pull request

Paste the changed styles to spot hard-coded colors that should have used an existing variable.

Frequently Asked Questions

Which color formats are detected?

HEX with 3, 4, 6 or 8 digits, rgb(), rgba(), hsl(), hsla(), lab(), lch(), oklab() and oklch() anywhere in the text, and the 148 CSS color names when they appear in a declaration value, such as color: tomato.

Why aren't color names in class names detected?

Words like red, tan or navy appear in class names (text-red-500), comments and text far more often than as real colors. Names are only counted after a colon, where a CSS value goes, and comments are skipped.

Are colors that look the same merged?

Colors that produce exactly the same value are merged, whatever their spelling. Colors that are merely close stay separate; use the Delta E Calculator to decide whether two of them are worth unifying.

Can I paste a URL instead of code?

No. Reading another site would need a server, and this tool runs only in your browser. Open the site, copy its CSS from the developer tools (Sources or Network tab) and paste it here.

Is my data sent to a server?

No. The code is scanned in your browser with plain JavaScript. Nothing you paste is transmitted or stored.