Skip to content
TextArray1.41.0
100% local

CSS color variable extractor

Find every color in your CSS and turn it into reusable custom properties.

Input
0
Output
Related tools
Color converterDeveloper tools
CSS formatterDeveloper tools
Contrast checkerDeveloper tools
i18n key diffDeveloper tools
TOML to JSON converterDeveloper tools
SQL to JSONDeveloper tools
CSS color variable extractor
Paste a stylesheet and this tool scans every declaration for color values written as hex, rgb()/rgba() or hsl()/hsla(), then rewrites the rules to reference custom properties instead of repeating the same value everywhere. It is built for cleaning up a stylesheet that grew organically — a redesign, a component library merge, or CSS pulled out of a design tool — where the same blue ends up typed a dozen slightly different ways.
The naming option controls how each variable is named: by order of first appearance (--color-1, --color-2…), by an approximate hue and lightness (--color-dark-blue, --color-light-gray), or by the property it first appears on (--color-background, --color-border). Turn on "merge equal colors written differently" to fold #ff0000, rgb(255, 0, 0) and hsl(0, 100%, 50%) into a single variable even though the source text differs; identical values are always merged regardless. The similarity slider goes further and merges shades that are close but not identical — useful when a palette accumulated near-duplicate grays or blues nobody meant to create. Choose whether the generated block sits under :root or a custom selector, pick the notation the variables print in, or switch to a plain list of colors and occurrence counts when you just want an audit rather than a rewrite.
The scanner only looks inside actual declaration values, so it never mistakes an ID selector like #abcabc for a color, and it leaves comments, quoted strings and url() contents completely untouched. Windows and Unix line endings both work, and the tool is not fooled by nested functions like a color inside a gradient list.
Everything runs locally in your browser — your stylesheet is never uploaded anywhere, so it is safe to paste code from a private project. Copy the result, download it as a .txt file, or send the output back into the input to refine it with another pass.
FAQ
Which color formats does it recognize?
Hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb()/rgba() and hsl()/hsla(), in both comma and space syntax. Named colors like "red" are not matched.
What counts as "the same color" for merging?
Byte-identical values always merge. Turning on the equivalence option also merges the same color written in a different notation (hex vs rgb vs hsl). The similarity slider additionally merges shades that are merely close, by an average channel difference you control.
How are the new variable names chosen?
By order of first appearance, by an approximate hue and lightness name, or by the CSS property the color was first found on — your choice. A collision gets a numeric suffix.
Will it touch colors inside comments, strings or url()?
No. Only colors in actual declaration values are matched — text inside comments, quoted strings and url(...) is left exactly as written.
Is my CSS uploaded anywhere?
No. Extraction runs entirely in your browser — your stylesheet never leaves your device.