Free tool
Brand color palette generator
Pick a base color, choose a color harmony, and get a five-color palette — ready to copy as CSS variables or a Tailwind config.
Palette
Primary
Light
Dark
Complement
Complement Light
CSS Variables
:root {
--color-primary: #3b82f6;
--color-light: #84b1f9;
--color-dark: #0a59da;
--color-complement: #f6af3b;
--color-complement-light: #f9cd84;
}How to generate a brand color palette
- 1.Pick your primary brand color using the color picker or type a hex code.
- 2.Choose a color harmony — complementary for contrast, analogous for calm cohesion, triadic for vibrant variety.
- 3.Copy the output as CSS variables, a Tailwind config, or a plain hex list.
Color harmony types explained
Complementary
Two colors opposite each other on the wheel. High contrast, attention-grabbing — good for CTAs.
Analogous
Three neighboring hues. Natural, cohesive, easy on the eye — common in nature-inspired brands.
Triadic
Three evenly spaced hues. Vibrant and balanced — works well when you need variety without clashing.
Split-complementary
Your base plus two hues adjacent to its complement. More nuanced than complementary, less tension.
Tetradic
Four hues forming a rectangle. Rich palettes — best kept in check by letting one color dominate.
Monochromatic
Tints and shades of a single hue. Clean, professional, and easy to keep consistent.
Frequently asked questions
Need a logo to go with your palette?
Generate a logo that uses your brand colors — no design skills needed.
Generate a logo