How are the palettes generated?

Each palette starts from a random base hue (using your browser's secure random generator) and applies a colour-wheel harmony in HSL space — for example analogous rotates the hue by ±30°/±60°, triadic by 120°, and complementary by 180°.

Is anything sent to a server?

No. Palettes are generated entirely in your browser. Nothing about the colours is uploaded anywhere.

Are the colours genuinely random and correct?

Yes. The base hue uses the Web Crypto secure random generator when available, and the harmony offsets use deterministic HSL maths, so the hex values are accurate and the randomness is high quality.

What is the difference between analogous and triadic schemes?

Analogous colours sit next to each other on the colour wheel (hue ±30° and ±60° from the base) for a soft, cohesive look. Triadic colours are spaced 120° apart, giving a vibrant, balanced contrast. Complementary pairs sit 180° opposite for maximum contrast.

How do I use the palette in CSS?

Copy the CSS custom properties block the tool generates — it defines variables like --color-1 through --color-5 with the hex values — then paste it into your stylesheet and reference the variables with var(--color-1).

Can I get the same palette twice?

Each press of Generate picks a new random base hue, so palettes differ every time. There is no fixed seed, so to keep a palette you like, copy its hex codes before generating again.

Random Color Palette Generator

Generate harmonious 5-colour palettes in one click — ideal for web design, branding mockups, slide decks, or any project that needs a coordinated colour set without manual fiddling. Pick a scheme, keep pressing Generate until something inspires you, then copy the hex codes or a ready-made CSS variables block.

How it works

Every palette starts from a single random base hue (0–359°), drawn from the browser’s Web Crypto secure random generator when available. The selected scheme then derives the other colours by rotating that hue around the colour wheel in HSL space, with controlled saturation and lightness:

Analogous: base, +30°, +60°, −30°, −60°
Monochrome: one hue, five different lightness levels
Triadic: base, +120°, +240° (with lightness variants)
Complementary: base and base +180° (with lightness variants)
Random: five fully independent random hues

Each HSL colour is converted to its hex value with the standard HSL-to-RGB formula, so the codes are exact and immediately usable.

Example

Suppose the random base hue is 210° and you choose triadic. The hues become 210°, 330° and 90° (plus two lightness variants), producing a blue, a pink-magenta and a green — three evenly spaced, balanced colours. A resulting palette might read:

#2D7DD2 · #D22D8A · #7DD22D · #6FA8DC · #DC6FB0

Click any swatch to copy its hex, or grab the CSS custom properties block. Everything runs locally — nothing is uploaded.