Analogous Color

Analogous Color Generator creates a palette of colours that sit side by side on the colour wheel, sharing the same saturation and lightness as your chosen base colour. Choose a base colour, set the spread angle and the number of swatches, then copy the ready-to-use CSS custom properties — everything runs entirely in your browser.

What are analogous colours?

Analogous colours are groups of hues that are adjacent on the colour wheel, typically within a 30° to 60° arc of each other. Because they share a family relationship, they naturally harmonise without creating the tension of complementary colour pairs. This makes analogous palettes a popular choice for backgrounds, gradients, hero sections and any UI that needs a calm, cohesive feel.

The term comes from the Greek analogos, meaning "proportionate" — the colours are proportionately spaced around the wheel.

How the generator works

1. Parse the base colour — you can enter a #hex code, an rgb(r, g, b) value or use the colour picker. The input is converted to HSL internally.
2. Distribute hue angles — the generator places the base hue at the centre and spaces the remaining colours evenly at ±(spread / half-count)° intervals. For example with 5 colours and 30° spread, the hues are spaced 15° apart: −30°, −15°, 0° (base), +15°, +30°.
3. Preserve S and L — saturation and lightness stay identical for all swatches, so the palette reads as a true family. Changing the spread or count never oversaturates or darkens the colours.
4. Output CSS variables — each colour is named --color-base, --color-a1, --color-a2 for colours on the positive side and --color-b1, --color-b2 for the negative side.

Spread and count controls

Spread (5°–60°) sets the total arc of the palette. A 30° spread is the classic analogous range. Below 15° the colours look almost identical; above 45° they start to feel less related. 60° is the commonly accepted maximum for an analogous scheme.

Number of colours (3–9, odd numbers only) keeps the base colour centred in the palette. Use 3 for a minimal accent pair; use 5 or 7 for a richer gradient-friendly range.

Clicking a swatch copies the hex code

Click any swatch to copy its hex value to the clipboard. This makes it quick to drop individual colours directly into a CSS file or design tool without copying the entire CSS block.

Use cases

• UI themes — use 5 analogous hues as primary, secondary, tertiary and surface colours that read as one family
• Hero gradients — a 3-colour analogous spread creates smooth, natural-looking linear gradients
• Data visualisation — analogous palettes work well for adjacent chart segments where you want contrast without aggressive colour jumps
• Brand extensions — derive supporting accent colours from a fixed brand hex while maintaining visual harmony