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.

CSS Color & Variable Extractor

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.

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.