Palette

Ocean Foam Splash

Light and airy blues, capturing the crisp, clean feel of ocean foam on a sandy beach.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#87CEEB#ADD8E6#B0E0E6#E0FFFF#FFFFFF

Palette guide

How to use Ocean Foam Splash

Overview

The Ocean Foam Splash palette captures the crisp, clean, and refreshing feel of ocean foam on a sandy beach. This light and airy collection features a delightful progression of blues from the vibrant #87CEEB (Sky Blue) to the almost ethereal #E0FFFF (Light Cyan) and pure #FFFFFF (White). Complemented by #ADD8E6 (Light Blue) and #B0E0E6 (Pale Turquoise), this palette is perfect for designers and developers aiming to create bright, clean, and invigorating digital experiences. It’s an excellent choice for projects that demand a sense of freshness, purity, and lightness, making it suitable for health, beauty, or minimalist brand identities.

Best used for

Health and fitness app UIs
Clean, minimalist website designs
Summer fashion e-commerce
Refreshing beverage branding
Travel agency promotions for beach destinations
Eco-friendly product packaging

Suggested color roles

primary

#FFFFFF can serve as a pristine, expansive background, offering ultimate clarity.

secondary

Use #E0FFFF or #ADD8E6 for subtle texture, light backgrounds, or secondary information panels.

accent

#87CEEB provides a vibrant, refreshing accent, perfect for calls to action, interactive elements, or key highlights.

background

#FFFFFF or #E0FFFF offer bright, clean canvases. #ADD8E6 can be used for slightly tinted sections.

text

A dark charcoal or black is essential for text on these very light backgrounds to ensure readability.

Accessibility notes

Crucially, ensure high contrast for all text. Black or very dark gray is necessary for text on #FFFFFF, #E0FFFF, #B0E0E6, #ADD8E6, and #87CEEB.
Avoid using any of the lighter blues for text on backgrounds like #FFFFFF or #E0FFFF, as contrast will be insufficient.
Use #87CEEB primarily for graphical elements or large headings, as small text may struggle with contrast on lighter blues.
Rely on strong visual cues like bolding or icons in addition to color for interactive elements.

Recommended combinations

Fresh Horizon

Ideal for clean, modern interfaces, with white as a base and blues for accents and subtle depth.

#FFFFFF · #87CEEB · #ADD8E6

Sea Spray

Perfect for creating gentle gradients or layered elements that evoke the movement of water.

#ADD8E6 · #B0E0E6 · #87CEEB

Pure Clarity

Suited for minimalist designs, using the bright blue for highlights against very light backgrounds.

#E0FFFF · #FFFFFF · #87CEEB

CSS variables

:root {
  --ocean-foam-splash-1: #87CEEB;
  --ocean-foam-splash-2: #ADD8E6;
  --ocean-foam-splash-3: #B0E0E6;
  --ocean-foam-splash-4: #E0FFFF;
  --ocean-foam-splash-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-foam-splash": {
        1: "#87CEEB",
        2: "#ADD8E6",
        3: "#B0E0E6",
        4: "#E0FFFF",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#87CEEB

Color 2#ADD8E6

Color 3#B0E0E6

Color 4#E0FFFF

Color 5#FFFFFF

Accessibility

Contrast checker

1.1:1Fail

1.2:1Fail

1.7:1Fail

1.1:1Fail

1.4:1Fail

1.5:1Fail

1.2:1Fail

1.1:1Fail

1.4:1Fail

1.7:1Fail

1.4:1Fail

1.1:1Fail

1.7:1Fail

1.5:1Fail

1.4:1Fail

1.1:1Fail

Similar palettes

More like Ocean Foam Splash

Ocean Foam Splash

See it in context.

Ready when you are.

Built with Ocean Foam Splash.

How to use Ocean Foam Splash

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Fresh Horizon

Sea Spray

Pure Clarity

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Ocean Foam Splash