Back to palettes

Palette

Ocean Foam Serene

Soft blues, aquas, and gentle sandy tones perfectly capture the peaceful serenity of a tranquil coastal morning.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Foam Serene 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 Ocean Foam Serene.

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

Data visualization

#5D8B8E#8CB3BF#BFE1ED#F4E8D7#E8F2F5

Palette guide

How to use Ocean Foam Serene

Overview

The Ocean Foam Serene palette perfectly captures the peaceful tranquility of a coastal morning, blending soft blues, aquas, and gentle sandy tones. This serene collection includes the calming #5D8B8E (Cadet Gray), the airy #8CB3BF (Powder Blue), the crisp #BFE1ED (Light Blue), the warm #F4E8D7 (Cornsilk), and the near-white #E8F2F5 (Azureish White). Designers and developers can utilize this palette to create soothing, inviting, and natural digital experiences. It's an excellent choice for projects that aim to convey relaxation, cleanliness, and a connection to nature, making it ideal for wellness, home, or light-hearted brand identities.

Best used for

  • Spa and wellness brand websites
  • Coastal-themed interior design apps
  • Baby product branding
  • Organic food packaging
  • Meditation or sleep aid interfaces
  • Serene blog or personal websites

Suggested color roles

primary

#E8F2F5 or #F4E8D7 can serve as a soft, expansive background, creating an open and airy feel.

secondary

Use #8CB3BF or #BFE1ED for navigation elements, subtle section breaks, or to introduce a gentle blue tone.

accent

#5D8B8E provides a grounding, slightly deeper accent, suitable for calls to action or important highlights.

background

#E8F2F5 offers a clean, almost white canvas. #F4E8D7 provides a warmer, sandy tone for content areas.

text

For light backgrounds, a dark gray or charcoal (e.g., #5D8B8E or black) ensures excellent readability.

Accessibility notes

  • Ensure sufficient contrast for text on lighter backgrounds; a dark gray or black is recommended for #E8F2F5, #F4E8D7, and #BFE1ED.
  • Avoid using #BFE1ED or #8CB3BF for small text on #E8F2F5 or #F4E8D7, as contrast may be too low.
  • For interactive elements, provide clear visual feedback beyond color, especially with the subtle tones.
  • Test all color pairings for readability, particularly the mid-tones like #5D8B8E on #8CB3BF.

Recommended combinations

Coastal Morning

Perfect for light-themed websites, using the darkest for text and the lightest for backgrounds.

#E8F2F5 · #F4E8D7 · #5D8B8E

Gentle Waves

Ideal for creating soft gradients or layered content blocks that evoke a calm, aquatic feel.

#8CB3BF · #BFE1ED · #5D8B8E

Sandy Shore

Suited for backgrounds and subtle branding, with the blue providing a gentle color accent.

#F4E8D7 · #E8F2F5 · #8CB3BF

CSS variables

:root {
  --ocean-foam-serene-1: #5D8B8E;
  --ocean-foam-serene-2: #8CB3BF;
  --ocean-foam-serene-3: #BFE1ED;
  --ocean-foam-serene-4: #F4E8D7;
  --ocean-foam-serene-5: #E8F2F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-foam-serene": {
        1: "#5D8B8E",
        2: "#8CB3BF",
        3: "#BFE1ED",
        4: "#F4E8D7",
        5: "#E8F2F5",
      }
    }
  }
}

Related searches

serene coastal color palettecalm blue green schemelight airy web designocean foam aestheticnatural wellness brand colors

Palette colors

Hex values

Color 1#5D8B8E
·
Color 2#8CB3BF
·
Color 3#BFE1ED
·
Color 4#F4E8D7
·
Color 5#E8F2F5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.7:1Fail
3.1:1AA18
3.3:1AA18
2
1.7:1Fail
1.6:1Fail
1.9:1Fail
2:1Fail
3
2.7:1Fail
1.6:1Fail
1.1:1Fail
1.2:1Fail
4
3.1:1AA18
1.9:1Fail
1.1:1Fail
1.1:1Fail
5
3.3:1AA18
2:1Fail
1.2:1Fail
1.1:1Fail

Similar palettes

More like Ocean Foam Serene

View all cool
Azure Coast Dream
Overcast Coast Serene
Aegean Isle Horizon
Aqua Marine Vista
Arctic Glacier Melt
Azure Abyss Calm