Back to palettes

Palette

Coastal Driftwood

Subtle browns and greys mimic the weathered textures of ancient driftwood found on a quiet, sandy beach.

neutralnatural5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8C7C6D#B3A599#D9CCC4#6E6056#524840

Palette guide

How to use Coastal Driftwood

Overview

The "Coastal Driftwood" palette beautifully captures the subtle, weathered textures of ancient wood found on a quiet, sandy beach. This collection features a sophisticated range of muted browns and greys, from the deep, grounding #524840 to the soft, airy #D9CCC4. Mid-tones like #8C7C6D, #B3A599, and #6E6056 offer rich, natural variations that evoke the sun-bleached and sea-worn character of driftwood. This palette is ideal for designers seeking to convey a sense of natural elegance, rustic charm, and enduring tranquility, perfect for projects that value organic aesthetics and a timeless feel.

Best used for

  • Sustainable furniture brands
  • Rustic interior design and decor
  • Craft brewery or distillery branding
  • Eco-friendly outdoor apparel
  • Heritage brand revitalization
  • Natural product packaging

Suggested color roles

primary

Use #6E6056 for main headers, prominent UI elements, or sections requiring a solid, warm presence.

secondary

Apply #8C7C6D for supporting content, subheadings, or background accents, providing a slightly lighter, cohesive tone.

accent

The darkest shade, #524840, is excellent for strong accents, important text, or call-to-actions, ensuring high impact and readability.

background

Employ #D9CCC4 as the primary background color, offering a soft, muted, and expansive canvas.

text

Use #524840 for body text and navigation links, ensuring excellent readability against the lighter background tones.

Accessibility notes

  • Ensure #524840 text on #D9CCC4 and #B3A599 backgrounds meets WCAG AA contrast standards.
  • Avoid using #D9CCC4 or #B3A599 for text, as they are too light for general readability.
  • When using text on darker shades like #6E6056 or #8C7C6D, ensure a very light text color (e.g., white or #D9CCC4) is used.
  • For interactive elements, maintain clear visual cues beyond color, especially with these subtly varying neutrals.

Recommended combinations

Weathered Wood

Creates a strong, natural contrast, ideal for headers, footers, or sections needing a grounded yet refined look.

#524840 · #D9CCC4 · #8C7C6D

Beach Sands

Perfect for soft, inviting backgrounds or layered UI elements, evoking the calm of a sandy shore.

#B3A599 · #D9CCC4 · #6E6056

Deep Grain

Best for rich, textured sections or detailed content blocks where depth and a natural feel are paramount.

#6E6056 · #8C7C6D · #524840

CSS variables

:root {
  --coastal-driftwood-2-1: #8C7C6D;
  --coastal-driftwood-2-2: #B3A599;
  --coastal-driftwood-2-3: #D9CCC4;
  --coastal-driftwood-2-4: #6E6056;
  --coastal-driftwood-2-5: #524840;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-driftwood-2": {
        1: "#8C7C6D",
        2: "#B3A599",
        3: "#D9CCC4",
        4: "#6E6056",
        5: "#524840",
      }
    }
  }
}

Related searches

driftwood color paletteweathered wood hex codesnatural brown grey schemerustic coastal neutralscalm earthy design colors

Palette colors

Hex values

Color 1#8C7C6D
·
Color 2#B3A599
·
Color 3#D9CCC4
·
Color 4#6E6056
·
Color 5#524840
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.6:1Fail
1.5:1Fail
2.2:1Fail
2
1.7:1Fail
1.5:1Fail
2.5:1Fail
3.7:1AA18
3
2.6:1Fail
1.5:1Fail
3.9:1AA18
5.7:1AA
4
1.5:1Fail
2.5:1Fail
3.9:1AA18
1.5:1Fail
5
2.2:1Fail
3.7:1AA18
5.7:1AA
1.5:1Fail

Similar palettes

More like Coastal Driftwood

View all neutral