Skip to content
| Marketplace
Sign in
Visual Studio Code>Linters>ColorGuard — Hardcoded Color DetectorNew to Visual Studio Code? Get it now.
ColorGuard — Hardcoded Color Detector

ColorGuard — Hardcoded Color Detector

Meet.Jethwa

| (0) | Free
Find hardcoded hex/rgb/hsl colors that should be design tokens, with the nearest matching token on hover. Auto-replace, bulk replace, and adoption reports with Pro.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft