Web Palette Generator
Pick a primary color and instantly get a full palette (primary, secondary, accent, neutral) with shades from 50 to 950. Export as CSS variables, Tailwind v3/v4, SCSS or Figma Tokens.
Color configuration
Pick your primary color — the others are derived automatically.
Main brand color used for key actions.
Support color for secondary actions and surfaces.
Focus and highlight color used for emphasis.
Base background tone used to derive neutral surfaces.
Semantic tokens
--background
#f0f0f5--foreground
#14141f--primary
#2e32ec--primary-foreground
#e8e8fd--secondary
#f8d4b3--secondary-foreground
#643509--muted
#dfdfe9--muted-foreground
#7576a5--border
#bbbcd3--input
#bbbcd3--ring
#adf163--destructive
#73ce12Preview
yoursite.com
Loading preview...
Scales
Primary#6366f1
Secondary#f1a763
Accent#adf163
Other / Neutral#9899bc