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.

What is the Random Color Palette Generator?

Free random colour palette generator. Create harmonious 5-colour palettes — analogous, monochrome, triadic, complementary or fully random — with one click, then copy the hex codes or CSS variables. Privacy-first, runs entirely in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

Random Color Palette Generator

Name: Random Color Palette Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

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.

Choosing the right colour scheme

Each scheme serves different design purposes, and the choice shapes how the palette feels:

Analogous — colours that sit next to each other on the wheel (base ±30° and ±60°) feel harmonious and natural. Use for backgrounds, gradients, and calm interfaces where you want colour variation without visual tension.
Monochrome — one hue at five lightness levels. Excellent for typography hierarchies, card systems, and interfaces that need to feel clean and restrained. Easy to apply consistently.
Triadic — three hues 120° apart give balanced, vibrant contrast. Strong for illustration, data visualisation, and branding that needs to pop.
Complementary — hues 180° apart create maximum contrast. Use the lighter or more desaturated variants for backgrounds and the saturated pair for key actions and highlights.
Random — five independent hues. Unpredictable and often generative. Good for creative exploration, illustration, and projects where you want to be surprised.

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.

Using the CSS custom properties block

The tool generates a ready-to-paste block that defines your palette as CSS custom properties:

:root {
  --color-1: #2D7DD2;
  --color-2: #D22D8A;
  --color-3: #7DD22D;
  --color-4: #6FA8DC;
  --color-5: #DC6FB0;
}

You can reference these with var(--color-1) anywhere in your stylesheet. Because they are defined in :root, they are globally available and easy to override for dark mode or theme variants with a media query or a class on the root element.

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. To keep a palette you like, copy its hex codes before generating again — there is no fixed seed, so each press of Generate starts fresh.