Get a matching five-colour palette from one base colour, with six colour harmonies. Copy HEX codes or CSS variables.
Colour harmony
Colours that sit next to each other.
Click a colour to copy its HEX code. Everything is worked out in your browser.
NinjaFunction's Color Palette Generator builds a five-colour palette from one base colour. Choose complementary, analogous, triadic, split complementary, tetradic or monochrome harmony, press Random colour for new ideas, click any colour to copy its HEX code, and copy the whole palette as a list or as CSS variables. It runs in your browser, so nothing is sent to a server.
| Harmony | How it is built | Feels |
|---|---|---|
| Complementary | Your colour and the one opposite it | Bold, high contrast |
| Analogous | Your colour and its two neighbours | Calm, natural |
| Triadic | Three colours spaced evenly | Lively, balanced |
| Split complementary | Your colour and the two beside its opposite | Contrast with less tension |
| Tetradic | Four colours in two opposite pairs | Rich, needs care |
| Monochrome | One colour in five lightness levels | Clean, elegant |
It turns your base colour into hue, saturation and lightness, then moves the hue around the colour wheel by set amounts to find colours that go together. Each harmony uses different amounts, and the palette is filled up to five colours.
The complementary colour sits exactly opposite your colour on the colour wheel, for example blue and orange, or red and cyan. The pair has strong contrast and stands out.
Analogous colours sit next to each other on the colour wheel, such as green, teal and blue. They feel calm and natural because they are so close.
Analogous and monochrome palettes are safe and calm, and are good for backgrounds and text. Complementary and triadic palettes are livelier and work well for buttons and highlights. Use one main colour, one supporting colour and one accent.
A common rule is 60 percent of one main colour, 30 percent of a second colour and 10 percent of an accent colour. Neutral colours such as white, grey and black come on top of that.
The tool picks colours that go together, but it does not check whether text on them is easy to read. Test your text and background pairs with the Color Contrast Checker.
No. The palette is worked out in your browser, and nothing you enter is sent or stored.
