Back to palettes

Palette

Coastal Seafoam Spray

A serene collection echoing the soft spray of seafoam and the tranquil colors of the coastline.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#adcce3#e0f2f7#f0f8ff#d0e0e3#c3c3b0

Palette guide

How to use Coastal Seafoam Spray

Overview

The Coastal Seafoam Spray palette delivers a whisper-soft collection of cool, airy tones, mirroring the gentle mist of ocean waves. With a foundation of delicate blues like #adcce3, #e0f2f7, and the almost-white #f0f8ff, this palette exudes unparalleled lightness and freshness. The slightly muted #d0e0e3 provides a subtle variation, while #c3c3b0 introduces a unique, soft sandy-grey warmth, grounding the cool spectrum. Designers can utilize this palette to craft exceptionally serene and minimalist designs, perfect for spaces or digital interfaces that aim to convey tranquility, purity, and a sophisticated, understated elegance.

Best used for

  • Minimalist web and app interfaces
  • Luxury spa and wellness branding
  • Baby product design and packaging
  • High-end interior design for serene spaces
  • Wedding photography albums
  • Art installations with soft lighting

Suggested color roles

primary

Use #adcce3 as a dominant, soft blue for expansive backgrounds or primary UI elements, establishing calm.

secondary

Employ #d0e0e3 for subtle differentiation in content blocks, navigation, or secondary graphical elements.

accent

Introduce #c3c3b0 as a warm, grounding accent for highlights, buttons, or delicate details.

background

Opt for #f0f8ff or #e0f2f7 for pristine, airy backgrounds, providing a clean canvas.

text

For optimal readability, use a dark gray or charcoal text. For lighter text, ensure sufficient contrast on #adcce3 or #d0e0e3.

Accessibility notes

  • Most colors are extremely light; ensure a very dark text color is used for readability on all backgrounds.
  • Avoid using any palette color for text on #f0f8ff or #e0f2f7, as contrast will be insufficient.
  • The subtle #c3c3b0 can be used for secondary text on light backgrounds but check contrast.
  • A dark charcoal or black is strongly recommended for all body text to meet accessibility standards.

Recommended combinations

Mist & Sand

Combine a soft blue with a warm grey and an almost-white background for a very clean, airy design.

#ADCCE3 · #C3C3B0 · #F0F8FF

Whisper Light

Ideal for layered backgrounds or subtle visual hierarchies, maintaining an ethereal, monochromatic feel.

#E0F2F7 · #D0E0E3 · #ADCCE3

Coastal Clean

Perfect for minimalist branding, with a pure white background, a soft blue accent, and a grounding neutral.

#F0F8FF · #ADCCE3 · #C3C3B0

CSS variables

:root {
  --coastal-seafoam-spray-1: #adcce3;
  --coastal-seafoam-spray-2: #e0f2f7;
  --coastal-seafoam-spray-3: #f0f8ff;
  --coastal-seafoam-spray-4: #d0e0e3;
  --coastal-seafoam-spray-5: #c3c3b0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-seafoam-spray": {
        1: "#adcce3",
        2: "#e0f2f7",
        3: "#f0f8ff",
        4: "#d0e0e3",
        5: "#c3c3b0",
      }
    }
  }
}

Related searches

light serene blue paletteseafoam white color schememinimalist coastal colorsairy tranquil design palettesubtle cool grey blue

Palette colors

Hex values

Color 1#adcce3
·
Color 2#e0f2f7
·
Color 3#f0f8ff
·
Color 4#d0e0e3
·
Color 5#c3c3b0
·

Accessibility

Contrast checker

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

Similar palettes

More like Coastal Seafoam Spray

View all cool
Azure Coast Serenity
Calm Ocean Swell
Coastal Breeze Mist
Coastal Cliff Retreat
Mediterranean Harbor Day
Ocean Breeze Serene