Back to palettes

Palette

Coastal Foam Spray

Light and airy blues and whites, reminiscent of sea foam dancing on the waves along a pristine coastline.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ADD8E6#E0FFFF#F0FFFF#F8F8FF#CFCFCF

Palette guide

How to use Coastal Foam Spray

Overview

The Coastal Foam Spray palette features light and airy blues and whites, reminiscent of sea foam dancing on the waves along a pristine coastline. This serene collection includes the gentle blue of #ADD8E6, the ethereal #E0FFFF and #F0FFFF, the almost-white #F8F8FF, and a soft grey #CFCFCF. Designers can leverage these shades to evoke a sense of freshness, purity, and tranquil lightness. It’s an ideal choice for projects seeking a clean, minimalist, and refreshing aesthetic, from luxury skincare to bridal themes, providing an invigorating yet calming visual experience.

Best used for

  • Luxury skincare branding
  • Bridal and wedding design
  • Clean minimalist websites
  • Water-themed app interfaces
  • Summer fashion lookbooks
  • Spa and relaxation marketing

Suggested color roles

primary

#ADD8E6 - A soft, light blue, excellent for main content areas or primary UI elements, providing a clean feel.

secondary

#CFCFCF - A versatile light grey, perfect for supporting sections, subtle headers, or background accents.

accent

#ADD8E6 - The most saturated blue, used sparingly for impactful calls-to-action or refreshing highlights.

background

#F8F8FF - An almost-white, ethereal tone, providing an expansive and clean canvas for design elements.

text

Use a dark charcoal or black for body text, ensuring superior readability against the very light palette colors.

Accessibility notes

  • Robust contrast is essential for text, as most colors are very light; always pair with dark text.
  • #F0FFFF, #E0FFFF, and #F8F8FF should only be used as backgrounds with very dark text.
  • Avoid placing light text on any palette color, as contrast will be insufficient for readability.
  • Verify contrast ratios for all interactive elements, ensuring they are clearly distinguishable.

Recommended combinations

Pristine Base

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

#F8F8FF · #F0FFFF · #E0FFFF

Gentle Wave

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

#ADD8E6 · #CFCFCF · #F8F8FF

Clean Read

Offers clear text legibility on a light background, with a soft blue accent and a subtle grey.

#F8F8FF · #ADD8E6 · #CFCFCF

CSS variables

:root {
  --coastal-foam-spray-1: #ADD8E6;
  --coastal-foam-spray-2: #E0FFFF;
  --coastal-foam-spray-3: #F0FFFF;
  --coastal-foam-spray-4: #F8F8FF;
  --coastal-foam-spray-5: #CFCFCF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-foam-spray": {
        1: "#ADD8E6",
        2: "#E0FFFF",
        3: "#F0FFFF",
        4: "#F8F8FF",
        5: "#CFCFCF",
      }
    }
  }
}

Related searches

sea foam color palettelight blue white schemecalm coastal bluesairy minimalist designpristine beach aesthetic

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#E0FFFF
·
Color 3#F0FFFF
·
Color 4#F8F8FF
·
Color 5#CFCFCF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.5:1Fail
1.4:1Fail
1:1Fail
2
1.4:1Fail
1:1Fail
1:1Fail
1.5:1Fail
3
1.5:1Fail
1:1Fail
1:1Fail
1.5:1Fail
4
1.4:1Fail
1:1Fail
1:1Fail
1.5:1Fail
5
1:1Fail
1.5:1Fail
1.5:1Fail
1.5:1Fail

Similar palettes

More like Coastal Foam Spray

View all cool
Aegean Coast Whisper
Calm Coastal Retreat
Cerulean Shoreline Whisper
Coastal Breeze
Coastal Tide Shimmer
Glimmering Seafoam Crest