Palette

Seashell Whisper Shore

Soft, muted tones mirroring the subtle colors and delicate forms of seashells found on a serene beach.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seashell Whisper Shore 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 Seashell Whisper Shore.

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

Data visualization

#F0EAD6#D4CCC7#B8B8B0#A0A9AE#82929C

Palette guide

How to use Seashell Whisper Shore

Overview

The Seashell Whisper Shore palette offers a soft, muted, and natural collection of tones, mirroring the subtle colors and delicate forms of seashells found on a serene beach. With the warm #F0EAD6, a balanced #B8B8B0, and the grounding #82929C, this palette is ideal for designs that aim for calm, authenticity, and gentle sophistication. Designers and developers can leverage these harmonious hues to create inviting user interfaces, compelling branding for handcrafted goods, or tranquil digital experiences that evoke the quiet beauty of a coastal retreat. Its earthy pastels foster a relaxing and approachable feel.

Best used for

Spa and wellness branding and websites
Handcrafted goods and artisan product packaging
Cozy home decor and textile designs
Natural skincare and beauty product marketing
Literary or contemplative blog designs
Subtle and inviting digital interfaces

Suggested color roles

primary

Use #B8B8B0 as a balanced, natural core for branding, main headings, or significant graphic elements, conveying warmth and authenticity.

secondary

Employ #D4CCC7 for warm, sandy neutral supporting elements, background sections, or secondary UI elements, adding a gentle softness.

accent

Apply #A0A9AE as a subtle cool grey accent for interactive elements, highlights, or graphical details, adding a touch of understated depth.

background

Utilize #F0EAD6 as the lightest, warm sandy base for pages or content blocks, ensuring ample whitespace and an inviting feel.

text

For optimal legibility, #82929C serves as the darkest and most effective text color against the lighter backgrounds, ensuring content is easily digestible.

Accessibility notes

The combination of #82929C (text) on #F0EAD6 (background) provides good contrast for body text readability, meeting WCAG AA standards.
Colors like #F0EAD6 and #D4CCC7 are too light for text on most backgrounds; reserve them for backgrounds or large decorative elements.
Ensure sufficient contrast when using #B8B8B0 or #A0A9AE as text colors on #F0EAD6, especially for smaller font sizes.
For titles, #A0A9AE on #D4CCC7 may pass contrast, but always check for smaller text sizes to ensure readability.

Recommended combinations

Shore Base

Ideal for creating light, warm backgrounds, content areas, and subtle UI components that evoke a sense of natural tranquility.

#F0EAD6 · #D4CCC7 · #B8B8B0

Whisper Depth

Excellent for headers, main content blocks, and strong calls to action, providing a grounded yet harmonious visual hierarchy.

#B8B8B0 · #A0A9AE · #82929C

Muted Contrast

Creates a clean base, highlights secondary elements with a subtle grey, and provides primary text with a deep, legible tone.

#F0EAD6 · #A0A9AE · #82929C

CSS variables

:root {
  --seashell-whisper-shore-1: #F0EAD6;
  --seashell-whisper-shore-2: #D4CCC7;
  --seashell-whisper-shore-3: #B8B8B0;
  --seashell-whisper-shore-4: #A0A9AE;
  --seashell-whisper-shore-5: #82929C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seashell-whisper-shore": {
        1: "#F0EAD6",
        2: "#D4CCC7",
        3: "#B8B8B0",
        4: "#A0A9AE",
        5: "#82929C",
      }
    }
  }
}

Hex values

Color 1#F0EAD6

Color 2#D4CCC7

Color 3#B8B8B0

Color 4#A0A9AE

Color 5#82929C

Accessibility

Contrast checker

1.3:1Fail

1.7:1Fail

2:1Fail

2.7:1Fail

1.3:1Fail

1.5:1Fail

2:1Fail

1.7:1Fail

1.3:1Fail

1.2:1Fail

1.6:1Fail

2:1Fail

1.5:1Fail

1.2:1Fail

1.3:1Fail

2.7:1Fail

2:1Fail

1.6:1Fail

1.3:1Fail

Similar palettes

More like Seashell Whisper Shore

Seashell Whisper Shore

See it in context.

Ready when you are.

Built with Seashell Whisper Shore.

How to use Seashell Whisper Shore

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Shore Base

Whisper Depth

Muted Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Seashell Whisper Shore