Palette

Coastal Sand Whisper

Gentle cool blues meet soft sandy beiges, reflecting the tranquil beauty of a quiet coastline.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Sand Whisper 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 Sand Whisper.

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

Data visualization

#BCD4DE#A7D9DE#F4EDD6#6E8898#D1E5ED

Palette guide

How to use Coastal Sand Whisper

Overview

The Coastal Sand Whisper palette offers a tranquil blend of cool blues and soft sandy tones, perfect for evoking a serene, beach-inspired atmosphere. Featuring gentle hues like #BCD4DE, a muted sky blue, and the calming #A7D9DE, alongside the warm, earthy #F4EDD6, this palette is ideal for designers seeking a light and airy feel. The deeper #6E8898 provides a grounding anchor, while #D1E5ED adds a whisper-soft touch. This collection is versatile for creating spaces and digital experiences that feel open, peaceful, and subtly sophisticated, reminiscent of a quiet, sun-drenched shore.

Best used for

Spa and wellness branding
Coastal home decor websites
Relaxation app interfaces
Wedding stationery and invitations
Nature photography portfolios
Children's book illustrations

Suggested color roles

primary

Use #BCD4DE as a dominant background or main UI element color to establish a calm, inviting base.

secondary

Employ #A7D9DE for secondary content blocks, navigation elements, or subtle gradients to maintain fluidity.

accent

Introduce #F4EDD6 as an accent for call-to-action buttons, key highlights, or decorative elements to add warmth.

background

Opt for #D1E5ED or #F4EDD6 for clean, expansive backgrounds, providing a light and airy canvas.

text

Utilize #6E8898 for body text and headings for excellent readability against lighter backgrounds, or use a dark charcoal for maximum contrast.

Accessibility notes

Ensure sufficient contrast when using #BCD4DE or #A7D9DE for text on #D1E5ED backgrounds.
The darker #6E8898 provides good contrast for text on all lighter palette colors, including #F4EDD6.
Avoid using #BCD4DE and #A7D9DE as text and background against each other without checking contrast ratios.
Consider using a near-black text on #F4EDD6 for optimal readability, especially for lengthy content.

Recommended combinations

Sky & Sand

Ideal for header sections, main content areas, and readable text, blending cool blue with warm sand.

#BCD4DE · #F4EDD6 · #6E8898

Ocean Breeze

Perfect for card backgrounds, subtle UI elements, and strong textual contrast in a tranquil setting.

#A7D9DE · #D1E5ED · #6E8898

Dune Path

Use for distinct sections, primary text, and a calming accent, creating a grounded yet airy feel.

#F4EDD6 · #6E8898 · #BCD4DE

CSS variables

:root {
  --coastal-sand-whisper-1: #BCD4DE;
  --coastal-sand-whisper-2: #A7D9DE;
  --coastal-sand-whisper-3: #F4EDD6;
  --coastal-sand-whisper-4: #6E8898;
  --coastal-sand-whisper-5: #D1E5ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-sand-whisper": {
        1: "#BCD4DE",
        2: "#A7D9DE",
        3: "#F4EDD6",
        4: "#6E8898",
        5: "#D1E5ED",
      }
    }
  }
}

Hex values

Color 1#BCD4DE

Color 2#A7D9DE

Color 3#F4EDD6

Color 4#6E8898

Color 5#D1E5ED

Accessibility

Contrast checker

1:1Fail

1.3:1Fail

2.4:1Fail

1.2:1Fail

1:1Fail

1.3:1Fail

2.4:1Fail

1.2:1Fail

1.3:1Fail

3.2:1AA18

1.1:1Fail

2.4:1Fail

3.2:1AA18

2.9:1Fail

1.2:1Fail

1.1:1Fail

2.9:1Fail

Similar palettes

More like Coastal Sand Whisper

Coastal Sand Whisper

See it in context.

Ready when you are.

Built with Coastal Sand Whisper.

How to use Coastal Sand Whisper

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sky & Sand

Ocean Breeze

Dune Path

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coastal Sand Whisper