About the CSS Color Extractor
Stylesheets accumulate colours: five slightly different greys, three accent greens, a red nobody remembers adding. Before defining design tokens or a palette, you need the inventory. This tool scans the CSS for hex values (3, 4, 6 and 8 digits), rgb(), rgba(), hsl() and hsla() functions, normalises case, and lists each unique colour with the number of times it occurs.
The list is sorted by frequency, so the colours that matter most are at the top and the one-off values that are probably mistakes are at the bottom. Named colours such as red are not extracted, because words like tan and navy appear in other contexts too.
Paste any colour from the list into the Color Converter to see all its formats, or into the Contrast Checker to test it against a background.
How to use
- Paste the stylesheet on the left.
- Read the list: colour, tab, count.
- Copy it into a spreadsheet to plan your tokens.
Common questions
- Does it merge #fff and #ffffff?
- No. They are listed separately so you can see inconsistent notation, which is itself worth fixing.
- Are CSS variables followed?
- The colour inside a custom property definition is counted once. Uses of var(--name) are not counted as the colour.
- Can it read SCSS?
- Yes, colour literals in SCSS or LESS are found the same way.