Colors Monochromatic and Analogous Schemes
Monochromatic schemes build a palette from a single hue by varying only lightness and saturation, while analogous schemes combine hues that sit close together on the color wheel for a related, low-tension look.
What Makes a Scheme Monochromatic
A monochromatic scheme is built from exactly one hue on the color wheel. Instead of introducing new hues, you vary the other two dimensions of color -- saturation (how vivid or muted a color is) and lightness (how close it sits to black or white) -- to create tints, shades, and tones. Because every color shares the same underlying hue, the palette reads as calm, cohesive, and unmistakably unified, which is why it shows up so often in minimalist branding and dashboard UI where visual noise needs to stay low.
Example
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--hue: 210;
--color-base: hsl(210, 60%, 50%);
--color-light: hsl(210, 60%, 75%);
--color-pale: hsl(210, 40%, 90%);
--color-dark: hsl(210, 60%, 25%);
--color-muted: hsl(210, 20%, 50%);
}
.swatch-base { background-color: var(--color-base); }
.swatch-light { background-color: var(--color-light); }
.swatch-pale { background-color: var(--color-pale); }
.swatch-dark { background-color: var(--color-dark); }
.swatch-muted { background-color: var(--color-muted); }
</style>
</head>
<body>
<div class="swatch-base">Base</div>
<div class="swatch-light">Light</div>
<div class="swatch-pale">Pale</div>
<div class="swatch-dark">Dark</div>
<div class="swatch-muted">Muted</div>
</body>
</html>Building an Analogous Scheme
Analogous schemes step outside a single hue but stay close by: they combine two or three hues that sit next to each other on the wheel, typically within about 30 degrees in either direction of a base hue. Because neighboring hues share undertones -- think blue sliding into blue-green sliding into green -- the result feels natural and harmonious, the way you see it in a sunset (reds moving into oranges into yellows) or a forest canopy (yellow-greens into greens into blue-greens).
- Pick a base hue and decide which of the three colors will dominate the design.
- Add roughly 30 degrees to the base hue for one neighbor.
- Subtract roughly 30 degrees from the base hue for the other neighbor.
- Keep saturation and lightness fairly consistent across all three so the hue relationship stays the star of the palette.
- Use the two flanking hues sparingly -- as accents or secondary elements -- so the scheme doesn't flatten into a single blur of color.
Example
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--hue-base: 200;
--color-analogous-cool: hsl(170, 65%, 45%);
--color-base: hsl(200, 65%, 50%);
--color-analogous-warm: hsl(230, 65%, 50%);
}
.swatch-cool { background-color: var(--color-analogous-cool); }
.swatch-base { background-color: var(--color-base); }
.swatch-warm { background-color: var(--color-analogous-warm); }
</style>
</head>
<body>
<div class="swatch-cool">Cool</div>
<div class="swatch-base">Base</div>
<div class="swatch-warm">Warm</div>
</body>
</html>- Choose monochromatic when you want maximum cohesion and minimal distraction -- data-heavy dashboards, technical documentation, or a single strong brand color.
- Choose analogous when you want warmth and variety but still need everything to feel like it belongs together -- editorial layouts, illustrations, marketing pages.
- Both schemes are naturally low in contrast, so plan a separate accent color for anything that truly needs to stand out, like errors or primary actions.
