Back to palettes

Palette

Coastal Wood Grain

Muted, weathered browns and greys that reflect the peaceful, sun-bleached beauty of driftwood on a quiet beach.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9E8C78#B8A89A#D1C5BD#E8E2DD#F9F7F5

Palette guide

How to use Coastal Wood Grain

Overview

The Coastal Wood Grain palette offers a sophisticated collection of muted, earthy tones, perfectly capturing the serene beauty of weathered driftwood and sun-bleached shores. With hues ranging from the deep #9E8C78 to the almost-white #F9F7F5, this palette provides a natural and calming aesthetic. Designers can utilize #B8A89A for a balanced mid-tone, while #D1C5BD offers a lighter, softer option for backgrounds or secondary elements. The subtle #E8E2DD adds a touch of creamy warmth. This palette is ideal for projects seeking a grounded, organic, and timeless feel, from rustic branding to minimalist web interfaces.

Best used for

  • Eco-friendly product branding
  • Natural beauty and skincare packaging
  • Rustic home decor websites
  • Artisan craft businesses
  • Minimalist interior design concepts
  • Sustainable fashion labels

Suggested color roles

primary

#9E8C78 - A rich, earthy brown that provides a strong, natural foundation for headers, prominent sections, or key brand elements.

secondary

#B8A89A - A lighter, warm gray-brown that complements the primary, suitable for subheadings, content containers, or supporting graphics.

accent

#D1C5BD - A soft, muted beige-gray that can be used for subtle highlights, interactive states, or delicate graphic details, adding refinement.

background

#F9F7F5 - A very light, creamy off-white that creates a clean, warm, and expansive canvas, allowing other colors to gently emerge.

text

For body text on #F9F7F5, use a dark brown or charcoal for clear readability. For headings on #9E8C78, white or a very pale cream is recommended.

Accessibility notes

  • Ensure sufficient contrast when placing text on mid-tones like #B8A89A; dark text is generally preferred.
  • The lightest shades, #E8E2DD and #F9F7F5, work best as backgrounds for dark text rather than for light text.
  • For interactive elements, use distinct contrast between states, e.g., #9E8C78 for default and #B8A89A for hover.
  • Avoid using #D1C5BD as a primary text color on light backgrounds without careful WCAG AA verification.

Recommended combinations

Driftwood Textures

Creates a natural, layered background with #F9F7F5 as base, #E8E2DD for subtle overlays, and #9E8C78 for strong accents or text.

#F9F7F5 · #E8E2DD · #9E8C78

Sandy Path

Excellent for gradients or progressive shading, moving from light to dark for depth in illustrations or UI components.

#D1C5BD · #B8A89A · #9E8C78

Weathered Plank

Use #E8E2DD for a clean background, #9E8C78 for bold elements, and #B8A89A for supporting details or borders.

#E8E2DD · #9E8C78 · #B8A89A

CSS variables

:root {
  --coastal-wood-grain-1: #9E8C78;
  --coastal-wood-grain-2: #B8A89A;
  --coastal-wood-grain-3: #D1C5BD;
  --coastal-wood-grain-4: #E8E2DD;
  --coastal-wood-grain-5: #F9F7F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-wood-grain": {
        1: "#9E8C78",
        2: "#B8A89A",
        3: "#D1C5BD",
        4: "#E8E2DD",
        5: "#F9F7F5",
      }
    }
  }
}

Related searches

earthy neutral color paletteweathered wood tonesnatural coastal brandingminimalist brown and beigecalm rustic colors

Palette colors

Hex values

Color 1#9E8C78
·
Color 2#B8A89A
·
Color 3#D1C5BD
·
Color 4#E8E2DD
·
Color 5#F9F7F5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.9:1Fail
2.5:1Fail
3:1AA18
2
1.4:1Fail
1.4:1Fail
1.8:1Fail
2.2:1Fail
3
1.9:1Fail
1.4:1Fail
1.3:1Fail
1.6:1Fail
4
2.5:1Fail
1.8:1Fail
1.3:1Fail
1.2:1Fail
5
3:1AA18
2.2:1Fail
1.6:1Fail
1.2:1Fail

Similar palettes

More like Coastal Wood Grain

View all earth
Coastal Dune Breeze
Aged Timber Charm
Coastal Clay Hues
Coastal Driftwood Sands
Coastal Dune Breeze
Coastal Dune Grass