Palette

Coastal Tide Shimmer

Reflects the gentle interplay of light on shallow ocean water, sandy shores, and serene coastal hues.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Tide Shimmer 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 Coastal Tide Shimmer.

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

Data visualization

#98D2E1#B2EBF2#E0F2F7#6BBBD6#3E8DA7

Palette guide

How to use Coastal Tide Shimmer

Overview

The Coastal Tide Shimmer palette offers a serene and refreshing collection of cool blues, perfect for designs evoking tranquility and natural beauty. Featuring shades like the deep teal-blue #3E8DA7 and the airy #E0F2F7, this palette captures the essence of shallow ocean waters and sun-drenched coastal scenes. Designers can leverage #6BBBD6 for prominent elements, while #98D2E1 provides a balanced mid-tone. The lightest hue, #B2EBF2, is excellent for backgrounds or subtle accents, creating a harmonious and expansive feel. This palette is ideal for projects aiming for a calm, clean, and inviting aesthetic, from digital interfaces to brand identities.

Best used for

Serene spa and wellness branding
Coastal-themed interior design visuals
Eco-friendly product packaging
Travel and tourism websites (beach destinations)
Mobile app interfaces for meditation or weather
Aquatic sports apparel branding

Suggested color roles

primary

#6BBBD6 - A foundational mid-blue, versatile for main headings, call-to-action buttons, or significant graphic elements, offering a sense of stability.

secondary

#98D2E1 - Complements the primary, suitable for subheadings, active states, or supporting visual information, maintaining the calm theme.

accent

#3E8DA7 - A deeper, more saturated blue that provides a strong focal point for interactive elements, key iconography, or subtle highlights.

background

#E0F2F7 - An almost-white, very light blue, perfect for clean, open backgrounds that allow other colors to stand out while retaining a cool undertone.

text

For body text on #E0F2F7, use a dark charcoal or black for optimal readability. For headings on #98D2E1 or #6BBBD6, consider white or a very light gray.

Accessibility notes

Ensure sufficient contrast between #3E8DA7 and #E0F2F7 for text, as the lighter shades may require careful pairing.
For interactive elements, use distinct color combinations like #3E8DA7 on #E0F2F7 to clearly indicate interactivity.
Avoid placing light text on #B2EBF2 or #98D2E1 without verifying WCAG AA compliance.
Reserve #E0F2F7 primarily for background or large, non-textual elements to maintain legibility.

Recommended combinations

Ocean Breeze

Ideal for clean, airy web layouts; #E0F2F7 as background, #98D2E1 for content, #3E8DA7 for calls to action.

#E0F2F7 · #98D2E1 · #3E8DA7

Deep Tide

Use #6BBBD6 for primary sections, #3E8DA7 for deep accents, and #E0F2F7 for crisp text or highlights.

#6BBBD6 · #3E8DA7 · #E0F2F7

Shimmering Shore

Creates a gentle gradient effect, suitable for headers, banners, or subtle graphical elements, evoking soft light on water.

#B2EBF2 · #98D2E1 · #6BBBD6

CSS variables

:root {
  --coastal-tide-shimmer-1: #98D2E1;
  --coastal-tide-shimmer-2: #B2EBF2;
  --coastal-tide-shimmer-3: #E0F2F7;
  --coastal-tide-shimmer-4: #6BBBD6;
  --coastal-tide-shimmer-5: #3E8DA7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-tide-shimmer": {
        1: "#98D2E1",
        2: "#B2EBF2",
        3: "#E0F2F7",
        4: "#6BBBD6",
        5: "#3E8DA7",
      }
    }
  }
}

Hex values

Color 1#98D2E1

Color 2#B2EBF2

Color 3#E0F2F7

Color 4#6BBBD6

Color 5#3E8DA7

Accessibility

Contrast checker

1.3:1Fail

1.4:1Fail

1.3:1Fail

2.3:1Fail

1.3:1Fail

1.1:1Fail

1.7:1Fail

2.9:1Fail

1.4:1Fail

1.1:1Fail

1.9:1Fail

3.3:1AA18

1.3:1Fail

1.7:1Fail

1.9:1Fail

1.7:1Fail

2.3:1Fail

2.9:1Fail

3.3:1AA18

1.7:1Fail

Similar palettes

More like Coastal Tide Shimmer

Cerulean Coastline Calm

Coastal Tide Shimmer

See it in context.

Ready when you are.

Built with Coastal Tide Shimmer.

How to use Coastal Tide Shimmer

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Ocean Breeze

Deep Tide

Shimmering Shore

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coastal Tide Shimmer