Palette

Seaside Grass Whisper

The serene blend of colors where wind-swept dune grasses meet a tranquil summer sky.

neutralnatural5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seaside Grass Whisper 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 Seaside Grass Whisper.

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

Data visualization

#6B8E23#F0E68C#DEB887#87CEEB#F8F8FF

Palette guide

How to use Seaside Grass Whisper

Overview

The Seaside Grass Whisper palette beautifully blends the serene colors of wind-swept dune grasses meeting a tranquil summer sky. It features an earthy green #6B8E23, sunny yellow #F0E68C, warm sand #DEB887, serene sky blue #87CEEB, and a soft off-white #F8F8FF. This natural and calming collection offers designers and developers a versatile range to create inviting and organic digital experiences. It's perfectly suited for projects aiming to evoke nature, warmth, and a gentle, outdoor feel, from environmental branding to cozy lifestyle applications.

Best used for

Nature-focused brand identities
Outdoor adventure website design
Children's book illustrations
Sustainable product packaging
Garden and landscaping services
Eco-tourism marketing materials

Suggested color roles

primary

Use #6B8E23 as a grounding primary color for strong headings, main navigation, or calls to action, representing nature and stability.

secondary

Apply #87CEEB for supportive elements like secondary buttons or background sections, introducing an airy, sky-like contrast.

accent

Highlight interactive elements or key details with #DEB887, providing a warm, inviting accent reminiscent of sand.

background

Employ #F8F8FF as the clean, soft off-white background color, creating an open and natural base for the other tones.

text

For excellent readability on lighter backgrounds, use #6B8E23 for body text. A dark charcoal or deep brown can also be effectively used for text.

Accessibility notes

Text in #6B8E23 on #F8F8FF will provide strong contrast for readability.
Be cautious using #F0E68C or #DEB887 for small text; they are best as accents or large elements due to lower contrast.
Ensure interactive elements have clear visual cues, especially when using lighter colors.
A dark neutral color like charcoal may be necessary for body text on #F0E68C for WCAG compliance.

Recommended combinations

Dune & Sky

Creates a natural, open, and refreshing feel, ideal for outdoor or environmental themes.

#6B8E23 · #87CEEB · #F8F8FF

Sunny Shore

Perfect for a warm, inviting aesthetic, suitable for cozy blogs or artisanal products.

#F0E68C · #DEB887 · #F8F8FF

Coastal Meadow

Offers a balanced, earthy, and serene look, excellent for lifestyle or nature-inspired branding.

#6B8E23 · #DEB887 · #87CEEB

CSS variables

:root {
  --seaside-grass-whisper-1: #6B8E23;
  --seaside-grass-whisper-2: #F0E68C;
  --seaside-grass-whisper-3: #DEB887;
  --seaside-grass-whisper-4: #87CEEB;
  --seaside-grass-whisper-5: #F8F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaside-grass-whisper": {
        1: "#6B8E23",
        2: "#F0E68C",
        3: "#DEB887",
        4: "#87CEEB",
        5: "#F8F8FF",
      }
    }
  }
}

Hex values

Color 1#6B8E23

Color 2#F0E68C

Color 3#DEB887

Color 4#87CEEB

Color 5#F8F8FF

Accessibility

Contrast checker

3:1Fail

2:1Fail

2.2:1Fail

3.6:1AA18

3:1Fail

1.5:1Fail

1.4:1Fail

1.2:1Fail

2:1Fail

1.5:1Fail

1.1:1Fail

1.8:1Fail

2.2:1Fail

1.4:1Fail

1.1:1Fail

1.6:1Fail

3.6:1AA18

1.2:1Fail

1.8:1Fail

1.6:1Fail

Similar palettes

More like Seaside Grass Whisper

View all neutral

Coastal Cliff Path

Coastal Pottery Sand

Limestone Cliff Coast

Coastal Driftwood Relic

Coastal Dune Grass

Coastal Lighthouse Beam