Back to palettes

Palette

Coastal Seafoam Dream

Inspired by the gentle meeting of ocean waves and sandy shores, with a touch of seafoam.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ADD8E6#87CEEB#F5DEB3#B0C4DE#F8F8FF

Palette guide

How to use Coastal Seafoam Dream

Overview

The Coastal Seafoam Dream palette is a gentle and refreshing collection, blending soft blues with a hint of warm beige, evoking the serene meeting of ocean and shore. Light blues like #ADD8E6 and #87CEEB create an expansive, airy feel, reminiscent of clear skies and calm waters. The grounding #F5DEB3 introduces a comforting sandy warmth, while #B0C4DE adds a slightly deeper, sophisticated blue. The crisp #F8F8FF acts as a clean, bright canvas. This palette is ideal for designers seeking to create inviting, calm, and naturally beautiful aesthetics, perfect for conveying tranquility and freshness.

Best used for

  • Baby and children's product design
  • Relaxing spa environments
  • Coastal-themed events and decor
  • Minimalist web design
  • Summer fashion collections
  • Home goods and textiles

Suggested color roles

primary

Use #ADD8E6 as a foundational blue for large areas, providing a soft, consistent base.

secondary

Employ #B0C4DE for secondary elements, navigation, or subtle blocks, adding depth without heaviness.

accent

Introduce #F5DEB3 as a warm accent for highlights, buttons, or decorative touches to add natural warmth.

background

Opt for #F8F8FF for pristine, airy backgrounds, or #ADD8E6 for a soft blue canvas.

text

For optimal readability, use a dark gray or charcoal text. For lighter text, ensure sufficient contrast on deeper palette colors like #B0C4DE.

Accessibility notes

  • Most colors are light; ensure text has sufficient contrast, especially on #F8F8FF and #F5DEB3.
  • Pair #B0C4DE with dark text for good readability.
  • Avoid using #ADD8E6 or #87CEEB as text on very light backgrounds like #F8F8FF.
  • A dark charcoal or black text is recommended for body copy to meet accessibility standards.

Recommended combinations

Sky & Sand

Combine a calming blue with warm beige and a deeper blue for a balanced, serene look in web interfaces.

#ADD8E6 · #F5DEB3 · #B0C4DE

Seafoam Breeze

Ideal for clean, minimalist designs with a bright background, a fresh accent, and a grounding secondary color.

#F8F8FF · #87CEEB · #B0C4DE

Gentle Horizon

Use for subtle gradients or layered elements, with a deeper blue base, soft blue mid-tone, and a warm highlight.

#B0C4DE · #ADD8E6 · #F5DEB3

CSS variables

:root {
  --coastal-seafoam-dream-1: #ADD8E6;
  --coastal-seafoam-dream-2: #87CEEB;
  --coastal-seafoam-dream-3: #F5DEB3;
  --coastal-seafoam-dream-4: #B0C4DE;
  --coastal-seafoam-dream-5: #F8F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-seafoam-dream": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#F5DEB3",
        4: "#B0C4DE",
        5: "#F8F8FF",
      }
    }
  }
}

Related searches

light coastal blue paletteseafoam and sand colorscalm serene color schemeairy pastel bluesbeach inspired design palette

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#87CEEB
·
Color 3#F5DEB3
·
Color 4#B0C4DE
·
Color 5#F8F8FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.2:1Fail
1.2:1Fail
1.4:1Fail
2
1.1:1Fail
1.3:1Fail
1:1Fail
1.6:1Fail
3
1.2:1Fail
1.3:1Fail
1.4:1Fail
1.2:1Fail
4
1.2:1Fail
1:1Fail
1.4:1Fail
1.7:1Fail
5
1.4:1Fail
1.6:1Fail
1.2:1Fail
1.7:1Fail

Similar palettes

More like Coastal Seafoam Dream

View all cool
Alpine Lake Serene
Coastal Breeze
Coastal Breeze Serene
Coastal Village Breeze
Glacial Lagoon Calm
Mint Glacial Stream