Palette

Coastal Seagrass Whisper

A refreshing blend of sea greens and soft blues, like gentle seagrass swaying in coastal waters.

coolnatural5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Seagrass 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 Coastal Seagrass Whisper.

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

Data visualization

#6B8E23#8FBC8F#B0C4DE#D0F0C0#E0FFFF

Palette guide

How to use Coastal Seagrass Whisper

Overview

The Coastal Seagrass Whisper palette offers a refreshing and harmonious blend of natural greens and soft blues, evoking the tranquil scene of seagrass swaying in clear coastal waters. With vibrant hues like #6B8E23 and #8FBC8F, it brings an earthy, lively feel. The soothing #B0C4DE introduces a calming blue, while #D0F0C0 and #E0FFFF provide airy, almost ethereal lightness. This collection is ideal for designers seeking to create a fresh, organic, and serene aesthetic, perfect for projects that emphasize nature, tranquility, and a gentle, inviting atmosphere, reflecting the beauty of untouched aquatic landscapes.

Best used for

Organic food and beverage branding
Eco-conscious fashion and lifestyle brands
Botanical and garden design websites
Spa and wellness digital experiences
Children's nature books
Sustainable home goods

Suggested color roles

primary

Utilize #8FBC8F as a dominant, calming green for main sections or branding elements.

secondary

Employ #B0C4DE for secondary content blocks, navigation, or subtle graphical elements, adding a cool contrast.

accent

Introduce #6B8E23 as a vibrant, earthy accent for highlights, call-to-actions, or striking details.

background

Choose #E0FFFF or #D0F0C0 for light, airy backgrounds, providing a clean, fresh canvas.

text

Use #6B8E23 for body text and headings for excellent readability against lighter palette colors, or a dark charcoal.

Accessibility notes

The darker #6B8E23 provides excellent contrast for text on #D0F0C0, #E0FFFF, and #B0C4DE.
Ensure sufficient contrast when using #E0FFFF for text on any background, as it is very light.
Avoid using #D0F0C0 for text on #8FBC8F backgrounds; opt for a darker or lighter contrasting color.
Check contrast ratios for all text pairings, especially for large blocks of content to ensure readability.

Recommended combinations

Seagrass Bloom

Create a vibrant yet calm design with a strong green, a softer green, and a very light background.

#6B8E23 · #8FBC8F · #E0FFFF

Coastal Azure

Ideal for clean, refreshing interfaces with a soft blue, a light green background, and vibrant green text.

#B0C4DE · #D0F0C0 · #6B8E23

Water Meadow

Use for subtle visual layering, combining a calming green with a very light background and a soft blue accent.

#8FBC8F · #E0FFFF · #B0C4DE

CSS variables

:root {
  --coastal-seagrass-whisper-1: #6B8E23;
  --coastal-seagrass-whisper-2: #8FBC8F;
  --coastal-seagrass-whisper-3: #B0C4DE;
  --coastal-seagrass-whisper-4: #D0F0C0;
  --coastal-seagrass-whisper-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-seagrass-whisper": {
        1: "#6B8E23",
        2: "#8FBC8F",
        3: "#B0C4DE",
        4: "#D0F0C0",
        5: "#E0FFFF",
      }
    }
  }
}

Hex values

Color 1#6B8E23

Color 2#8FBC8F

Color 3#B0C4DE

Color 4#D0F0C0

Color 5#E0FFFF

Accessibility

Contrast checker

1.8:1Fail

2.1:1Fail

3.1:1AA18

3.6:1AA18

1.8:1Fail

1.2:1Fail

1.7:1Fail

2:1Fail

2.1:1Fail

1.2:1Fail

1.4:1Fail

1.7:1Fail

3.1:1AA18

1.7:1Fail

1.4:1Fail

1.2:1Fail

3.6:1AA18

2:1Fail

1.7:1Fail

1.2:1Fail

Similar palettes

More like Coastal Seagrass Whisper

Coastal Seagrass Whisper

See it in context.

Ready when you are.

Built with Coastal Seagrass Whisper.

How to use Coastal Seagrass Whisper

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Seagrass Bloom

Coastal Azure

Water Meadow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coastal Seagrass Whisper