Back to palettes

Palette

Coastal Driftwood Sands

Soft, weathered browns and greys that echo the sun-bleached hues of driftwood on a tranquil beach.

neutralcalm5 colors
More neutral 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

#BBA79E#E0D1CB#99877E#7A6F68#CCBCB3

Palette guide

How to use Coastal Driftwood Sands

Overview

The "Coastal Driftwood Sands" palette offers a soothing array of soft, weathered browns and greys, echoing the sun-bleached hues of driftwood on a tranquil beach. This collection ranges from the deep, grounding #7A6F68 to the airy, near-white #E0D1CB. The intermediate shades of #BBA79E, #99877E, and #CCBCB3 provide a harmonious gradient, ideal for creating depth and subtle warmth in any design. This palette is perfect for designers seeking to convey calm, authenticity, and a connection to natural elements, ideal for sophisticated and inviting designs with an organic feel.

Best used for

  • Spa and wellness branding
  • Minimalist interior design concepts
  • Handmade ceramics or textile art
  • E-commerce for natural home goods
  • Photography portfolios (landscape, still life)
  • Sustainable fashion lookbooks

Suggested color roles

primary

Use #99877E for main sections, headers, or prominent UI elements, establishing a stable, warm-neutral foundation.

secondary

Apply #BBA79E for supporting content blocks, subheadings, or subtle background variations, maintaining a cohesive soft tone.

accent

The darkest shade, #7A6F68, serves well for strong accents, important icons, or call-to-action elements, ensuring high impact and readability.

background

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

text

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

Accessibility notes

  • Ensure #7A6F68 text has excellent contrast against #E0D1CB, #CCBCB3, and #BBA79E backgrounds for WCAG AA compliance.
  • Avoid using #E0D1CB or #CCBCB3 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 #E0D1CB) is used for optimal contrast.
  • This palette offers good contrast opportunities within its range, making accessible pairings straightforward.

Recommended combinations

Tranquil Sands

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

#7A6F68 · #E0D1CB · #99877E

Driftwood Hues

Ideal for soft, layered backgrounds or subtle UI elements, evoking the calm of sun-bleached wood.

#BBA79E · #CCBCB3 · #E0D1CB

Earthy Depth

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

#99877E · #7A6F68 · #BBA79E

CSS variables

:root {
  --coastal-driftwood-sands-3-1: #BBA79E;
  --coastal-driftwood-sands-3-2: #E0D1CB;
  --coastal-driftwood-sands-3-3: #99877E;
  --coastal-driftwood-sands-3-4: #7A6F68;
  --coastal-driftwood-sands-3-5: #CCBCB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-driftwood-sands-3": {
        1: "#BBA79E",
        2: "#E0D1CB",
        3: "#99877E",
        4: "#7A6F68",
        5: "#CCBCB3",
      }
    }
  }
}

Related searches

driftwood beige brown palettecalm coastal neutralsweathered sand hex codesserene earthy designmuted beach color scheme

Palette colors

Hex values

Color 1#BBA79E
·
Color 2#E0D1CB
·
Color 3#99877E
·
Color 4#7A6F68
·
Color 5#CCBCB3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.5:1Fail
2.1:1Fail
1.2:1Fail
2
1.5:1Fail
2.3:1Fail
3.3:1AA18
1.2:1Fail
3
1.5:1Fail
2.3:1Fail
1.4:1Fail
1.9:1Fail
4
2.1:1Fail
3.3:1AA18
1.4:1Fail
2.7:1Fail
5
1.2:1Fail
1.2:1Fail
1.9:1Fail
2.7:1Fail

Similar palettes

More like Coastal Driftwood Sands

View all neutral
Seaside Driftwood Calm
Coastal Driftwood Grey
Coastal Driftwood Grey
Coastal Driftwood Shore
Coastal Dune Breeze
Coastal Dune Grass