Back to palettes

Palette

Ocean Shoreline Spray

Fresh, cool blue-greens and light whites evoke the delicate froth and shimmering spray of waves meeting the shore.

Coolcalm5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Shoreline Spray 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 Shoreline Spray.

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

Data visualization

#E0FFFF#AFEEEE#7FFFD4#66CDAA#40E0D0

Palette guide

How to use Ocean Shoreline Spray

Overview

The Ocean Shoreline Spray palette captures the delicate froth and shimmering spray of waves meeting the shore with its fresh, cool blue-greens and light whites. It ranges from the almost ethereal #E0FFFF, through the gentle aquamarine of #AFEEEE and the vibrant #7FFFD4, to the more grounded sea green of #66CDAA, culminating in the striking turquoise of #40E0D0. This collection offers a sense of crispness, vitality, and natural calm. Designers will find it perfect for projects requiring a clean, invigorating, and refreshing aesthetic. Developers can use these hex codes to build user interfaces that feel airy, dynamic, and connected to nature, ideal for outdoor brands, fitness apps, or eco-tourism.

Best used for

  • Outdoor and adventure brand identities
  • Fitness and wellness applications
  • Eco-tourism marketing materials
  • Beachwear and activewear branding
  • Refreshing website designs
  • Healthy lifestyle product packaging

Suggested color roles

primary

#40E0D0 (Turquoise) - Excellent for main headings, call-to-action buttons, or elements needing a strong, energetic presence.

secondary

#AFEEEE (Powder Blue) - Use for subheadings, background sections, or less prominent UI elements, offering a soft, cool base.

accent

#7FFFD4 (Aquamarine) - Ideal for interactive elements, highlights, or graphic details to add a vibrant, refreshing pop.

background

#E0FFFF (Light Cyan) - Provides a very light, almost white canvas, enhancing the airy and expansive feel of the design.

text

A dark charcoal like #333333 or even #40E0D0 for headings, ensuring optimal readability on light backgrounds.

Accessibility notes

  • #E0FFFF is very light; use dark text (e.g., black) for all content on this background.
  • Text in #AFEEEE, #7FFFD4, #66CDAA, and #40E0D0 will require dark text for WCAG AA contrast on light backgrounds.
  • Ensure sufficient contrast for interactive elements, especially if using similar light blues/greens.
  • #40E0D0 provides good contrast for light text, but dark text on light backgrounds is generally preferred.

Recommended combinations

Crisp Wave

A light cyan background with a vibrant turquoise for primary elements and aquamarine for accents, creating a crisp, dynamic look.

#E0FFFF · #40E0D0 · #7FFFD4

Shoreline Gradient

Layered cool blue-greens for a smooth transition, evoking depth and movement, ideal for background imagery or large sections.

#AFEEEE · #66CDAA · #40E0D0

Fresh Accents

A clean white base with a soft powder blue for secondary information and a sea green for subtle, natural accents.

#E0FFFF · #AFEEEE · #66CDAA

CSS variables

:root {
  --ocean-shoreline-spray-1: #E0FFFF;
  --ocean-shoreline-spray-2: #AFEEEE;
  --ocean-shoreline-spray-3: #7FFFD4;
  --ocean-shoreline-spray-4: #66CDAA;
  --ocean-shoreline-spray-5: #40E0D0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-shoreline-spray": {
        1: "#E0FFFF",
        2: "#AFEEEE",
        3: "#7FFFD4",
        4: "#66CDAA",
        5: "#40E0D0",
      }
    }
  }
}

Related searches

cool blue green paletterefreshing shoreline colorscrisp ocean UI designbeach wave color schemevibrant turquoise aquamarine

Palette colors

Hex values

Color 1#E0FFFF
·
Color 2#AFEEEE
·
Color 3#7FFFD4
·
Color 4#66CDAA
·
Color 5#40E0D0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.2:1Fail
1.8:1Fail
1.6:1Fail
2
1.2:1Fail
1.1:1Fail
1.5:1Fail
1.3:1Fail
3
1.2:1Fail
1.1:1Fail
1.6:1Fail
1.3:1Fail
4
1.8:1Fail
1.5:1Fail
1.6:1Fail
1.2:1Fail
5
1.6:1Fail
1.3:1Fail
1.3:1Fail
1.2:1Fail

Similar palettes

More like Ocean Shoreline Spray

View all Cool
Aegean Shoreline Treasures
Frozen Tundra Calm
Glacial Lake Tranquil
Icy Nordic Fjords
Tranquil Morning Mist
Bamboo Garden Calm