Back to palettes

Palette

Seaside Strand Weave

Soft, wind-swept hues mirroring dry grasses and shifting sands along a tranquil coastline.

neutralnatural5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seaside Strand Weave 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 Seaside Strand Weave.

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

Data visualization

#BBA086#D0BC99#E4D8B9#F5F1E4#9E8972

Palette guide

How to use Seaside Strand Weave

Overview

The Seaside Strand Weave palette offers a delicate collection of soft, wind-swept hues, mirroring dry grasses and shifting sands along a tranquil coastline. Ranging from the almost white #F5F1E4 to the grounding #9E8972 (Muted Brown), and including warm, inviting shades like #E4D8B9, #D0BC99, and #BBA086, this palette exudes natural serenity and subtle sophistication. It's an excellent choice for designers and developers aiming to convey authenticity, organic beauty, and a handcrafted feel. Ideal for eco-conscious brands, relaxed lifestyle platforms, or serene digital environments, this palette provides a warm, inviting, and inherently calm aesthetic, perfect for projects seeking a gentle, natural touch.

Best used for

  • Eco-friendly product branding
  • Relaxed lifestyle blogs and websites
  • Natural fiber textile designs
  • Bohemian interior decor concepts
  • Wedding and event branding
  • Sustainable fashion e-commerce

Suggested color roles

primary

#D0BC99 for main content areas, providing a soft, warm, and inviting base.

secondary

#BBA086 for supporting sections, navigation, or subtle call-out boxes, adding gentle structure.

accent

#9E8972 to provide a deeper, grounding accent for important text, buttons, or key visual elements.

background

#F5F1E4 as a clean, airy canvas, mimicking natural parchment or sun-bleached sand.

text

A deep brown or charcoal, such as the palette's #9E8972, for body text to ensure optimal readability.

Accessibility notes

  • Ensure strong contrast when using #9E8972 for text against lighter shades like #F5F1E4 or #E4D8B9.
  • Be mindful of contrast between mid-tones like #BBA086 and #D0BC99 if used for text or interactive elements.
  • Verify that all text and essential UI elements meet WCAG contrast ratio standards, especially for smaller fonts.
  • Avoid pairing very similar light shades for foreground and background without clear visual separation.

Recommended combinations

Sandy Layers

Ideal for creating soft, layered backgrounds or subtle branding elements on websites.

#F5F1E4 · #E4D8B9 · #D0BC99

Weave Contrast

Excellent for clear content hierarchy: #F5F1E4 as background, #9E8972 for headlines, #BBA086 for subtext.

#F5F1E4 · #9E8972 · #BBA086

Coastal Warmth

Use for data visualization or infographics, showcasing a warm, natural progression.

#9E8972 · #BBA086 · #E4D8B9

CSS variables

:root {
  --seaside-strand-weave-1: #BBA086;
  --seaside-strand-weave-2: #D0BC99;
  --seaside-strand-weave-3: #E4D8B9;
  --seaside-strand-weave-4: #F5F1E4;
  --seaside-strand-weave-5: #9E8972;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaside-strand-weave": {
        1: "#BBA086",
        2: "#D0BC99",
        3: "#E4D8B9",
        4: "#F5F1E4",
        5: "#9E8972",
      }
    }
  }
}

Related searches

sandy beige palettenatural coastal colorsearthy neutral schemewarm muted tonesstrand inspired design

Palette colors

Hex values

Color 1#BBA086
·
Color 2#D0BC99
·
Color 3#E4D8B9
·
Color 4#F5F1E4
·
Color 5#9E8972
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
2.2:1Fail
1.4:1Fail
2
1.3:1Fail
1.3:1Fail
1.6:1Fail
1.8:1Fail
3
1.7:1Fail
1.3:1Fail
1.3:1Fail
2.4:1Fail
4
2.2:1Fail
1.6:1Fail
1.3:1Fail
3:1Fail
5
1.4:1Fail
1.8:1Fail
2.4:1Fail
3:1Fail

Similar palettes

More like Seaside Strand Weave

View all neutral