How to Build a Color Palette from One Base Color
One good color can grow into a full palette with complements, neighbors, shades and tints. This guide explains each role and how to use it.
What is the Color Palette Generator?
A single brand color can grow into a whole palette with a little color math. Enter a base hex color and this tool works out its complement on the opposite side of the color wheel, two neighbors on either side, two darker shades and two lighter tints. Use the set for buttons, backgrounds, accents and text without guessing at matching colors.
How to use it
- Enter a base color as a hex value.
- Click Generate palette.
- Copy the eight colors and use them for backgrounds, buttons, accents and text.
Worked example
With the base color #6D28D9, the result is a palette of Base #6D28D9, Complementary #94d928, Analogous 1 #283cd9, Analogous 2 #c528d9, Shade 1 #46198c, Shade 2 #1f0b3e, Tint 1 #a276e7 and Tint 2 #d7c4f5.
How many colors should a palette have?
Eight colors is plenty for most sites: a base, a complement, two neighbors, two shades and two tints. Add neutrals for text and backgrounds rather than more bright colors.
Frequently asked questions
What is a complementary color?
It sits opposite your base color on the color wheel, so the pair creates strong contrast. Use it sparingly for accents and calls to action.
How are shades and tints different?
Shades darken the base color by lowering lightness, while tints lighten it by raising lightness. Both keep the same hue, so they always match.