Color Palette Generator
Runs on your device. Nothing is sent.Everything happens in your browser - nothing is uploaded.
Colours5
Tip: press Space to generate a new palette.Harmony
Export
:root {
--color-1: #264653;
--color-2: #2a9d8f;
--color-3: #e9c46a;
--color-4: #f4a261;
--color-5: #e76f51;
}Generate colour palettes from colour-wheel harmonies or at random, lock the colours you like, and copy them as CSS variables, Tailwind colours or JSON.
Press Generate (or Space) for a new palette. Lock the colours you want to keep and the rest are rebuilt around them using a colour-wheel harmony: analogous neighbours, a monochrome ramp, complementary or split-complementary opposites, triads and tetrads - or pure random with evenly spread hues. Click a swatch's hex to copy it, or the swatch to pick a colour yourself. Export the palette as CSS custom properties, a Tailwind colour scale or JSON, save it as a PNG, or copy a link that opens the same palette.
Frequently asked questions
What do the harmonies mean?
They're positions on the colour wheel. Analogous colours sit next to each other (calm), complementary ones opposite (high contrast), split complementary uses the two neighbours of the opposite, triadic three colours 120° apart and tetradic four 90° apart. Monochrome keeps one hue and varies lightness.
How do I build a palette around my brand colour?
Click the first swatch, choose your colour, lock it and press Generate. The free swatches are filled from the harmony you pick, starting from your locked colour.
Is the text on each swatch accessible?
The hex label switches between black and white, whichever has more contrast against that colour. For body text, check the exact pair in our colour tools' WCAG contrast checker.
Is anything saved?
Your current palette is remembered on this device. A shared link carries the colours in the address after the #, which isn't sent to our server.