Palette

Seaside Driftwood Whisper

Soft, weathered tones inspired by smooth driftwood, ocean pebbles, and sandy shores.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seaside Driftwood 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 Seaside Driftwood Whisper.

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

Data visualization

#8B7355#A0522D#C0C0C0#D3D3D3#F5F5DC

Palette guide

How to use Seaside Driftwood Whisper

Overview

The "Seaside Driftwood Whisper" palette (ID: seaside-driftwood-whisper-2) offers a serene collection of soft, weathered tones, drawing inspiration from smooth driftwood, ocean pebbles, and sandy shores. This palette blends earthy browns like #8B7355 and #A0522D with calming grays such as #C0C0C0 and the light, almost-white #F5F5DC. It's ideal for designers seeking to evoke a sense of calm, natural beauty, and understated elegance in their projects, from web interfaces to interior design, creating a grounded and inviting atmosphere.

Best used for

Coastal wedding stationery and invitations
Eco-conscious branding and packaging
Nature photography showcases
Serene home goods and decor
Calming digital experiences and apps
Artisan craft marketing

Suggested color roles

primary

Use #F5F5DC for a warm, inviting, sandy background, providing an airy base.

secondary

Apply #D3D3D3 for subtle panels, secondary content areas, or light accents.

accent

Utilize #A0522D for calls to action, important highlights, or a touch of earthy warmth.

background

Employ #F5F5DC, establishing a soft, natural, and comfortable foundational canvas.

text

For body text, use #8B7355 or a dark charcoal, ensuring good contrast on lighter backgrounds.

Accessibility notes

Use #8B7355 or #A0522D for text on #F5F5DC and #D3D3D3 for optimal readability.
Be cautious with #C0C0C0 for text on light backgrounds; it might lack sufficient contrast for accessibility.
Ensure interactive elements are clearly distinguishable through color contrast.
Avoid placing light text on #8B7355 or #A0522D unless it's pure white for maximum contrast.

Recommended combinations

Sandy & Warm

Ideal for natural website layouts, soft branding, and inviting content displays.

#F5F5DC · #D3D3D3 · #8B7355

Earthy Accent

Combine for a light background with a strong accent and secondary gray element.

#F5F5DC · #A0522D · #C0C0C0

Pebble & Wood

Effective for layered UI components, subtle depth, and textured visual elements.

#D3D3D3 · #C0C0C0 · #8B7355

CSS variables

:root {
  --seaside-driftwood-whisper-2-1: #8B7355;
  --seaside-driftwood-whisper-2-2: #A0522D;
  --seaside-driftwood-whisper-2-3: #C0C0C0;
  --seaside-driftwood-whisper-2-4: #D3D3D3;
  --seaside-driftwood-whisper-2-5: #F5F5DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaside-driftwood-whisper-2": {
        1: "#8B7355",
        2: "#A0522D",
        3: "#C0C0C0",
        4: "#D3D3D3",
        5: "#F5F5DC",
      }
    }
  }
}

Hex values

Color 1#8B7355

Color 2#A0522D

Color 3#C0C0C0

Color 4#D3D3D3

Color 5#F5F5DC

Accessibility

Contrast checker

1.3:1Fail

2.5:1Fail

3:1Fail

4.1:1AA18

1.3:1Fail

3.1:1AA18

3.8:1AA18

5.1:1AA

2.5:1Fail

3.1:1AA18

1.2:1Fail

1.6:1Fail

3:1Fail

3.8:1AA18

1.2:1Fail

1.4:1Fail

4.1:1AA18

5.1:1AA

1.6:1Fail

1.4:1Fail

Similar palettes

More like Seaside Driftwood Whisper

View all neutral

Seaside Driftwood Muted

Coastal Driftwood Grey

Coastal Driftwood Sands

Coastal Driftwood Shore

Coastal Fog Blanket

Seafoam Driftwood Strand