Analogous Colors Guide
Everything you need to know about analogous colors — what makes them work, how to build calm palettes with them, and how to add contrast when needed.
What Are Analogous Colors?
Analogous colors are groups of colors that sit next to each other on the color wheel — typically within ±30° to ±60° of each other. Because they share a dominant hue, they feel inherently harmonious and calm.
Classic analogous palettes:
- Blues: Cyan → blue → indigo → purple
- Greens: Yellow-green → green → teal → cyan
- Warms: Red → orange → yellow
How to Find Analogous Colors
Take a base color's hue and rotate it by small increments — typically ±30° or ±45°:
Base hue = 215° (blue)
Analogous at ±30°:
185° (cyan)
215° (base, blue)
245° (indigo)
Wider analogous at ±60°:
155° (teal)
215° (base, blue)
275° (purple)Keep saturation and lightness roughly equal to make the palette feel cohesive. If you change lightness dramatically between hues, the palette starts to feel less analogous.
Why Analogous Colors Work
Analogous colors feel calm because they share a dominant wavelength. The eye does not need to adjust between unrelated hues, so the palette feels unified even before any design intent is applied.
This makes them ideal for:
- Wellness and spa brands — blues and greens signal calm, health, nature
- Nature-inspired designs — analogies to forests, oceans and skies
- Editorial layouts — soft gradients and calm color shifts
- Backgrounds and surfaces — subtle color variation without visual noise
- Data visualization — multiple series that feel related
- Gradients — analogous hues produce the smoothest gradients
The Problem with Analogous Colors
Analogous palettes have one significant weakness: lack of contrast. Because all colors are close in hue, they can be hard to distinguish, especially for users with low vision or color vision deficiency.
Without enough contrast, an analogous palette feels flat. It reads as one big color rather than a palette with hierarchy.
How to Use Analogous Colors Well
Add a contrasting accent
The most common fix: keep the analogous palette for backgrounds and surfaces, and add one complementary accent color for CTAs and highlights. The analogy stays calm; the accent provides direction.
Vary lightness significantly
Analogous palettes stay readable when lightness varies from very dark (for text) to very light (for backgrounds). Even within a narrow hue range, a dark navy reads differently from a light sky blue.
Adjust saturation
Higher saturation draws the eye. Use one saturated color as the focus, with more muted analogous colors supporting it.
Use white space
Analogous palettes benefit from generous whitespace because the eye has more room to distinguish similar colors.
Real Analogous Palettes
Ocean palette
Hues: 190° → 210° → 230°
Hues: #5EEAD4 (teal), #38BDF8 (sky), #6366F1 (indigo)
Feels fresh and calm. Common in wellness brands, spa apps, and any design that wants to feel "breezy."
Forest palette
Hues: 90° → 130° → 160°
Hues: #84CC16 (lime), #22C55E (green), #10B981 (emerald)
Natural and grounding. Used in sustainability brands, outdoor lifestyle, and organic products.
Sunset palette
Hues: 350° → 10° → 30°
Hues: #EC4899 (pink), #F43F5E (rose), #F97316 (orange)
Energetic but cohesive. Popular in fitness apps, event branding, and social media content.
Analogous vs Monochromatic
Both are calm, but they are different:
- Analogous: Uses several nearby hues (blue, cyan, teal) — feels more colorful
- Monochromatic: Uses one hue with lightness variation (light blue, medium blue, dark blue) — feels more minimal
If you want minimalism with color, use monochromatic. If you want variety without chaos, use analogous.
Common Mistakes
No accent color
Analogous palettes without an accent feel flat. Always add at least one contrasting color for CTAs and key moments.
Keeping saturation constant
Even analogous palettes benefit from varying saturation. Allowing one color to be more vivid than the others creates focus.
Overusing the palette
An analogous palette works best with a lot of neutral space. Trying to cover every pixel with a different analogous color creates visual noise.
Assuming analogous means "safe"
Analogous palettes still need contrast for accessibility. Test text colors against backgrounds the same way you would with any other palette.