DESIGN SYSTEMS
Design Tokens Generator
Transform aesthetic color palettes into production-ready semantic variables with one click.
Source Color PaletteLive Auto-Recalculate On
Adjust any swatch to immediately derive optimized semantic tokens.
Color 1
Color 2
Color 3
Presets:
Semantic Tokens MappingAssigned automatically by luminance, contrast & vibrancy heuristics
primary
secondary
accent
background
surface
text
muted
border
success
warning
danger
:root {
--color-primary: #BAC4CE;
--color-secondary: #CEBAC4;
--color-accent: #C4CEBA;
--color-background: #C4CEBA;
--color-surface: #BAC4CE;
--color-text: #CEBAC4;
--color-muted: #71717A;
--color-border: #E4E4E7;
--color-success: #1EA64A;
--color-warning: #F59E0B;
--color-danger: #EF4444;
}