Large codebases accumulate hundreds of stray #3b82f6s, making design-system adoption and rebranding painful. ColorGuard finds them and points to the right token.
Free
- Inline highlighting of hardcoded hex / rgb / hsl colors
- Nearest matching design token on hover
- Color usage summary panel
Pro
- One-click replace with the matching token (quick fix)
- Bulk replacement of exact matches across the project
- Allowlist for intentional overrides
- Design-system adoption report (% of color usages that reference a token)
Tokens are read from your CSS/SCSS custom properties (--color-*) and tokens.json.
Get a Pro key at marketplace.dashovia.com/extensions/color-guard.