A CSS Color Palette Generator That Works

Find or add your primary brand color, adjust a couple of nobs, and create a sensible, semantic, professional color palette in a couple of seconds. Preview on a real site. Export to CSS, SCSS, Figma, and TailwindCSS.

Primary

Primary brand color, used for main call to actions, logos, etc.

Primary

#7c3aed

Primary Content

#ffffff

Primary Light

#9b69f1

Primary Dark

#5f14e0

Secondary

Secondary brand color, used for tertiary actions.

hue degrees

Secondary

#ed3a51

Secondary Content

#ffffff

Secondary Light

#f1697a

Secondary Dark

#e0142f

Neutrals

Base colors are for backgrounds and borders. Copy colors are for text.

LessSaturationMore

Foreground

#fbfbfb

Background

#efeff1

Border

#dedde2

Copy

#252329

Copy Light

#645e6e

Copy Lighter

#8a8495

Utility

Utility colors denote intention, such as deleting an account.

Success

#3aed3a

Warning

#eded3a

Error

#ed3a3a

Success Content

#032503

Warning Content

#252503

Error Content

#ffffff