Back to palettes

Palette

Coastal Cliff Path

Rugged and serene, depicting the worn stones and distant sea of a peaceful cliffside trail.

neutralnatural5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Cliff Path reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Coastal Cliff Path.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#708090#696969#A0522D#D2B48C#B0C4DE

Palette guide

How to use Coastal Cliff Path

Overview

The "Coastal Cliff Path" palette masterfully blends rugged neutrals with earthy warmth, capturing the essence of worn stones, distant seas, and sun-dappled paths. Featuring a cool slate gray (#708090), a versatile dark gray (#696969), and a rich sienna brown (#A0522D), it offers a robust foundation. Lighter tones like the soft beige of #D2B48C and the serene light blue of #B0C4DE introduce an airy, expansive feel. This palette is ideal for designers aiming to evoke a sense of calm, natural resilience, and understated elegance, reflecting the peaceful yet enduring beauty of a cliffside trail.

Best used for

  • Outdoor adventure brand websites
  • Architectural and interior design portfolios
  • Nature photography showcases
  • Rustic-modern home furnishings
  • Travel and tourism brochures
  • Environmental non-profit branding

Suggested color roles

primary

Designate #708090 as the main color for large sections, headers, or backgrounds, offering a stable and calming presence.

secondary

Use #696969 for supporting text, navigation, or subtle UI elements, providing strong readability and a modern edge.

accent

Apply #A0522D to draw attention to call-to-actions, important icons, or key data points, adding a vibrant, earthy pop.

background

Employ #D2B48C for light, warm backgrounds, creating a welcoming and soft canvas for content.

text

Use a dark, rich shade like #696969 for body text to ensure excellent readability across various light backgrounds.

Accessibility notes

  • Ensure #696969 text on #D2B48C or #B0C4DE backgrounds meets WCAG AA contrast standards.
  • The accent color #A0522D will need sufficient contrast if used for text; pair it with very light backgrounds.
  • Avoid using #D2B48C or #B0C4DE for text directly, as they are too light for most backgrounds.
  • For any text on #708090, use a very light color like white or a light beige (#D2B48C for larger text).

Recommended combinations

Rocky Trail

Perfect for a grounded, natural feel in headers or information blocks, with light text on darker elements.

#708090 · #696969 · #D2B48C

Cliffside View

Ideal for creating contrast, with a vibrant accent against cool blue and stable gray, evoking sky, earth, and stone.

#B0C4DE · #A0522D · #708090

Earth & Stone

Best for highlighting natural materials and warmth, using the beige as a soft backdrop for rich browns and dark grays.

#A0522D · #696969 · #D2B48C

CSS variables

:root {
  --coastal-cliff-path-1: #708090;
  --coastal-cliff-path-2: #696969;
  --coastal-cliff-path-3: #A0522D;
  --coastal-cliff-path-4: #D2B48C;
  --coastal-cliff-path-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-cliff-path": {
        1: "#708090",
        2: "#696969",
        3: "#A0522D",
        4: "#D2B48C",
        5: "#B0C4DE",
      }
    }
  }
}

Related searches

coastal gray brown palettenatural cliff colorsearthy blue gray schemerugged neutral designoutdoor pathway color ideas

Palette colors

Hex values

Color 1#708090
·
Color 2#696969
·
Color 3#A0522D
·
Color 4#D2B48C
·
Color 5#B0C4DE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.4:1Fail
2.1:1Fail
2.3:1Fail
2
1.4:1Fail
1:1Fail
2.8:1Fail
3.1:1AA18
3
1.4:1Fail
1:1Fail
2.8:1Fail
3.2:1AA18
4
2.1:1Fail
2.8:1Fail
2.8:1Fail
1.1:1Fail
5
2.3:1Fail
3.1:1AA18
3.2:1AA18
1.1:1Fail

Similar palettes

More like Coastal Cliff Path

View all neutral
Coastal Pottery Sand
Seaside Grass Whisper
Bohemian Dream Weaver
Boho Earth Weave
Boho Macrame Weave
Coastal Driftwood Relic