Palette

Weathered Coastal Timber

Muted, sun-bleached tones inspired by the timeless beauty of driftwood on a serene beach.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9E8F7A#C7BBAA#7E7060#4F473E#DED5C9

Palette guide

How to use Weathered Coastal Timber

Overview

Inspired by sun-bleached driftwood, the Weathered Coastal Timber palette offers a harmonious blend of muted, natural tones. Its primary shade, #9E8F7A, provides a soft, inviting base, beautifully complemented by the lighter #C7BBAA. Deeper tones like #4F473E add essential grounding and depth, while the almost-white #DED5C9 serves as a clean, airy background. This palette is a go-to for designers aiming to create serene, organic, and minimalist aesthetics. Developers can leverage its subtle variations to build interfaces that feel calm and sophisticated, ensuring readability and a gentle, natural user experience across various elements.

Best used for

Spa and wellness brand identity
Sustainable and eco-friendly product packaging
Minimalist website and app design
Serene interior decor concepts
Natural photography backdrops and themes
Artisan and handmade goods branding

Suggested color roles

primary

Use #9E8F7A as a soft, inviting base for main content areas or brand headers.

secondary

Employ #C7BBAA for secondary elements, navigation, or subtle visual breaks to maintain lightness.

accent

Apply #7E7060 for subtle grounding elements, strong call-to-actions, or to add a touch of warmth and depth.

background

Utilize #DED5C9 as a very light, clean canvas for content, ensuring maximum readability.

text

Choose #4F473E for primary body text, offering strong contrast and a natural, sophisticated feel.

Accessibility notes

Ensure #4F473E text on #DED5C9 or #C7BBAA provides sufficient contrast for readability.
Use lighter colors like #DED5C9 for text on darker backgrounds such as #4F473E or #7E7060.
Avoid small text in #C7BBAA on #DED5C9, as contrast may be insufficient.
Prioritize larger font sizes or bolding for mid-tone colors like #9E8F7A when used for text.

Recommended combinations

Driftwood Essence

Captures the core natural tones of aged wood, ideal for content blocks and visual hierarchy.

#4F473E · #9E8F7A · #C7BBAA

Coastal Serenity

Creates a light, airy, and peaceful ambiance, perfect for backgrounds and subtle visual cues.

#DED5C9 · #C7BBAA · #7E7060

Deep Timber

Provides a stronger, grounded natural look, suitable for headers or important sections requiring emphasis.

#7E7060 · #4F473E · #9E8F7A

CSS variables

:root {
  --weathered-coastal-timber-1: #9E8F7A;
  --weathered-coastal-timber-2: #C7BBAA;
  --weathered-coastal-timber-3: #7E7060;
  --weathered-coastal-timber-4: #4F473E;
  --weathered-coastal-timber-5: #DED5C9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "weathered-coastal-timber": {
        1: "#9E8F7A",
        2: "#C7BBAA",
        3: "#7E7060",
        4: "#4F473E",
        5: "#DED5C9",
      }
    }
  }
}

Hex values

Color 1#9E8F7A

Color 2#C7BBAA

Color 3#7E7060

Color 4#4F473E

Color 5#DED5C9

Accessibility

Contrast checker

1.7:1Fail

1.5:1Fail

2.9:1Fail

2.2:1Fail

1.7:1Fail

2.5:1Fail

4.8:1AA

1.3:1Fail

1.5:1Fail

2.5:1Fail

1.9:1Fail

3.3:1AA18

2.9:1Fail

4.8:1AA

1.9:1Fail

6.3:1AA

2.2:1Fail

1.3:1Fail

3.3:1AA18

6.3:1AA

Similar palettes

More like Weathered Coastal Timber

Coastal Driftwood Sands

Coastal Dune Breeze