Palette

Coastal Bluff Grass

Soft, serene shades reminiscent of wind-swept grasses and a quiet, misty ocean on a cool morning.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Bluff Grass 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 Bluff Grass.

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

Data visualization

#C2DEDC#98B4AA#7A9E88#4D695D#2B3D3B

Palette guide

How to use Coastal Bluff Grass

Overview

The Coastal Bluff Grass palette features soft, serene shades reminiscent of wind-swept grasses and a quiet, misty ocean on a cool morning. This earthy collection ranges from the light, airy #C2DEDC to the deep, grounding #2B3D3B, creating a sense of calm, nature, and understated elegance. Designers can leverage these hex codes for eco-friendly branding, tranquil digital experiences, or natural print materials. Developers will find these harmonious tones excellent for building user interfaces that feel organic, refreshing, and inviting, with #98B4AA providing a balanced mid-tone and #7A9E88 offering a subtle, natural green accent.

Best used for

eco-friendly brands
nature and outdoor activities
wellness and spa services
sustainable product packaging
travel destination websites (coastal)
environmental organizations

Suggested color roles

primary

#7A9E88 - A muted, earthy green, excellent for main headings, primary navigation, or prominent natural brand elements.

secondary

#98B4AA - A lighter, supportive green-grey, perfect for subheadings, background panels, or supportive graphics.

accent

#2B3D3B - The deepest, darkest teal-grey, ideal for strong accents, important links, or focal points that require high contrast and depth.

background

#C2DEDC - The lightest, airy blue-green, providing a clean, fresh, and expansive canvas.

text

#4D695D - This deep, muted green offers excellent readability for body text against the lighter backgrounds like #C2DEDC or #98B4AA.

Accessibility notes

Text in #4D695D or #2B3D3B on backgrounds like #C2DEDC or #98B4AA should meet WCAG AA contrast standards.
Avoid using lighter shades like #98B4AA for small text on the lightest background #C2DEDC due to potential low contrast.
Ensure interactive elements have clear visual feedback beyond just color, especially for mid-tone greens.
Always verify contrast ratios for all text and interactive elements, particularly for critical information.

Recommended combinations

Misty Meadow

For creating soft, layered backgrounds or inviting card designs, evoking natural landscapes.

#C2DEDC · #98B4AA · #7A9E88

Deep Forest

Ideal for professional layouts, using the deeper greens for headlines and lighter tones for content.

#4D695D · #2B3D3B · #C2DEDC

Natural Harmony

For content blocks or subtle dividers, maintaining a rich and harmonious visual flow with natural depth.

#7A9E88 · #98B4AA · #4D695D

CSS variables

:root {
  --coastal-bluff-grass-1: #C2DEDC;
  --coastal-bluff-grass-2: #98B4AA;
  --coastal-bluff-grass-3: #7A9E88;
  --coastal-bluff-grass-4: #4D695D;
  --coastal-bluff-grass-5: #2B3D3B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-bluff-grass": {
        1: "#C2DEDC",
        2: "#98B4AA",
        3: "#7A9E88",
        4: "#4D695D",
        5: "#2B3D3B",
      }
    }
  }
}

Hex values

Color 1#C2DEDC

Color 2#98B4AA

Color 3#7A9E88

Color 4#4D695D

Color 5#2B3D3B

Accessibility

Contrast checker

1.6:1Fail

2.1:1Fail

4.2:1AA18

8.1:1AAA

1.6:1Fail

1.3:1Fail

2.7:1Fail

5.2:1AA

2.1:1Fail

1.3:1Fail

2:1Fail

3.9:1AA18

4.2:1AA18

2.7:1Fail

2:1Fail

1.9:1Fail

8.1:1AAA

5.2:1AA

3.9:1AA18

1.9:1Fail

Similar palettes

More like Coastal Bluff Grass

Whispering Willow Path