Back to palettes

Palette

Coastal Driftwood Shore

Muted, soft neutrals inspired by sun-bleached driftwood, warm sand, and the calming presence of the sea.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Driftwood 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 Coastal Driftwood Shore.

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

Data visualization

#A39B8F#C7C1B9#E3DCD5#F5F2EF#7F776B

Palette guide

How to use Coastal Driftwood Shore

Overview

The "Coastal Driftwood Shore" palette presents a serene collection of muted, soft neutrals, inspired by sun-bleached driftwood, warm sand, and the calming presence of the sea. This harmonious gradient moves from the grounding #7F776B to the airy, near-white #F5F2EF. The intermediate shades of #A39B8F, #C7C1B9, and #E3DCD5 provide a smooth, consistent transition, ideal for creating depth and subtle warmth in any design. This palette is perfect for designers seeking a calm, minimalist, and serene aesthetic, conveying peace, sophistication, and a timeless appeal with its balanced neutral tones.

Best used for

  • Minimalist web and app design
  • Luxury spa and wellness branding
  • High-end home decor and furniture
  • Architectural visualization
  • Art gallery exhibition materials
  • Sustainable fashion lookbooks

Suggested color roles

primary

Use #A39B8F for main sections, headers, or prominent UI elements, establishing a stable, warm-neutral foundation.

secondary

Apply #C7C1B9 for supporting content blocks, subheadings, or subtle background variations, maintaining a cohesive soft tone.

accent

The darkest shade, #7F776B, serves well for strong accents, important icons, or call-to-action elements, ensuring high impact and readability.

background

Employ #F5F2EF as the primary background color, providing a clean, expansive, and softly illuminated canvas.

text

Use #7F776B for body text and navigation links to ensure excellent readability against the lighter backgrounds.

Accessibility notes

  • Ensure #7F776B text has excellent contrast against #F5F2EF, #E3DCD5, and #C7C1B9 backgrounds for WCAG AA compliance.
  • Avoid using #F5F2EF or #E3DCD5 for text directly, as they are too light for general readability.
  • When using text on darker shades, ensure a very light text color (e.g., white or #F5F2EF) is used for optimal contrast.
  • This palette offers good contrast opportunities within its range, making accessible pairings straightforward.

Recommended combinations

Serene Shore

Creates a strong, classic contrast, perfect for headers, footers, or sections needing a grounded yet refined presence.

#7F776B · #F5F2EF · #A39B8F

Sandy Layers

Ideal for subtle, layered backgrounds or soft UI elements, providing depth without overwhelming the design.

#C7C1B9 · #E3DCD5 · #F5F2EF

Weathered Calm

Best for demonstrating depth and texture, suitable for complex data visualizations or multi-tiered navigation.

#A39B8F · #7F776B · #C7C1B9

CSS variables

:root {
  --coastal-driftwood-shore-1: #A39B8F;
  --coastal-driftwood-shore-2: #C7C1B9;
  --coastal-driftwood-shore-3: #E3DCD5;
  --coastal-driftwood-shore-4: #F5F2EF;
  --coastal-driftwood-shore-5: #7F776B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-driftwood-shore": {
        1: "#A39B8F",
        2: "#C7C1B9",
        3: "#E3DCD5",
        4: "#F5F2EF",
        5: "#7F776B",
      }
    }
  }
}

Related searches

driftwood neutral palettecalm coastal hex codesserene beach color schememinimalist warm grey designsandy muted tones

Palette colors

Hex values

Color 1#A39B8F
·
Color 2#C7C1B9
·
Color 3#E3DCD5
·
Color 4#F5F2EF
·
Color 5#7F776B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2:1Fail
2.5:1Fail
1.6:1Fail
2
1.5:1Fail
1.3:1Fail
1.6:1Fail
2.5:1Fail
3
2:1Fail
1.3:1Fail
1.2:1Fail
3.3:1AA18
4
2.5:1Fail
1.6:1Fail
1.2:1Fail
4:1AA18
5
1.6:1Fail
2.5:1Fail
3.3:1AA18
4:1AA18

Similar palettes

More like Coastal Driftwood Shore

View all neutral
Driftwood Shore Breeze
Coastal Driftwood Grey
Coastal Driftwood Grey
Coastal Driftwood Sands
Coastal Fog Drift
Seashore Stone Calm