Back to palettes

Palette

Seaside Driftwood Calm

Soft, weathered tones reflecting the quiet beauty of driftwood and sun-bleached stones on a peaceful beach.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8A7B6D#A29489#BCC7C7#D9E1E1#5B6B6D

Palette guide

How to use Seaside Driftwood Calm

Overview

The "Seaside Driftwood Calm" palette offers a harmonious blend of soft, weathered tones, reflecting the quiet beauty of driftwood and sun-bleached stones on a peaceful beach. This collection features serene grays like #BCC7C7 and #D9E1E1, alongside earthy browns such as #A29489 and #8A7B6D, with a deep accent #5B6B6D. It's ideal for designers seeking to evoke a calm, natural, and sophisticated aesthetic in various design projects, from web interfaces to interior decor, creating a grounded yet airy feel.

Best used for

  • Coastal living brand identity
  • Serene web and mobile app design
  • Mindful product packaging
  • Spa and wellness environments
  • Minimalist interior decor
  • Calm and natural digital interfaces

Suggested color roles

primary

Use #D9E1E1 for a clean, airy foundational background, setting a tranquil mood.

secondary

Apply #BCC7C7 for content panels, subtle navigation elements, or secondary sections.

accent

Utilize #5B6B6D for impactful headings, strong links, or feature highlights, providing depth.

background

Employ #D9E1E1 to establish a light, expansive, and natural canvas.

text

For primary body text, use #5B6B6D or #8A7B6D, ensuring good readability on lighter backgrounds.

Accessibility notes

  • Ensure #5B6B6D or #8A7B6D is used for text on #D9E1E1 and #BCC7C7 backgrounds for good contrast.
  • Be mindful of contrast when using #A29489 for text, especially on lighter shades; test readability.
  • Headings using #5B6B6D will provide strong visual hierarchy and stand out well.
  • Avoid placing light text on #A29489 or #8A7B6D without verifying sufficient contrast ratios.

Recommended combinations

Light & Serene

Perfect for clean website layouts, minimal branding, and subtle content blocks.

#D9E1E1 · #BCC7C7 · #A29489

Deep Coastal

Combine for stronger branding elements, text on light backgrounds, and impactful accents.

#8A7B6D · #5B6B6D · #D9E1E1

Balanced Driftwood

Effective for layered UI components, subtle depth, and harmonious color transitions.

#BCC7C7 · #A29489 · #5B6B6D

CSS variables

:root {
  --seaside-driftwood-calm-1: #8A7B6D;
  --seaside-driftwood-calm-2: #A29489;
  --seaside-driftwood-calm-3: #BCC7C7;
  --seaside-driftwood-calm-4: #D9E1E1;
  --seaside-driftwood-calm-5: #5B6B6D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaside-driftwood-calm": {
        1: "#8A7B6D",
        2: "#A29489",
        3: "#BCC7C7",
        4: "#D9E1E1",
        5: "#5B6B6D",
      }
    }
  }
}

Related searches

calm coastal colorsweathered neutral palettepeaceful driftwood tonesserene beach palettenatural grey brown

Palette colors

Hex values

Color 1#8A7B6D
·
Color 2#A29489
·
Color 3#BCC7C7
·
Color 4#D9E1E1
·
Color 5#5B6B6D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.4:1Fail
3.1:1AA18
1.4:1Fail
2
1.4:1Fail
1.7:1Fail
2.2:1Fail
1.9:1Fail
3
2.4:1Fail
1.7:1Fail
1.3:1Fail
3.2:1AA18
4
3.1:1AA18
2.2:1Fail
1.3:1Fail
4.2:1AA18
5
1.4:1Fail
1.9:1Fail
3.2:1AA18
4.2:1AA18

Similar palettes

More like Seaside Driftwood Calm

View all neutral
Coastal Driftwood Grey
Coastal Driftwood Sands
Coastal Dune Breeze
Coastal Seagrass Sway
Seaside Driftwood Muted
Ancient Grove Hush