Analogous colors

Analogous colors sit next to each other on the wheel — for example teal, blue, and indigo. They feel natural and cohesive, like landscapes.

Generate analogous palettes

Analogous harmony

Lock colors you like, then regenerate the rest.

Base

Pick

#3a6fed

hsl(222, 83%, 58%)

Pick

#403aed

hsl(242, 83%, 58%)

Pick

#7c3aed

hsl(262, 83%, 58%)

Pick

#b83aed

hsl(282, 83%, 58%)

Pick

#ed3ae7

hsl(302, 83%, 58%)

CSS variables

:root {
  --color-1: #3a6fed;
  --color-2: #403aed;
  --color-3: #7c3aed;
  --color-4: #b83aed;
  --color-5: #ed3ae7;
}

Tailwind snippet

// tailwind.config — theme.extend.colors
brand: {
        100: "#3a6fed",
        200: "#403aed",
        300: "#7c3aed",
        400: "#b83aed",
        500: "#ed3ae7",
}

Why analogous feels calm

Neighboring hues share undertones, so transitions look smooth. Nature scenes — forests, sunsets, oceans — are often analogous. Product UIs use them for soft dashboards and wellness brands.

How to keep them interesting

Vary lightness dramatically so surfaces separate
Pick one dominant hue; let neighbors stay supporting
Add a small complementary accent if you need a sharp CTA — see complementary colors

Try it free

Use ChromaNest's color palette generator with the Analogous tab, or pull neighboring tones from a photo via palette from image.