Back to palettes

Palette

Gentle Tide Pool

The tranquil colors found in a quiet tide pool, teeming with delicate life and calm reflections.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gentle Tide Pool 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 Gentle Tide Pool.

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

Data visualization

#A3CED9#C1E0D7#F0E4D3#B0D4C5#D8D8D8

Palette guide

How to use Gentle Tide Pool

Overview

The Gentle Tide Pool palette evokes the serene and subtle beauty of coastal waters and sandy shores. This collection features soft, cool blues and greens like #A3CED9 and #B0D4C5, reminiscent of shallow ocean water, complemented by the muted, sandy beige of #F0E4D3. The inclusion of the very light green #C1E0D7 and a versatile neutral gray #D8D8D8 provides balance and versatility. Designers can use these hues to create calming, natural, and sophisticated interfaces, while developers will find them excellent for crafting soothing digital experiences, particularly for travel, wellness, or home decor themes.

Best used for

  • Coastal-themed websites and blogs
  • Spa and relaxation service branding
  • Home decor e-commerce sites
  • Travel and resort marketing materials
  • Nature-inspired mobile applications
  • Sustainable living product packaging

Suggested color roles

primary

#A3CED9 can serve as a primary color for main content blocks or headers, providing a clear, cool, and inviting feel.

secondary

#B0D4C5 offers a slightly greener, muted tone, ideal for secondary elements, sections, or subtle accents.

accent

#F0E4D3 introduces a warm, sandy accent, perfect for highlights, call-to-action buttons, or contrasting elements.

background

#D8D8D8 provides a light, versatile gray background that allows other colors to stand out gently.

text

A dark charcoal or deep blue-gray text works best for readability against these light, muted colors.

Accessibility notes

  • Ensure sufficient contrast for text on #F0E4D3; a dark brown or black is recommended.
  • #A3CED9 and #B0D4C5 can support dark text but require testing to meet WCAG AA standards.
  • Avoid placing light-colored text on #C1E0D7 without strong contrast.
  • Use #D8D8D8 as a background for body text to maximize readability with darker text.

Recommended combinations

Sandy Shores

A warm background, neutral separator, and cool accent, perfect for welcoming interfaces.

#F0E4D3 · #D8D8D8 · #A3CED9

Water Reflections

Ideal for gradients or layered elements, creating a sense of depth and fluidity.

#A3CED9 · #C1E0D7 · #B0D4C5

Balanced Calm

A neutral background with a cool secondary and warm accent, suitable for content cards.

#D8D8D8 · #B0D4C5 · #F0E4D3

CSS variables

:root {
  --gentle-tide-pool-1: #A3CED9;
  --gentle-tide-pool-2: #C1E0D7;
  --gentle-tide-pool-3: #F0E4D3;
  --gentle-tide-pool-4: #B0D4C5;
  --gentle-tide-pool-5: #D8D8D8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gentle-tide-pool": {
        1: "#A3CED9",
        2: "#C1E0D7",
        3: "#F0E4D3",
        4: "#B0D4C5",
        5: "#D8D8D8",
      }
    }
  }
}

Related searches

calm ocean palettesubtle beach colorstranquil cool huesnature inspired uimuted coastal scheme

Palette colors

Hex values

Color 1#A3CED9
·
Color 2#C1E0D7
·
Color 3#F0E4D3
·
Color 4#B0D4C5
·
Color 5#D8D8D8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.4:1Fail
1.1:1Fail
1.2:1Fail
2
1.2:1Fail
1.1:1Fail
1.1:1Fail
1:1Fail
3
1.4:1Fail
1.1:1Fail
1.3:1Fail
1.1:1Fail
4
1.1:1Fail
1.1:1Fail
1.3:1Fail
1.1:1Fail
5
1.2:1Fail
1:1Fail
1.1:1Fail
1.1:1Fail

Similar palettes

More like Gentle Tide Pool

View all cool
Azure Coast Dream
Coastal Breeze
Ocean Foam Serene
Ocean Mist Pebbles
Ocean Spray Mist
Overcast Coast Serene