Colour Palette Generator
Builds a five-colour palette from one base colour using the classic harmony schemes.
Results
What this tool does
Colour harmony is geometry on the colour wheel: pick a hue, and the schemes tell you where the others go — next door, straight across, or at the corners of a triangle. Working in HSL is what makes that possible, because only there is hue a single number you can turn while leaving the saturation and lightness untouched, which is exactly what keeps a palette looking like it belongs together.
Formula
rotates the hue of the base colour by the angles of the chosen scheme
Variables
| Symbol | Meaning | Unit |
|---|---|---|
color | Base colour | — |
scheme | Harmony scheme | — |
OUT | Palette | — |
C1 | First colour | — |
C2 | Second colour | — |
C3 | Third colour | — |
C4 | Fourth colour | — |
C5 | Fifth colour | — |
Worked example
- Base colour#d1490b
- Harmony schemeanalogous
- Palette#d1490b #d1ac0b #d10b30 #93d10b #d10b93
- First colour#d1490b
- Second colour#d1ac0b
- Third colour#d10b30
- Fourth colour#93d10b
- Fifth colour#d10b93
Limitations
- The calculation runs entirely in your browser. The values you type are never sent to a server.
- The default values are typical reference figures, not measurements of your situation. Replace them with your own data whenever you have it.
Frequently asked questions
Which scheme should I pick?
Analogous colours sit next to each other on the wheel and are the safest: calm, coherent, and almost impossible to get wrong. Complementary pairs sit opposite and give the strongest contrast, which is what you want for one accent and nothing else. Triadic and tetradic schemes are livelier and harder to balance — use one colour as the main and let the rest be small. Monochrome keeps one hue and varies only the lightness, which is how most interfaces are actually built.