Palette

Coastal Driftwood

Reflects the muted, natural tones of weathered wood and soft sands found 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 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

#8B4513#CD853F#F5DEB3#B0C4DE#778899

Palette guide

How to use Coastal Driftwood

Overview

The "Coastal Driftwood" palette beautifully reflects the muted, natural tones of weathered wood and soft sands found on a quiet beach, with a refreshing hint of the sea. This versatile collection blends rich browns like #8B4513 and #CD853F with the airy beige of #F5DEB3. The unexpected cool blues of #B0C4DE and #778899 introduce a serene ocean element, creating a balanced and dynamic aesthetic. This palette is ideal for designers seeking to convey natural authenticity, rustic charm, and a harmonious connection between earth and sea, perfect for inviting and sophisticated designs.

Best used for

Coastal-themed interior design
Eco-friendly product packaging
Outdoor adventure brand marketing
E-commerce for natural home goods
Travel and tourism websites (beach destinations)
Photography portfolios (nature, ocean)

Suggested color roles

primary

Use #8B4513 for main sections, headers, or prominent UI elements, establishing a strong, earthy foundation.

secondary

Apply #778899 for supporting content blocks, subheadings, or subtle background variations, introducing a calming cool note.

accent

The warm #CD853F serves well for gentle accents, interactive elements, or decorative flourishes, providing an inviting pop.

background

Employ #F5DEB3 as the primary background color, providing a clean, expansive, and softly illuminated canvas.

text

Use #8B4513 for body text and navigation links to ensure excellent readability against the lighter backgrounds.

Accessibility notes

Ensure #8B4513 text has excellent contrast against #F5DEB3 and #CD853F backgrounds for WCAG AA compliance.
Text in #778899 will need a light background like #F5DEB3 for readability.
Avoid using #F5DEB3 or #B0C4DE for text directly, as they are too light for general readability.
When using text on darker shades, ensure a very light text color (e.g., white or #F5DEB3) is used for optimal contrast.

Recommended combinations

Earth & Sea

Creates a striking contrast between warm earth and cool sky/sea, ideal for captivating hero sections or brand identity.

#8B4513 · #B0C4DE · #F5DEB3

Sandy Shores

Perfect for soft, inviting backgrounds or layered UI elements, evoking the calm of a sandy beach with a distant ocean.

#CD853F · #F5DEB3 · #778899

Weathered Balance

Best for demonstrating depth and texture, suitable for complex data visualizations or multi-tiered navigation.

#778899 · #8B4513 · #B0C4DE

CSS variables

:root {
  --coastal-driftwood-1: #8B4513;
  --coastal-driftwood-2: #CD853F;
  --coastal-driftwood-3: #F5DEB3;
  --coastal-driftwood-4: #B0C4DE;
  --coastal-driftwood-5: #778899;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-driftwood": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#F5DEB3",
        4: "#B0C4DE",
        5: "#778899",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#CD853F

Color 3#F5DEB3

Color 4#B0C4DE

Color 5#778899

Accessibility

Contrast checker

2.4:1Fail

5.4:1AA

4:1AA18

1.9:1Fail

2.4:1Fail

2.3:1Fail

1.7:1Fail

1.2:1Fail

5.4:1AA

2.3:1Fail

1.4:1Fail

2.8:1Fail

4:1AA18

1.7:1Fail

1.4:1Fail

2:1Fail

1.9:1Fail

1.2:1Fail

2.8:1Fail

2:1Fail

Similar palettes

More like Coastal Driftwood