flashman
← All posts

Color tokens: surviving the design-to-CSS handoff

Convert HEX to RGB, document contrast, and stop the #3B82F6 telephone game.

2026-06-08 · 5 min read · Rahul Chitturi

  • design
  • css

Designers export HEX. CSS variables want rgb() with alpha. Tailwind config wants yet another format. A single source of truth plus quick conversion prevents drift between Figma and production.

Handoff checklist

  • Name tokens semantically (--color-primary, not --blue)
  • Document light and dark pairs
  • Verify contrast on real text sizes
  • Store canonical HEX in design tokens JSON

Try these tools