Palette

Coastal Seafoam Whisper

Serene greens and blues capturing the gentle transition of seafoam against a tranquil shore.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A8DADC#66CCB9#47A890#2D7F6E#1F5C50

Palette guide

How to use Coastal Seafoam Whisper

Overview

The Coastal Seafoam Whisper palette offers a rich, harmonious gradient of serene greens and blues, capturing the gentle transition of seafoam against a tranquil shore. Starting with the soft aqua of #A8DADC, it deepens through #66CCB9 and #47A890, culminating in the profound depths of #2D7F6E and #1F5C50. This sophisticated collection allows designers to create a sense of calm, depth, and organic beauty. It's particularly effective for projects that require a natural, yet refined aesthetic, evoking the peaceful, untouched aspects of the ocean and its lush coastal ecosystems.

Best used for

Eco-conscious brand identity
Nature and wildlife conservation websites
High-end organic product packaging
Spa and wellness center interiors
Sustainable living blogs
Marine biology educational materials

Suggested color roles

primary

Utilize #47A890 as a strong, yet calming primary color for main sections or branding.

secondary

Employ #66CCB9 for secondary elements, navigation, or data visualization, offering a brighter contrast.

accent

Introduce #A8DADC as a light, refreshing accent for highlights, icons, or subtle decorative touches.

background

Choose #A8DADC for a light, airy background, or #66CCB9 for a more saturated yet calming base.

text

Use #1F5C50 or #2D7F6E for body text and headings for excellent readability against lighter palette colors.

Accessibility notes

The darker shades #2D7F6E and #1F5C50 provide excellent contrast for text on #A8DADC and #66CCB9.
Ensure sufficient contrast when using #A8DADC for text on any background, as it is very light.
Avoid using #66CCB9 for text on #47A890 backgrounds; opt for a darker or lighter contrasting color.
Check contrast ratios for all text pairings, especially when using mid-tones together.

Recommended combinations

Deep Seafoam

Create a sophisticated, deep-to-light gradient for headers, content, and bright accents in web design.

#1F5C50 · #47A890 · #A8DADC

Coastal Verdure

Ideal for nature-focused designs, blending a fresh green with a deep teal and a light aqua highlight.

#66CCB9 · #2D7F6E · #A8DADC

Tranquil Depths

Use for a balanced design, with a strong primary green, a light secondary, and a very dark, grounding text color.

#47A890 · #A8DADC · #1F5C50

CSS variables

:root {
  --coastal-seafoam-whisper-1: #A8DADC;
  --coastal-seafoam-whisper-2: #66CCB9;
  --coastal-seafoam-whisper-3: #47A890;
  --coastal-seafoam-whisper-4: #2D7F6E;
  --coastal-seafoam-whisper-5: #1F5C50;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-seafoam-whisper": {
        1: "#A8DADC",
        2: "#66CCB9",
        3: "#47A890",
        4: "#2D7F6E",
        5: "#1F5C50",
      }
    }
  }
}

Hex values

Color 1#A8DADC

Color 2#66CCB9

Color 3#47A890

Color 4#2D7F6E

Color 5#1F5C50

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

3.1:1AA18

5.1:1AA

1.3:1Fail

1.5:1Fail

2.5:1Fail

4:1AA18

1.9:1Fail

1.5:1Fail

1.7:1Fail

2.7:1Fail

3.1:1AA18

2.5:1Fail

1.7:1Fail

1.6:1Fail

5.1:1AA

4:1AA18

2.7:1Fail

1.6:1Fail

Similar palettes

More like Coastal Seafoam Whisper

View all cool

Seafoam Whisper Shores