Which color formats are detected?

Hex (3, 4, 6, and 8 digit), rgb() and rgba(), hsl() and hsla(), and the common CSS named colors. Each is normalized to a 6-digit hex so duplicates written in different syntaxes collapse into one swatch.

How are colors grouped?

Each color is converted to RGB, then its hue angle (0–360°) is computed. Colors are sorted by hue so related shades sit together; pure grays and black/white are grouped separately as they have no hue.

Does it find CSS custom properties?

Yes. The parser scans for any --name: value declaration, including inside :root and component scopes, and lists each property with its raw value so you can review your token set.

Are comments and duplicates handled?

CSS comments are stripped before parsing so colors inside them are ignored. Identical colors (after normalizing to hex) are merged, and the tool reports how many times each appeared.

Is my stylesheet uploaded?

No. The whole parse, including reading any file you load, happens locally in your browser. Nothing is sent to a server.

What is the CSS Color & Variable Extractor?

Parse a CSS file for every --custom-property declaration and color value (hex, rgb, hsl, and named colors), normalize them, group by hue, and preview a swatch palette. A regex tokenizer that runs entirely in your browser — no stylesheet is uploaded. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Color & Variable Extractor

Name: CSS Color & Variable Extractor
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

The CSS Color & Variable Extractor scans a stylesheet and pulls out two things designers and developers care about: every CSS custom property (the --variable design tokens) and every color value used. It normalizes the colors, groups them by hue, and renders a swatch palette so you can audit a codebase or rebuild a design system fast.

How it works

The tool first strips CSS comments, then runs two regex passes over the remaining text.

Custom properties. It matches any --name: value declaration and lists the property name alongside its raw value. Because it scans the whole file, it picks up tokens defined in :root as well as component- and theme-scoped blocks.

Colors. A second tokenizer matches hex literals, rgb()/rgba(), hsl()/hsla(), and named colors. Each match is converted to a canonical 6-digit hex:

hsl() values are converted to RGB via the standard HSL-to-RGB algorithm.
rgb() channels are clamped to 0–255.
Short hex like #abc is expanded to #aabbcc; 8-digit hex drops the alpha.

Once every color is in hex form, duplicates written in different syntaxes merge into a single swatch, and the tool counts how often each appears.

Grouping by hue

To make the palette readable, each color’s hue angle is computed from its RGB values (0° red, 120° green, 240° blue). Colors are then sorted by hue so reds, oranges, greens, and blues cluster together. Colors with zero saturation — grays, black, and white — have no meaningful hue and are grouped on their own.

When this tool is most useful

Design-system audits. Paste a production stylesheet and see how many distinct colors it actually uses. Large codebases that grew without a token layer often reveal 40–80 unique hex values where the intended palette had six. The frequency count shows which colours appear everywhere (likely base palette) and which appear once (likely one-off overrides to consolidate).

Migrating to a token layer. If you are introducing CSS custom properties into an existing codebase, paste the old stylesheet here to get a complete list of raw values, then decide which should become tokens. The hue grouping makes it easy to spot #e63946 and #e43944 as near-duplicates that should resolve to a single --color-danger.

Verifying a dark-mode implementation. Paste your dark-mode stylesheet and confirm that the colors actually changed — that the same #ffffff and #000000 that dominate the light palette are not still the top values in the dark one.

Recovering tokens from a third-party stylesheet. If you are building on top of a UI library and want to understand its color system, paste its CSS and get the full palette at a glance without reading thousands of lines.

Tips and notes

This is ideal for design-system audits: paste a large stylesheet and instantly see how many distinct colors it really uses (often far more than intended) and which custom properties define your tokens. Because parsing is regex-based and local, it is fast even on big files and safe for proprietary stylesheets — nothing leaves your browser.