Monochromatic colors

Monochromatic palettes keep a single hue and change lightness and saturation. They look polished, minimal, and easy to scale into full UI token sets.

Generate monochromatic palettes

Monochromatic harmony

Lock colors you like, then regenerate the rest.

Base

Pick

#3a0791

hsl(262, 91%, 30%)

Pick

#560fd1

hsl(262, 87%, 44%)

Pick

#7c3aed

hsl(262, 83%, 58%)

Pick

#a87ff0

hsl(262, 79%, 72%)

Pick

#d4c0f6

hsl(262, 75%, 86%)

CSS variables

:root {
  --color-1: #3a0791;
  --color-2: #560fd1;
  --color-3: #7c3aed;
  --color-4: #a87ff0;
  --color-5: #d4c0f6;
}

Tailwind snippet

// tailwind.config — theme.extend.colors
brand: {
        100: "#3a0791",
        200: "#560fd1",
        300: "#7c3aed",
        400: "#a87ff0",
        500: "#d4c0f6",
}

Strengths

One-hue systems rarely clash. They photograph well, suit documentation sites and SaaS dashboards, and map cleanly onto Tailwind-style 50–950 scales.

Avoid flatness

Stretch lightness from near-white tints to deep shades
Drop saturation for muted backgrounds; raise it for accents
Expand your base into a full Tailwind color palette

Related tools

Start with the palette generator (Monochromatic tab), check text contrast, then soft-blend surfaces with the CSS gradient generator.