Parse CSS with PostCSS, inventory colors, find duplicates and near-matches, and generate suggested design tokens.
Parsed with PostCSS. Never executes code. Standalone CSS cannot prove unused variables or real rendered contrast.
:root {
--color-ink-1: #0f172a; /* used ~2× */
--color-ink-2: #111827; /* used ~1× */
--color-surface-3: #f8fafc; /* used ~1× */
--color-cool-4: #64748b; /* used ~1× */
--color-cool-5: #1d4ed8; /* used ~1× */
--color-surface-6: #ffffff; /* used ~1× */
--color-cool-7: #1e40af; /* used ~1× */
}
:root {
--color-ink-1: #0f172a;
--color-ink-2: #111827;
--color-surface-3: #f8fafc;
--color-cool-4: #64748b;
--color-cool-5: #1d4ed8;
--color-surface-6: #ffffff;
--color-cool-7: #1e40af;
}
:root {
--unused-example: var(--color-ink-2);
}
.card {
background: var(--color-surface-3);
color: var(--color-ink-1);
border: 1px solid var(--color-cool-4);
}
.button {
background: var(--color-cool-5);
color: var(--color-surface-6);
}
.title {
color: var(--color-ink-1);
}
.link {
color: var(--color-cool-7);
}
How to use this tool
Inventory stylesheet colors, flag duplicates, and draft CSS variables before a token migration.
Literal HEX sprawl is how brands drift. Tokens only help after you see what is repeated.
Read next: From HEX to design tokens · Theme builder
A LITTLE MORE CLARITY
Need a reference? Browse the HEX and RGB color code chart. Looking for more? Browse Our Tools.