ColorGuard — Hardcoded Color Detector

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.