Palette

Oceanic Driftwood Shore

Muted, sun-bleached tones reminiscent of weathered driftwood scattered along a peaceful shore.

NeutralCalm5 colors

More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B7E66#A09580#C7BFB0#E8E4DB#5F5649

Palette guide

How to use Oceanic Driftwood Shore

Overview

The Oceanic Driftwood Shore palette offers muted, sun-bleached tones reminiscent of weathered driftwood scattered along a peaceful beach. Featuring earthy hues from the deep #5F5649 (Dark Brown) to the serene #8B7E66, #A09580, and #C7BFB0, culminating in the airy #E8E4DB, this collection is perfect for designers and developers seeking a calm, natural, and sophisticated aesthetic. It evokes tranquility and organic beauty, making it ideal for projects that require a grounded, minimalist, or artisanal feel. The palette’s gentle contrasts and harmonious blend of neutrals ensure a timeless and elegant design, suitable for conveying authenticity and understated luxury.

Best used for

Eco-friendly product branding
Spa and wellness websites
Handcrafted goods e-commerce
Interior design portfolios
Sustainable fashion lines
Nature photography showcases

Suggested color roles

primary

Use #5F5649 (Dark Brown) for strong foundational elements, providing an anchor of natural depth.

secondary

Apply #8B7E66 to main content blocks or navigation, offering a warm, muted base.

accent

Employ #A09580 or #C7BFB0 for subtle highlights, interactive elements, or to add gentle texture.

background

Utilize #E8E4DB for a clean, airy, and calming background that allows other elements to breathe.

text

For optimal readability, use #5F5649 (Dark Brown) or a dark charcoal on lighter backgrounds. White text is suitable for #5F5649.

Accessibility notes

Ensure sufficient contrast when pairing lighter neutrals like #C7BFB0 with text; dark text is usually required.
Always use dark text (charcoal or #5F5649) on #E8E4DB for maximum readability.
Be mindful of contrast when using #A09580 on #8B7E66 for text, as they are close in value.
The darkest color, #5F5649, provides excellent contrast for white or very light text.

Recommended combinations

Beach Sands

Ideal for clean, minimalist layouts, backgrounds, or subtle graphical elements.

#E8E4DB · #C7BFB0 · #A09580

Weathered Wood

Excellent for headers, footers, or content blocks that need a grounded, natural feel.

#5F5649 · #8B7E66 · #A09580

Coastal Harmony

Provides a balanced contrast for calls to action or distinct sections, combining light and dark.

#E8E4DB · #5F5649 · #C7BFB0

CSS variables

:root {
  --oceanic-driftwood-shore-1: #8B7E66;
  --oceanic-driftwood-shore-2: #A09580;
  --oceanic-driftwood-shore-3: #C7BFB0;
  --oceanic-driftwood-shore-4: #E8E4DB;
  --oceanic-driftwood-shore-5: #5F5649;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-driftwood-shore": {
        1: "#8B7E66",
        2: "#A09580",
        3: "#C7BFB0",
        4: "#E8E4DB",
        5: "#5F5649",
      }
    }
  }
}

Hex values

Color 1#8B7E66

Color 2#A09580

Color 3#C7BFB0

Color 4#E8E4DB

Color 5#5F5649

Accessibility

Contrast checker

1.3:1Fail

2.2:1Fail

3.1:1AA18

1.8:1Fail

1.3:1Fail

1.6:1Fail

2.3:1Fail

2.4:1Fail

2.2:1Fail

1.6:1Fail

1.4:1Fail

3.9:1AA18

3.1:1AA18

2.3:1Fail

1.4:1Fail

5.7:1AA

1.8:1Fail

2.4:1Fail

3.9:1AA18

5.7:1AA

Similar palettes

More like Oceanic Driftwood Shore

Seaside Driftwood Shingles

Ancient Temple Serene

Clouded Moon Reflection