Back to palettes

Palette

Ethereal Sea Foam

Soft, delicate blues and whites capture the serene and fleeting beauty of ocean sea foam.

PastelCalm5 colors
More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ethereal Sea Foam 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 Ethereal Sea Foam.

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

Data visualization

#F0F8FF#E0FFFF#B0E0E6#87CEEB#AFEEEE

Palette guide

How to use Ethereal Sea Foam

Overview

Ethereal Sea Foam is a wonderfully serene and refreshing color palette, perfect for evoking a sense of calm and lightness. Featuring soft blues and near-whites like #F0F8FF (Alice Blue) and #E0FFFF (Light Cyan), it transitions smoothly into gentle aqua tones such as #B0E0E6 (Powder Blue) and the slightly deeper sky blue of #87CEEB (Sky Blue). The inclusion of #AFEEEE (Pale Turquoise) adds a subtle, cool sophistication. This palette is ideal for designers looking to create airy, spacious, and tranquil digital or physical environments, lending itself well to clean interfaces, branding, and soothing content that benefits from a light, aquatic feel. Developers will find these hex codes easy to implement for backgrounds, hover states, and subtle UI elements.

Best used for

  • Spa and wellness brand websites or apps
  • Baby product packaging and branding
  • Coastal-themed interior design mockups
  • Meditation or mindfulness app interfaces
  • Eco-friendly product branding and digital presence
  • Serene blog layouts or online magazines

Suggested color roles

primary

A calming sky blue, #87CEEB, excellent for main headings, call-to-action buttons, or key graphical elements, providing a soft focal point.

secondary

A gentle pale turquoise, #AFEEEE, suitable for subheadings, secondary buttons, or decorative accents that complement the primary without overpowering.

accent

A subtle powder blue, #B0E0E6, perfect for highlighting small details, hover states, or subtle UI indicators.

background

A very light Alice Blue, #F0F8FF, offering a clean, airy canvas that promotes readability and a spacious feel.

text

For optimal readability against light backgrounds, a dark grey like #333333 is recommended, ensuring strong contrast.

Accessibility notes

  • Ensure sufficient contrast when using #87CEEB for text on #F0F8FF or #E0FFFF backgrounds.
  • Avoid pairing #F0F8FF and #E0FFFF for text and background as contrast will be extremely low.
  • Use a dark text color like #333333 or black for all body text against any of the lighter palette colors.
  • Consider increasing font size or weight for lighter colors used as text to improve legibility.

Recommended combinations

Ocean Breeze

Ideal for light, airy website headers or background gradients that evoke a clear sky meeting the sea.

#F0F8FF · #E0FFFF · #87CEEB

Aqua Serenity

Effective for subtle infographics, data visualizations, or UI components requiring a harmonious cool progression.

#AFEEEE · #B0E0E6 · #87CEEB

Foam & Sky

Perfect for soft brand elements, delicate patterns, or illustrations needing a light, tranquil feel.

#F0F8FF · #B0E0E6 · #AFEEEE

CSS variables

:root {
  --ethereal-sea-foam-1: #F0F8FF;
  --ethereal-sea-foam-2: #E0FFFF;
  --ethereal-sea-foam-3: #B0E0E6;
  --ethereal-sea-foam-4: #87CEEB;
  --ethereal-sea-foam-5: #AFEEEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ethereal-sea-foam": {
        1: "#F0F8FF",
        2: "#E0FFFF",
        3: "#B0E0E6",
        4: "#87CEEB",
        5: "#AFEEEE",
      }
    }
  }
}

Related searches

light blue color palettesea foam hex codespastel blue designcalm aquatic colorsairy web design palette

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#E0FFFF
·
Color 3#B0E0E6
·
Color 4#87CEEB
·
Color 5#AFEEEE
·

Accessibility

Contrast checker

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

Similar palettes

More like Ethereal Sea Foam

View all Pastel
Garden Blossom Dew
Pastel Glimmer Cloud
Seaglass Shard Gaze
Whispering Meadow Breeze
Celestial Dust Bloom
Cloud Kissed Lavender