Color System Generator
Turn one base color into a shippable UI system.
Choose a base color, review the generated system, validate it in UI, then export the tokens you want to ship.
Step 1
Choose the base signal
Color picker
Violet
#4F46E5
Sharper accent with a more technical feel.
Starter hues
Selected color
Black text
Readable on lighter accents.
White text
Readable on deeper interface fills.
HEX
#4F46E5
RGB
79, 70, 229
HSL
243, 75%, 59%
Recommended usage
Best for primary actions and interface emphasis.
Generated scale
Recommended 600Step 2
Adjust if needed
Preview mode
System tuning
Advanced
Use case preset
Accessibility bias
Step 3
Review the system output
Semantic tokens
Key roles first
Text
Background
Border
Action
Feedback
Step 4
Validate the system in real UI
Live preview
Product shell preview
The preview answers how this system will actually behave in a product surface, not just how the colors look in isolation.
Light
Light product shell
Product shell
Validate the tokens in a believable interface, not a style tile.
Primary action
How your main decision reads inside the product.
Input
States
Status
Balanced neutrals with contrast-safe action tokens.
PassDark
Dark product shell
Product shell
Validate the tokens in a believable interface, not a style tile.
Primary action
How your main decision reads inside the product.
Input
States
Status
Balanced neutrals with contrast-safe action tokens.
PassStep 5
Export the system
Copy the format that fits your stack and move directly into implementation.
Tailwind config
Accent scale, companion neutrals, and semantic tokens ready for `theme.extend.colors`.
CSS variables
Light and dark variables for product surfaces and states.
JSON tokens
Clean token output for design system pipelines and app setup.