How to Build a Colour Palette From a Single Colour
Most amateur-looking designs are not using bad colours. They are using too many unrelated ones. Picking one colour and deriving the rest from it is the quickest route to something that looks deliberate - and the Palette Generator does the deriving for you.
Why shades of one colour work
Every shade shares the same underlying hue, so nothing clashes. You get variety without disagreement, which is exactly what an interface needs: the eye can tell elements apart without any of them fighting.
This is also why a palette built from one colour scales. Add a new component next year and its colour is already decided.
Where the shades go
A five-step palette maps almost directly onto the things an interface needs. The darkest shade is for text on light backgrounds. The mid shade is your main colour - the one on primary buttons. A step lighter is the hover state. The two lightest shades are backgrounds: tinted panels, selected rows, subtle highlights that hint at the colour without shouting it.
Keep the vivid end for things people are meant to click. A page where everything is saturated has no emphasis left to give.
How to build one
Open the tool and choose your base colour - usually your brand colour, or one you already like. Five coordinated shades appear from light to dark, each ready to copy.
If you are starting without a base colour at all, the Random Colour Generator is a reasonable way to find one you would not have thought of.
Check it before you commit
A palette that looks good is not automatically a palette people can read. Put your text shade and your background shade through the Contrast Checker before building anything on top of them. A pale grey on white is a common and expensive mistake to discover late.
Add a neutral before you add a second colour
Almost every interface needs greys more than it needs a second hue - borders, dividers, secondary text, disabled states, backgrounds. A palette of five brand shades and nothing else forces you to use the brand colour for things that should recede.
The trick worth knowing is to tint the greys very slightly toward your brand hue rather than using pure neutral grey. A grey with a few percent of your blue in it sits more comfortably beside blue elements than a dead neutral does, and nobody consciously notices why the page looks coherent.
Keep it subtle. Past about ten percent saturation the grey stops reading as grey and starts competing with the colour it was meant to support.
Common questions
How many colours should a palette have?
One base family plus a neutral grey covers most interfaces. Add a second accent only when something genuinely needs to stand apart.
Should every shade be used?
No. Most interfaces lean on two or three of the five, with the others appearing rarely. Having them defined matters more than using them all.
What if my brand colour is very light or very dark?
Then the palette will be lopsided, with little room at one end. Generate from a mid-lightness version of the brand colour and treat the original as one of the steps.
Ready to build one?