Back to palettes

Palette

Whispering Dune Grass

Subtle, natural tones found in sandy dunes with whispering grasses and muted earth.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Whispering Dune Grass 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 Whispering Dune Grass.

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

Data visualization

#F5DEB3#D2B48C#BDB76B#8B4513#CD853F

Palette guide

How to use Whispering Dune Grass

Overview

The Whispering Dune Grass palette offers subtle, natural tones found in sandy dunes with whispering grasses and muted earth. This collection, featuring the bright sand of #F5DEB3, the classic beige of #D2B48C, and the distinct earthy green of #BDB76B, provides a grounded and organic aesthetic. The deeper browns, #8B4513 and #CD853F, add crucial depth and warmth, making the palette versatile for designs that aim to be both tranquil and robust. It's an excellent choice for evoking natural landscapes, sustainability, and a sense of quiet strength.

Best used for

  • Eco-friendly product branding and packaging
  • Outdoor apparel and adventure gear websites
  • Nature documentaries and environmental initiatives
  • Rustic cafe and restaurant branding
  • Botanical garden and park signage
  • Sustainable architecture and landscape design

Suggested color roles

primary

Utilize #D2B48C as a balanced, natural base for main content areas, offering a versatile foundation.

secondary

Apply #BDB76B for supporting elements, subheadings, or to introduce a subtle touch of organic green.

accent

Employ #8B4513 for strong call-to-actions, important highlights, or grounding visual anchors.

background

The lightest shade, #F5DEB3, is perfect for spacious page backgrounds, creating an airy and natural feel.

text

Use #8B4513 for headings and body text to ensure excellent readability against lighter shades, or a deep charcoal for general text.

Accessibility notes

  • Ensure sufficient contrast between light background colors (e.g., #F5DEB3) and text, especially with #BDB76B.
  • The deep #8B4513 provides excellent contrast for text on all lighter palette colors.
  • Be mindful of contrast when using #BDB76B for text on #D2B48C; test for readability.
  • Test all text and background color combinations to meet WCAG contrast guidelines.

Recommended combinations

Dune & Grass

Ideal for hero sections or branding elements, representing a natural landscape.

#F5DEB3 · #BDB76B · #8B4513

Earthy Depth

Excellent for defining content blocks, card elements, or navigation areas.

#D2B48C · #CD853F · #BDB76B

Grounded Green

Perfect for high-contrast accents, call-to-action buttons, or iconography.

#8B4513 · #BDB76B · #CD853F

CSS variables

:root {
  --whispering-dune-grass-2-1: #F5DEB3;
  --whispering-dune-grass-2-2: #D2B48C;
  --whispering-dune-grass-2-3: #BDB76B;
  --whispering-dune-grass-2-4: #8B4513;
  --whispering-dune-grass-2-5: #CD853F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-dune-grass-2": {
        1: "#F5DEB3",
        2: "#D2B48C",
        3: "#BDB76B",
        4: "#8B4513",
        5: "#CD853F",
      }
    }
  }
}

Related searches

dune grass colorsnatural earth greenrustic sand paletteeco-friendly brandingoutdoor theme colors

Palette colors

Hex values

Color 1#F5DEB3
·
Color 2#D2B48C
·
Color 3#BDB76B
·
Color 4#8B4513
·
Color 5#CD853F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.6:1Fail
5.4:1AA
2.3:1Fail
2
1.5:1Fail
1:1Fail
3.6:1AA18
1.5:1Fail
3
1.6:1Fail
1:1Fail
3.4:1AA18
1.4:1Fail
4
5.4:1AA
3.6:1AA18
3.4:1AA18
2.4:1Fail
5
2.3:1Fail
1.5:1Fail
1.4:1Fail
2.4:1Fail

Similar palettes

More like Whispering Dune Grass

View all earth
Arid Blossom Mirage
Coastal Dune Grass
Desert Dune Whisper
Whispering Dune Wind
Whispering Grass Blades
Aegean Coast Drift