Generate a complete design system from brand colors using AI. Use when starting a new project or standardizing colors.
Give it your brand colors. Get back a complete design system with semantic tokens, shade scales, and ready-to-use CSS variables or Tailwind config. Stop manually picking 9 shades of blue.
One command. Zero config. Just works.
npx ai-theme --primary "#3B82F6" --secondary "#10B981"
# Generate from primary color only
npx ai-theme --primary "#6366F1"
# Full brand palette
npx ai-theme --primary "#3B82F6" --secondary "#10B981" --accent "#F59E0B"
# Output Tailwind config
npx ai-theme --primary "#8B5CF6" --format tailwind
# Include dark mode variants
npx ai-theme --primary "#EC4899" --dark-mode
# Export to file
npx ai-theme --primary "#14B8A6" -o ./theme.css
This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.
Find more:
No install needed. Just run with npx. Node.js 18+ recommended.
npx ai-theme --help
The tool takes your base colors and uses color theory principles to generate harmonious shade scales. It calculates luminance values to ensure each step in the scale has proper contrast, then maps these to semantic purposes like backgrounds, text, and interactive states.
MIT. Free forever. Use it however you want.