Generate a production-ready color system from 1 color
Pick one hex color. Get a consistent UI color system — dark mode, light mode, button states, CSS variables — all production-ready in 30 seconds.
One-time payment · $5.00Built by indie devs, for indie devs · No subscription — just pay once
Made for SaaS builders who ship fast
Use the color picker or paste a hex code — just one decision
A real layout showing cards, buttons, text and states with your color
Download the CSS with variables, dark mode and an HTML example
Pick one hex color. Get a consistent UI color system — dark mode, light mode, button states, CSS variables — all production-ready in 30 seconds.
Generate my color system →One-time payment · $5.00
Pick a color and see the full system generated in real time
Buttons
Real content using surface, border and text-muted from the generated system
Background
#101012
Surface
#1c1c1f
Primary
#6366f2
Accent
#cc9d72
Primary Hover
••••••
Primary Disabled
••••••
Text Primary
••••••
Text Muted
••••••
Text on Primary
••••••
Text on Accent
••••••
Border
••••••
Focus Ring
••••••
:root {--color-primary: #6366f2;--color-accent: #cc9d72;--color-background: #101012;--color-surface: /* locked */;--color-primary-hover: /* locked */;--color-primary-disabled: /* locked */;--color-text-primary: /* locked */;--color-text-muted: /* locked */;--color-text-on-primary: /* locked */;--color-text-on-accent: /* locked */;--color-border: /* locked */;--color-focus-ring: /* locked */;/* ...more variables available after payment */}
Unlock the full system
Consistency for your UI without thinking. Dark mode, tokens, and code — done.
Generate my color system →One-time payment · $5.00