Palette

Oceanic Foam Wash

The gentle, cool hues of ocean waves breaking into frothy white foam on a misty morning.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Foam Wash 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 Oceanic Foam Wash.

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

Data visualization

#8FB7BF#ADCED6#D0E4EA#F0F4F7#3D7F8A

Palette guide

How to use Oceanic Foam Wash

Overview

The "Oceanic Foam Wash" palette evokes a serene, misty morning at the coast, offering a tranquil blend of cool blues and soft, frothy whites. Featuring the calming mid-tone #8FB7BF, a lighter #ADCED6, and the almost ethereal #F0F4F7, this collection is perfect for creating soothing digital and print experiences. The deep, grounding #3D7F8A provides excellent contrast and depth, while #D0E4EA acts as a gentle intermediate. Designers can leverage these hues to craft interfaces that feel open, clean, and inviting, fostering a sense of peace and clarity. Developers will find its limited yet versatile range easy to implement for cohesive branding, ensuring visual harmony across various components without overwhelming the user. This palette excels in projects requiring a touch of natural tranquility and understated elegance.

Best used for

Spa & Wellness websites/branding
Environmental or marine conservation non-profits
Relaxation app interfaces
Coastal living real estate marketing
Children's book illustrations (calm themes)
Sustainable product packaging

Suggested color roles

primary

A balanced, calming blue-green #8FB7BF, ideal for main brand elements, large sections, or prominent UI components to establish the serene mood.

secondary

A lighter, airy blue #ADCED6, perfect for supporting backgrounds, navigation elements, or secondary calls-to-action that need to feel gentle.

accent

A deeper, richer blue-green #3D7F8A, excellent for subtle accents, important icons, or interactive states where a touch of depth is desired without harshness.

background

A very light, almost white blue-gray #F0F4F7, providing a clean, expansive canvas that enhances readability and lightness.

text

Use a dark charcoal or deep blue like #3D7F8A for primary text on light backgrounds to ensure excellent readability. For secondary text or headings, a slightly lighter but still contrasting shade like #8FB7BF can work.

Accessibility notes

Ensure sufficient contrast when using #D0E4EA or #F0F4F7 for backgrounds with lighter text colors.
Use #3D7F8A for primary text on #F0F4F7 or #D0E4EA backgrounds to meet WCAG AA standards.
Avoid placing #ADCED6 text directly on #8FB7BF backgrounds without checking contrast ratios carefully.
Consider using a slightly darker text color than #3D7F8A for critical information if the background is also a mid-tone.

Recommended combinations

Calm Horizon

Ideal for header sections, hero images, or product cards where a clean, layered look is desired.

#F0F4F7 · #8FB7BF · #3D7F8A

Foam & Depth

Effective for content blocks, sub-navigation, or informational panels, providing gentle separation.

#ADCED6 · #D0E4EA · #3D7F8A

Misty Serenity

Great for background patterns, subtle gradients, or decorative elements that require a soft, blended feel.

#D0E4EA · #8FB7BF · #ADCED6

CSS variables

:root {
  --oceanic-foam-wash-1: #8FB7BF;
  --oceanic-foam-wash-2: #ADCED6;
  --oceanic-foam-wash-3: #D0E4EA;
  --oceanic-foam-wash-4: #F0F4F7;
  --oceanic-foam-wash-5: #3D7F8A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-foam-wash": {
        1: "#8FB7BF",
        2: "#ADCED6",
        3: "#D0E4EA",
        4: "#F0F4F7",
        5: "#3D7F8A",
      }
    }
  }
}

Hex values

Color 1#8FB7BF

Color 2#ADCED6

Color 3#D0E4EA

Color 4#F0F4F7

Color 5#3D7F8A

Accessibility

Contrast checker

1.3:1Fail

1.6:1Fail

2:1Fail

2.1:1Fail

1.3:1Fail

1.5:1Fail

2.7:1Fail

1.6:1Fail

1.3:1Fail

1.2:1Fail

3.5:1AA18

2:1Fail

1.5:1Fail

1.2:1Fail

4.1:1AA18

2.1:1Fail

2.7:1Fail

3.5:1AA18

4.1:1AA18

Similar palettes

More like Oceanic Foam Wash

Oceanic Foam Wash

See it in context.

Ready when you are.

Built with Oceanic Foam Wash.

How to use Oceanic Foam Wash

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Calm Horizon

Foam & Depth

Misty Serenity

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Oceanic Foam Wash