Back to palettes

Palette

Ocean Tide Wash

Fresh blues and greens blended with a touch of sandy beige, reminiscent of waves gently washing ashore.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Tide 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 Ocean Tide Wash.

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

Data visualization

#86BBD8#9BE0E5#B1EDE8#E0E7E9#C4B99D

Palette guide

How to use Ocean Tide Wash

Overview

The "Ocean Tide Wash" palette offers a refreshing blend of cool blues and greens, perfectly balanced with a sandy beige. This serene collection, featuring #86BBD8, #9BE0E5, and #B1EDE8, evokes the tranquil rhythm of waves gently meeting the shore. Designers can leverage its calming nature for interfaces that require a soft, inviting touch, while developers will appreciate the harmonious color relationships for consistent branding. The almost-neutral #E0E7E9 provides an excellent base, complemented by the grounding #C4B99D. This palette is ideal for creating a sense of peace and natural elegance, ensuring a cohesive and visually pleasing user experience across various digital and print applications. It supports a clean aesthetic without feeling stark.

Best used for

  • Spa and wellness websites or branding
  • Coastal-themed interior design mockups
  • Eco-friendly product packaging
  • Relaxation app interfaces
  • Beach resort marketing materials
  • Children's book illustrations

Suggested color roles

primary

Use #86BBD8 as a foundational, medium blue, excellent for main headers, navigation bars, or dominant brand elements, providing a sense of calm authority.

secondary

Employ #9BE0E5 as a lighter, airy blue-green, perfect for subheadings, active states, or supporting graphical elements, adding a fresh, expansive feel.

accent

Apply #C4B99D, a warm, sandy beige, ideal for call-to-action buttons, subtle highlights, or illustrative details, introducing a grounding contrast.

background

Utilize #E0E7E9, a very light, almost off-white grey-blue, serving as a clean, soft canvas for content, ensuring readability without starkness.

text

For primary body text, use a dark charcoal (e.g., #333333) on light backgrounds like #E0E7E9 to ensure optimal readability and a softer contrast than pure black.

Accessibility notes

  • Ensure sufficient contrast between #C4B99D and lighter blues like #E0E7E9 for text elements; aim for WCAG AA at least.
  • Use a dark text color (e.g., charcoal or black) on #E0E7E9 and #B1EDE8 for body copy to meet readability standards.
  • Pair #86BBD8 with #E0E7E9 for background/foreground elements, carefully checking contrast ratio for large text.
  • Avoid using #9BE0E5 as a background for small, dark text due to potentially insufficient contrast.

Recommended combinations

Coastal Serene

Ideal for header sections with a dominant blue, a light background, and a subtle sandy accent for buttons or icons.

#86BBD8 · #E0E7E9 · #C4B99D

Fresh Horizon

Excellent for layered backgrounds or graphical elements, creating depth with closely related cool tones.

#9BE0E5 · #B1EDE8 · #86BBD8

Gentle Shore

A light, airy base with grounding beige for details and a refreshing blue-green for interactive elements.

#E0E7E9 · #C4B99D · #9BE0E5

CSS variables

:root {
  --ocean-tide-wash-1: #86BBD8;
  --ocean-tide-wash-2: #9BE0E5;
  --ocean-tide-wash-3: #B1EDE8;
  --ocean-tide-wash-4: #E0E7E9;
  --ocean-tide-wash-5: #C4B99D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-tide-wash": {
        1: "#86BBD8",
        2: "#9BE0E5",
        3: "#B1EDE8",
        4: "#E0E7E9",
        5: "#C4B99D",
      }
    }
  }
}

Related searches

calm ocean color schemebeach theme ui colorsrefreshing web design palettesoft blue green beige palettetranquil nature brand colors

Palette colors

Hex values

Color 1#86BBD8
·
Color 2#9BE0E5
·
Color 3#B1EDE8
·
Color 4#E0E7E9
·
Color 5#C4B99D
·

Accessibility

Contrast checker

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

Similar palettes

More like Ocean Tide Wash

View all cool
Aqua Marine Vista
Arctic Lagoon Glaze
Azure Coast Dream
Azure Tide Pool
Cerulean Coast Dream
Cerulean Shoreline Whisper