Turn one color into usable UI tokens
Dashboard card
Token preview with surface, border, text, primary, and accent roles.
Background
Page background
#f9fafb
Surface
Cards and panels
#eef0f2
Muted
Subtle fills
#dadfe2
Border
Dividers and outlines
#c0c8ce
Text
Main readable text
#1a2328
Primary
Primary actions
#3498db
Primary Text
Text on primary
#f9fafb
Accent
Secondary accent
#e7553c
Accent Text
Text on accent
#fbf9f9
It turns one source color into named UI roles for backgrounds, surfaces, text, borders, primary actions, and accents.
Enter a supported color value or use the visual picker to choose the source color.
You can copy the generated tokens as CSS variables, JSON, or hexadecimal values.
Yes. Saved palettes are stored in this browser for later use on the same device and profile.