Colour Palette Generator
Free colour palette generator: create harmonious palettes (analogous, complementary, triadic and more), lock the colours you like and export HEX or CSS.
Also: Palette from Image and Colour Picker · Colour Contrast Checker
What it does
This generator creates colour palettes for websites, apps, presentations and designs. Choose a harmony to build colours that go together from a base colour, or press the space bar for random palettes, and lock the colours you like so that only the others change. Colours are calculated in the OKLCH colour space, which keeps the perceived lightness even when the hue changes, so the palettes look balanced. Copy the colours as HEX, CSS variables or JSON, or share the palette with a link.
How to use it
- Choose a harmony and a base colour, or keep Random.
- Press the space bar or Generate until you like the palette; lock the colours you want to keep.
- Click a colour code to copy it, or copy the whole palette as HEX, CSS or JSON.
Frequently asked questions
What do the harmonies mean?
They are classic combinations from the colour wheel. Analogous uses neighbouring hues for a calm look; complementary uses opposite hues for strong contrast; triadic and tetradic spread three or four hues evenly; split complementary softens the complementary pair; monochromatic uses one hue in several shades.
Why OKLCH and not HSL?
In HSL, a yellow and a blue with the same lightness value look very different in brightness. OKLCH is designed around human perception, so turning the hue keeps the colours equally light. It is the colour space added to CSS for this reason.
Can I check if the colours are readable?
Yes: use the contrast checker to see whether text in one colour on a background of another meets the WCAG accessibility levels.