Back to palettes

Palette

Gentle Wave Wash

Soft, watery blues and muted greens mimic the serene, rhythmic ebb and flow of ocean waves.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gentle Wave 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 Gentle Wave Wash.

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

Data visualization

#A0D2DB#C6D8D3#E2EFEF#F4F8F7#FBFBFB

Palette guide

How to use Gentle Wave Wash

Overview

The Gentle Wave Wash palette embodies the soothing, rhythmic motion of ocean waves with its collection of soft, watery blues, greens, and nearly-white neutrals. This palette features the inviting light blue #A0D2DB, a serene seafoam green #C6D8D3, and extremely light, airy tones like #E2EFEF, #F4F8F7, and #FBFBFB. These hues collectively create an atmosphere of purity, freshness, and calm, making them perfect for designs that aim for a minimalist and refreshing aesthetic. Designers can utilize these colors for light and spacious layouts, while developers will find them ideal for clean UI, subtle branding, and backgrounds that promote tranquility.

Best used for

  • Minimalist web and app interfaces
  • Health and wellness product branding
  • Spa and retreat marketing materials
  • Cloud storage or software dashboards
  • Clean photography portfolio sites
  • Baby clothing or nursery decor designs

Suggested color roles

primary

#A0D2DB can serve as a refreshing primary color for headers, main navigation, or key interactive elements, offering a gentle focal point.

secondary

#C6D8D3 provides a subtle, calming green-gray, excellent for secondary information, borders, or inactive states.

accent

While subtle, #A0D2DB can also act as an accent against the lighter tones, drawing attention to important details.

background

#FBFBFB or #F4F8F7 are perfect for clean, expansive backgrounds, providing a nearly white canvas.

text

A dark gray or deep blue (e.g., #2C3E50) is recommended for text to ensure good readability against these very light colors.

Accessibility notes

  • Most colors are very light; rely on dark text (black/dark gray) for readability on #F4F8F7, #FBFBFB, and #E2EFEF.
  • #A0D2DB can support dark text, but contrast should be verified for body copy.
  • Avoid placing light-colored text on any palette color, especially #C6D8D3.
  • Use distinct visual cues beyond color for interactive elements due to the subtle variations.

Recommended combinations

Ocean Breeze

A light, airy background with a soft accent, perfect for clean, open layouts.

#FBFBFB · #E2EFEF · #A0D2DB

Foam & Shore

Ideal for sections requiring soft differentiation and a touch of color, like feature cards.

#C6D8D3 · #F4F8F7 · #A0D2DB

Gentle Gradient

Excellent for subtle background gradients or layered UI elements, creating depth.

#FBFBFB · #E2EFEF · #C6D8D3

CSS variables

:root {
  --gentle-wave-wash-1: #A0D2DB;
  --gentle-wave-wash-2: #C6D8D3;
  --gentle-wave-wash-3: #E2EFEF;
  --gentle-wave-wash-4: #F4F8F7;
  --gentle-wave-wash-5: #FBFBFB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gentle-wave-wash": {
        1: "#A0D2DB",
        2: "#C6D8D3",
        3: "#E2EFEF",
        4: "#F4F8F7",
        5: "#FBFBFB",
      }
    }
  }
}

Related searches

soft ocean blue palettecalm neutral colorslight water huesminimalist wave designrefreshing ui scheme

Palette colors

Hex values

Color 1#A0D2DB
·
Color 2#C6D8D3
·
Color 3#E2EFEF
·
Color 4#F4F8F7
·
Color 5#FBFBFB
·

Accessibility

Contrast checker

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

Similar palettes

More like Gentle Wave Wash

View all neutral