Palette

Coastal Driftwood Sands

Evokes the weathered beauty of driftwood and the soft, sun-bleached tones of coastal sands.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Driftwood Sands 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 Sands.

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

Data visualization

#8B4513#CD853F#D2B48C#DEB887#F5F5DC

Palette guide

How to use Coastal Driftwood Sands

Overview

The "Coastal Driftwood Sands" palette beautifully evokes the weathered beauty of driftwood and the soft, sun-bleached tones of coastal sands. This rich collection ranges from the deep, robust #8B4513 to the airy, near-white #F5F5DC. The intermediate shades of #CD853F, #D2B48C, and #DEB887 provide a luminous gradient, ideal for creating depth and warmth in any design. This palette is perfect for designers seeking to convey natural authenticity, rustic charm, and a timeless connection to the earth and sea, evoking a sense of calm and organic elegance.

Best used for

Beach house interior design
Natural beauty and skincare brands
E-commerce for artisanal crafts
Outdoor and adventure lifestyle blogs
Photography portfolios (nature, travel)
Eco-friendly home goods marketing

Suggested color roles

primary

Use #CD853F for main sections, headers, or prominent UI elements, establishing a strong, warm foundation.

secondary

Apply #D2B48C for supporting content blocks, subheadings, or subtle background variations, adding a brighter, inviting warmth.

accent

The deepest shade, #8B4513, serves well for strong accents, important icons, or call-to-action elements, ensuring high impact and readability.

background

Employ #F5F5DC 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 #F5F5DC, #DEB887
Avoid using #F5F5DC or #DEB887 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 #F5F5DC) is used for optimal contrast.
This palette offers good contrast opportunities within its range, making accessible pairings straightforward.

Recommended combinations

Sandy Drift

Creates a strong, natural contrast, perfect for headers, footers, or sections needing a grounded yet refined presence.

#8B4513 · #F5F5DC · #CD853F

Sun-Bleached

Ideal for soft, inviting backgrounds or layered UI elements, evoking the calm of sun-drenched sands.

#D2B48C · #DEB887 · #F5F5DC

Earthy Depth

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

#CD853F · #8B4513 · #D2B48C

CSS variables

:root {
  --coastal-driftwood-sands-2-1: #8B4513;
  --coastal-driftwood-sands-2-2: #CD853F;
  --coastal-driftwood-sands-2-3: #D2B48C;
  --coastal-driftwood-sands-2-4: #DEB887;
  --coastal-driftwood-sands-2-5: #F5F5DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-driftwood-sands-2": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#D2B48C",
        4: "#DEB887",
        5: "#F5F5DC",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#CD853F

Color 3#D2B48C

Color 4#DEB887

Color 5#F5F5DC

Accessibility

Contrast checker

2.4:1Fail

3.6:1AA18

3.8:1AA18

6.4:1AA

2.4:1Fail

1.5:1Fail

1.6:1Fail

2.7:1Fail

3.6:1AA18

1.5:1Fail

1.1:1Fail

1.8:1Fail

3.8:1AA18

1.6:1Fail

1.1:1Fail

1.7:1Fail

6.4:1AA

2.7:1Fail

1.8:1Fail

1.7:1Fail

Similar palettes

More like Coastal Driftwood Sands

Farmhouse Barnwood Charm

Golden Aegean Sands

Rustic Barn Wood