Back to palettes

Palette

Weathered Boat Wood

Reflects the muted, faded tones of old, weathered boat wood on a quiet coast.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Weathered Boat Wood 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 Boat Wood.

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

Data visualization

#8C6F57#B49B86#D0C6B8#604F3D#3F332B

Palette guide

How to use Weathered Boat Wood

Overview

The Weathered Boat Wood palette evokes the serene, muted tones of aged timber found on a quiet coast. This earthy collection features a versatile primary brown, #8C6F57, complemented by the softer, sun-bleached #B49B86. Deep, grounding accents like #3F332B provide essential contrast, while #D0C6B8 offers a light, neutral canvas. Ideal for designers seeking a rustic yet refined aesthetic, this palette is perfect for conveying authenticity, history, and natural elegance. Developers will find its range of dark to light shades useful for creating accessible interfaces that exude warmth and a timeless, organic feel. The subtle transitions between hues ensure a harmonious visual experience.

Best used for

  • Rustic home decor and furniture design
  • Coastal-themed branding and packaging
  • Artisan craft and handmade product websites
  • Natural beauty and organic product lines
  • Historical or heritage site branding
  • Cozy cafe or restaurant interiors

Suggested color roles

primary

Use #8C6F57 as a warm, inviting base for large sections or brand identity.

secondary

Employ #B49B86 for complementary elements, backgrounds, or secondary navigation, offering a lighter wood tone.

accent

Apply #604F3D for strong call-to-action buttons, important headers, or subtle graphical details to add depth.

background

Utilize #D0C6B8 as a soft, neutral canvas for content areas, ensuring readability and an airy feel.

text

Choose #3F332B for primary body text, ensuring excellent contrast and a grounded, natural feel.

Accessibility notes

  • Ensure #3F332B text has sufficient contrast against lighter backgrounds like #D0C6B8 and #B49B86.
  • Use lighter colors like #D0C6B8 for text on darker backgrounds such as #3F332B or #604F3D.
  • Avoid placing #B49B86 text on #D0C6B8 for small font sizes due to potential low contrast.
  • Prioritize large font sizes or bolding when using mid-tone colors like #8C6F57 for text.

Recommended combinations

Rustic Depth

Creates a rich, layered natural feel; ideal for headers, primary content, and detailed elements.

#3F332B · #8C6F57 · #B49B86

Faded Coastal

Offers a lighter, airy, and sun-bleached aesthetic, perfect for backgrounds and subtle accents.

#D0C6B8 · #B49B86 · #604F3D

Earthy Warmth

Emphasizes warmth and traditional elegance, suitable for branding and inviting user interfaces.

#8C6F57 · #604F3D · #D0C6B8

CSS variables

:root {
  --weathered-boat-wood-1: #8C6F57;
  --weathered-boat-wood-2: #B49B86;
  --weathered-boat-wood-3: #D0C6B8;
  --weathered-boat-wood-4: #604F3D;
  --weathered-boat-wood-5: #3F332B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "weathered-boat-wood": {
        1: "#8C6F57",
        2: "#B49B86",
        3: "#D0C6B8",
        4: "#604F3D",
        5: "#3F332B",
      }
    }
  }
}

Related searches

weathered wood color schemerustic brown palettecoastal muted colorsold boat wood tonesearthy neutral designs

Palette colors

Hex values

Color 1#8C6F57
·
Color 2#B49B86
·
Color 3#D0C6B8
·
Color 4#604F3D
·
Color 5#3F332B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.8:1Fail
1.7:1Fail
2.6:1Fail
2
1.8:1Fail
1.6:1Fail
3:1Fail
4.6:1AA
3
2.8:1Fail
1.6:1Fail
4.6:1AA
7.2:1AAA
4
1.7:1Fail
3:1Fail
4.6:1AA
1.6:1Fail
5
2.6:1Fail
4.6:1AA
7.2:1AAA
1.6:1Fail

Similar palettes

More like Weathered Boat Wood

View all earth