Back to palettes

Palette

Sunlit Coastal Cliff

Reflects the tranquil beauty of sunlit coastal cliffs, blending natural stone with hints of green.

neutralnatural5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunlit Coastal Cliff 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 Sunlit Coastal Cliff.

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

Data visualization

#9FA8A3#BFC9C2#DCE2E1#7E8C85#5D6C65

Palette guide

How to use Sunlit Coastal Cliff

Overview

The Sunlit Coastal Cliff palette reflects the tranquil beauty of sunlit coastal cliffs, blending natural stone with hints of verdant green. It features a muted grey-green (#9FA8A3), a softer, airy greige (#BFC9C2), and a very light, almost white neutral (#DCE2E1). Deeper, grounding tones of olive-grey (#7E8C85) and forest-grey (#5D6C65) provide essential depth and a connection to the natural foliage. This palette is ideal for designs that aim to convey calmness, natural elegance, and a minimalist aesthetic, perfect for eco-conscious or sophisticated themes.

Best used for

  • Eco-friendly and sustainable brands
  • Natural skincare and wellness products
  • Minimalist interior design and architecture
  • Nature photography and landscape art
  • Serene digital interfaces and apps
  • Outdoor lifestyle and adventure gear (subtle)

Suggested color roles

primary

Utilize #7E8C85 (Olive-Grey) for main headings, brand elements, or sections requiring a stable, grounding presence.

secondary

Apply #9FA8A3 (Grey-Green) for supporting content blocks, backgrounds, or graphic elements, offering a pleasant, natural mid-tone.

accent

Incorporate #BFC9C2 (Greige) for subtle highlights, delicate patterns, or to simulate soft, diffused light.

background

Employ #DCE2E1 (Light Neutral) as a clean, expansive background, providing a pristine canvas that enhances the natural hues.

text

Choose #5D6C65 (Forest-Grey) for all body text, ensuring excellent readability and a cohesive, understated feel against lighter backgrounds, or use a deep charcoal.

Accessibility notes

  • Ensure #5D6C65 provides excellent contrast for text on #DCE2E1, #BFC9C2, and #9FA8A3 backgrounds.
  • Avoid using #BFC9C2 for small body text; reserve it for larger headings or subtle graphic elements.
  • When pairing #7E8C85 with #9FA8A3, ensure sufficient contrast for text, especially in smaller sizes.
  • Always test contrast ratios for text and interactive elements to meet accessibility standards.

Recommended combinations

Cliff Face

Ideal for creating a gradual transition from light, sunlit stone to deeper, shadowed cliff textures.

#DCE2E1 · #BFC9C2 · #9FA8A3

Deep Foliage

Excellent for designs needing grounded depth and natural contrast, representing subtle greens and shadows.

#7E8C85 · #5D6C65 · #BFC9C2

Serene Coast

Use for layouts with a light, expansive base, strong dark text, and calming, natural mid-tones.

#DCE2E1 · #5D6C65 · #9FA8A3

CSS variables

:root {
  --sunlit-coastal-cliff-1: #9FA8A3;
  --sunlit-coastal-cliff-2: #BFC9C2;
  --sunlit-coastal-cliff-3: #DCE2E1;
  --sunlit-coastal-cliff-4: #7E8C85;
  --sunlit-coastal-cliff-5: #5D6C65;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunlit-coastal-cliff": {
        1: "#9FA8A3",
        2: "#BFC9C2",
        3: "#DCE2E1",
        4: "#7E8C85",
        5: "#5D6C65",
      }
    }
  }
}

Related searches

coastal cliff colorsgrey green palettenatural neutral tonescalm earthy greyminimalist nature palette

Palette colors

Hex values

Color 1#9FA8A3
·
Color 2#BFC9C2
·
Color 3#DCE2E1
·
Color 4#7E8C85
·
Color 5#5D6C65
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.9:1Fail
1.4:1Fail
2.3:1Fail
2
1.4:1Fail
1.3:1Fail
2.1:1Fail
3.3:1AA18
3
1.9:1Fail
1.3:1Fail
2.7:1Fail
4.2:1AA18
4
1.4:1Fail
2.1:1Fail
2.7:1Fail
1.6:1Fail
5
2.3:1Fail
3.3:1AA18
4.2:1AA18
1.6:1Fail

Similar palettes

More like Sunlit Coastal Cliff

View all neutral
Coastal Dune Grass
Coastal Cliff Path
Coastal Pottery Sand
Seaside Grass Whisper
Bohemian Dream Weaver
Coastal Driftwood Relic