Back to palettes

Palette

Soft Tidal Foam

Delicate, airy blues and whites mimic the gentle, ephemeral patterns of sea foam retreating from the shore.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Soft Tidal 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 Soft Tidal Foam.

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

Data visualization

#E6F3F7#D0E8F2#B9DCEC#A3D1E7#8CB6E1

Palette guide

How to use Soft Tidal Foam

Overview

The Soft Tidal Foam palette captures the delicate, airy blues and whites that mimic the gentle, ephemeral patterns of sea foam retreating from the shore. With a progressive range from the deepest `#8CB6E1` to the almost-white `#E6F3F7`, this collection offers a serene and refreshing aesthetic. Designers and developers can utilize these cool, clean hues to create tranquil digital experiences, modern branding, or calming print materials. The palette's inherent peacefulness and subtle depth make it versatile for projects aiming for an elegant, uncluttered, and aquatic-inspired look.

Best used for

  • Coastal and marine-themed branding
  • Environmental and conservation initiatives
  • Clean tech and innovation interfaces
  • Tranquil spa and wellness design
  • Modern art and abstract compositions
  • Refreshing beverage packaging

Suggested color roles

primary

Use `#8CB6E1` as the deepest, anchoring blue, suitable for prominent sections, headers, or brand identity.

secondary

Employ `#A3D1E7` for supporting elements, subheadings, or larger content blocks, offering a gentler blue presence.

accent

Apply `#B9DCEC` for subtle highlights, interactive elements, or to introduce a lighter, airy touch of blue.

background

Utilize `#E6F3F7` as a crisp, near-white base, providing an expansive and clean canvas.

text

Pair with a dark blue or charcoal for optimal readability, using lighter text on `#8CB6E1` when appropriate.

Accessibility notes

  • Ensure dark text (e.g., dark blue or charcoal) is used on lighter backgrounds like `#E6F3F7` and `#D0E8F2` for legibility.
  • The darkest color, `#8CB6E1`, offers good contrast for white or light-colored text, suitable for headings or calls to action.
  • Avoid using the lightest colors for small text as they will not meet contrast requirements.
  • For UI elements, ensure sufficient contrast between interactive components and their backgrounds, especially with the lighter shades.

Recommended combinations

Ocean Depths

Creates a smooth gradient from deep to light blue, perfect for dynamic headers or background visuals.

#8CB6E1 · #A3D1E7 · #B9DCEC

Foam Edge

Provides a light, airy layering effect, ideal for clean content sections, subtle overlays, or card designs.

#E6F3F7 · #D0E8F2 · #B9DCEC

Cool Contrast

Combines the deepest blue with the lightest backgrounds for clear differentiation in UI components and visual hierarchy.

#8CB6E1 · #E6F3F7 · #D0E8F2

CSS variables

:root {
  --soft-tidal-foam-1: #E6F3F7;
  --soft-tidal-foam-2: #D0E8F2;
  --soft-tidal-foam-3: #B9DCEC;
  --soft-tidal-foam-4: #A3D1E7;
  --soft-tidal-foam-5: #8CB6E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soft-tidal-foam": {
        1: "#E6F3F7",
        2: "#D0E8F2",
        3: "#B9DCEC",
        4: "#A3D1E7",
        5: "#8CB6E1",
      }
    }
  }
}

Related searches

ocean blue palettecool minimalist colorstidal foam designrefreshing blue shadescoastal branding palette

Palette colors

Hex values

Color 1#E6F3F7
·
Color 2#D0E8F2
·
Color 3#B9DCEC
·
Color 4#A3D1E7
·
Color 5#8CB6E1
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.4:1Fail
1.9:1Fail
2
1.1:1Fail
1.1:1Fail
1.3:1Fail
1.7:1Fail
3
1.3:1Fail
1.1:1Fail
1.1:1Fail
1.5:1Fail
4
1.4:1Fail
1.3:1Fail
1.1:1Fail
1.3:1Fail
5
1.9:1Fail
1.7:1Fail
1.5:1Fail
1.3:1Fail

Similar palettes

More like Soft Tidal Foam

View all cool
Coastal Foam Spray
Glimmering Seafoam Crest
Aegean Coast Whisper
Aqua Marine Vista
Ceramic Ocean Wash
Coastal Breeze