Colour Palette Generator
Build a palette from one colour.
Base colour
HEX, RGB, HSL or a colour name, for example #3366cc or rgb(51 102 204)
Your text stays on your deviceHow?
How to build a colour palette
- Pick or type your base colour, as HEX, RGB, HSL or a colour name.
- See its complementary, analogous, triadic and tetradic colours, and five tints and five shades.
- Copy any colour, or export the palette as CSS variables, JSON or a PNG.
Questions
How are the harmonies worked out?
Each one turns the hue of your colour around the colour wheel and keeps its saturation and lightness. The complement is opposite (180°), analogous colours sit 30° either side, a triad is 120° apart and a tetrad 90° apart.
What are tints and shades?
A tint is your colour mixed with white, a shade your colour mixed with black. Each step mixes in one sixth more, so the last tint is still not white.
How do I use the CSS export?
Paste it into your style sheet. Each colour becomes a custom property, such as --triadic-2, which you use as var(--triadic-2).
Is anything I enter sent anywhere?
No. The palette is made inside your browser.