Palette

Coastal Foam Shimmer

Light and airy shades of seafoam and pale sky, like gentle waves meeting a quiet shore at dawn.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Foam Shimmer 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 Foam Shimmer.

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

Data visualization

#88D9E6#A7E4F2#C6EFFD#E0FFFF#FAFAD2

Palette guide

How to use Coastal Foam Shimmer

Overview

The Coastal Foam Shimmer palette offers light and airy shades of seafoam and pale sky, like gentle waves meeting a quiet shore at dawn. This refreshing collection features the vibrant #88D9E6, the lighter #A7E4F2 and #C6EFFD, the ethereal #E0FFFF, and a touch of warm cream with #FAFAD2. Designers can leverage these shades to evoke a sense of freshness, tranquility, and delicate lightness. It’s an ideal choice for projects seeking a clean, serene, and subtly playful aesthetic, from wellness brands to children's products, providing a refreshing and inviting visual experience.

Best used for

Children's product design
Spa and wellness branding
Beach-themed event invitations
Summer fashion collections
Aquatic lifestyle blogs
Clean tech interfaces

Suggested color roles

primary

#A7E4F2 - A light, refreshing aqua, excellent for main content areas or primary UI elements, providing a clean feel.

secondary

#C6EFFD - An even lighter, airy blue, perfect for supporting sections, subtle headers, or background accents.

accent

#88D9E6 - The most vibrant aqua, used sparingly for impactful calls-to-action, icons, or refreshing highlights.

background

#E0FFFF - A very light, ethereal white-blue, providing an expansive and clean canvas for design elements.

text

Use a dark charcoal or black for body text, or #88D9E6 for legible headings on lighter backgrounds, ensuring sufficient contrast.

Accessibility notes

Ensure robust contrast for text, as many colors are light; pair with dark text (e.g., black).
#E0FFFF and #FAFAD2 should only be used as backgrounds with very dark text (e.g., #88D9E6 or black).
Avoid placing light text on any of these colors, as contrast will likely be insufficient.
Verify contrast ratios for all interactive elements, especially against adjacent light colors.

Recommended combinations

Airy Horizon

Creates a very light, ethereal foundation, perfect for clean, minimalist interfaces.

#E0FFFF · #C6EFFD · #A7E4F2

Seafoam Depth

Provides refreshing depth, ideal for headers, footers, or distinct content sections.

#A7E4F2 · #88D9E6 · #C6EFFD

Shimmering Contrast

Offers clear text legibility on a light background, with a vibrant aqua accent and a warm undertone.

#E0FFFF · #88D9E6 · #FAFAD2

CSS variables

:root {
  --coastal-foam-shimmer-1: #88D9E6;
  --coastal-foam-shimmer-2: #A7E4F2;
  --coastal-foam-shimmer-3: #C6EFFD;
  --coastal-foam-shimmer-4: #E0FFFF;
  --coastal-foam-shimmer-5: #FAFAD2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-foam-shimmer": {
        1: "#88D9E6",
        2: "#A7E4F2",
        3: "#C6EFFD",
        4: "#E0FFFF",
        5: "#FAFAD2",
      }
    }
  }
}

Hex values

Color 1#88D9E6

Color 2#A7E4F2

Color 3#C6EFFD

Color 4#E0FFFF

Color 5#FAFAD2

Accessibility

Contrast checker

1.1:1Fail

1.3:1Fail

1.5:1Fail

1.1:1Fail

1.3:1Fail

1.1:1Fail

1.2:1Fail

1.1:1Fail

1.5:1Fail

1.3:1Fail

1.2:1Fail

1:1Fail

1.5:1Fail

1.3:1Fail

1.1:1Fail

1:1Fail

Similar palettes

More like Coastal Foam Shimmer

Coastal Foam Shimmer

See it in context.

Ready when you are.

Built with Coastal Foam Shimmer.

How to use Coastal Foam Shimmer

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Airy Horizon

Seafoam Depth

Shimmering Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coastal Foam Shimmer