Colour palette generator
Random, harmonious five-colour palettes built in OKLCH. Lock the colours you like, regenerate the rest, check contrast and export straight to CSS or Tailwind.
Lightest on darkest
Contrast 1.00:1 · fails WCAG
:root {
--color-1: #cccccc;
--color-2: #cccccc;
--color-3: #cccccc;
--color-4: #cccccc;
--color-5: #cccccc;
}Colour harmony, on the wheel
Harmony rules are geometry: pick a base hue, then choose others at fixed angles around the colour wheel. This wheel is drawn in OKLCH, a colour space where equal steps look equally different to the eye, so a 120° triad looks evenly spaced, unlike the classic HSL wheel where yellows and greens bunch together. Drag the base hue and switch rules.
Three hues evenly spaced. Vibrant and balanced; let one dominate.
Using a five-colour palette
A practical UI palette needs roles more than hues: a near-white background, a slightly darker surface, a text colour dark enough for 4.5:1 contrast (WCAG 2.2 AA), one primary for actions, and an accent used rarely. The 60-30-10 rule from interior design works on screens too: about 60% neutral, 30% secondary, 10% accent.
Want colours without a harmony rule? The random colour generator gives single random colours with constraints on lightness and saturation.
Questions people ask
How does the palette generator choose colours?
It picks a random base hue, then places the other colours by a harmony rule (analogous, complementary, triadic and so on) in the OKLCH colour space. Lightness and chroma are varied so the palette has a light, a dark and mid tones, not five colours of the same weight.
Can I keep a colour I like?
Yes. Lock any swatch and press Generate (or the space bar); locked colours stay while the rest change. Click a hex code to edit it directly.
How do I use the palette in CSS or Tailwind?
Open Export and copy CSS custom properties, a Tailwind theme block, a JSON array or plain hex codes. Saved palettes stay in this browser so you can come back to them.
What does the AI option do?
Type a mood or brand, such as “calm fintech dashboard” or “1970s surf shop”, and an AI model suggests a five-colour palette with a role for each colour (background, surface, text, primary, accent). Only your short description is sent. Contrast is checked in the page, and you can lock and adjust the result.