Design & Colour
Analogous Colour Generator
Enter a hex colour to see ±30° hue neighbours as three hex values with swatches.
What are analogous colours?
Analogous colours sit next to each other on the colour wheel and feel related rather than clashing. Convert a base HEX value to HSL (hue, saturation, lightness), then shift hue by about −30° and +30° while keeping saturation and lightness. You get a calm trio for UI accents, charts or brand extensions without jumping to a full complementary clash. Always re-check contrast before putting small text on any of the neighbours. Explore opposites with complementary colour and tint ladders with colour shade.
Worked example
Base #E85D04 → neighbours at hue−30° and hue+30° with the same saturation and lightness, shown as three hex swatches.
Limits and assumptions
Fixed ±30° in HSL. Not a perceptual harmony model (OKLCH) and not a full brand system.
Frequently asked questions
What does analogous mean?
Analogous colours are neighbours on the wheel — close hues that share a family feel, unlike complements which sit opposite.
What is HSL?
HSL means hue (position on the wheel in degrees), saturation (how vivid) and lightness (how light or dark).
Can I change the 30° gap?
This page uses a classic ±30° pair; for custom angles adjust hue manually after copying the hexes.
HEX with or without #?
Either works; six hex digits are expected.