Palette

Ocean Wave Foam

The refreshing blend of blues and whites found in seafoam and crashing ocean waves.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ADD8E6#87CEEB#5F9EA0#4682B4#E0FFFF

Palette guide

How to use Ocean Wave Foam

Overview

The "Ocean Wave Foam" palette captures the refreshing blend of blues and whites found in seafoam and crashing ocean waves. This invigorating cool collection, featuring #ADD8E6, #87CEEB, and #5F9EA0, is perfect for projects seeking to evoke freshness, serenity, and a touch of vibrancy. Designers can utilize these hues to create clean, airy, and inviting interfaces, while developers will find the progression from light to deeper blues, including #4682B4, excellent for establishing visual flow. The almost pure white #E0FFFF provides a crisp backdrop, making this palette ideal for conveying purity and calm. It ensures a cohesive and visually pleasing user experience, reminiscent of a clear, sunny day by the sea.

Best used for

Travel and tourism websites (coastal focus)
Children's educational apps
Health and wellness product branding
Summer seasonal marketing campaigns
Refreshing beverage packaging
Clean and minimalist web designs

Suggested color roles

primary

Designate #ADD8E6 as the main light blue, perfect for backgrounds, headers, or large content blocks, providing a soft, expansive feel.

secondary

Utilize #87CEEB for subheadings, active states, or supporting graphical elements, offering a slightly deeper yet still airy blue.

accent

Apply #4682B4 as a strong, grounding accent for calls-to-action, important links, or focal points, providing necessary depth and contrast.

background

Use #E0FFFF as a clean, crisp, almost white background to ensure maximum readability and a bright, fresh aesthetic.

text

For body text, a dark blue like #4682B4 or a deep charcoal (#333333) on #E0FFFF provides optimal contrast and a professional appearance.

Accessibility notes

Ensure #4682B4 provides strong contrast against lighter blues like #ADD8E6 for text or interactive elements.
For body text on #E0FFFF, use a dark color like #4682B4 or black to meet WCAG AA/AAA standards easily.
Avoid using #ADD8E6 for small text on #E0FFFF backgrounds as contrast may be insufficient; reserve for large titles.
Leverage #E0FFFF for backgrounds to maximize readability of all darker elements.

Recommended combinations

Seafoam Fresh

A light blue base with a crisp white background and a deep blue for strong accents or key information.

#ADD8E6 · #E0FFFF · #4682B4

Wave Crest

Create subtle layers or gradients, mimicking the varying depths and translucency of ocean waves.

#87CEEB · #5F9EA0 · #ADD8E6

Coastal Breeze

A bright background with a muted blue-green for content blocks and a clear blue for interactive elements.

#E0FFFF · #5F9EA0 · #87CEEB

CSS variables

:root {
  --ocean-wave-foam-1: #ADD8E6;
  --ocean-wave-foam-2: #87CEEB;
  --ocean-wave-foam-3: #5F9EA0;
  --ocean-wave-foam-4: #4682B4;
  --ocean-wave-foam-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-wave-foam": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#5F9EA0",
        4: "#4682B4",
        5: "#E0FFFF",
      }
    }
  }
}

Hex values

Color 1#ADD8E6

Color 2#87CEEB

Color 3#5F9EA0

Color 4#4682B4

Color 5#E0FFFF

Accessibility

Contrast checker

1.1:1Fail

2:1Fail

2.7:1Fail

1.4:1Fail

1.1:1Fail

1.8:1Fail

2.4:1Fail

1.7:1Fail

2:1Fail

1.8:1Fail

1.3:1Fail

2.9:1Fail

2.7:1Fail

2.4:1Fail

1.3:1Fail

3.9:1AA18

1.4:1Fail

1.7:1Fail

2.9:1Fail

3.9:1AA18

Similar palettes

More like Ocean Wave Foam

View all cool

Cerulean Coast Dream

Marine Glass Shard

Abyssal Current Glide

Aegean Coast Whisper

Aqua Marine Vista

Azure Coast Dream