Back to palettes

Palette

Dusty Plains Serene

Muted, earthy tones and soft greys create a tranquil landscape of sun-baked plains and distant horizons.

neutralnatural5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dusty Plains Serene 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 Dusty Plains Serene.

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

Data visualization

#BDB76B#D2B48C#E0D4B1#A9A9A9#C0C0C0

Palette guide

How to use Dusty Plains Serene

Overview

The Dusty Plains Serene palette features muted, earthy tones and soft grays, creating a tranquil landscape of sun-baked plains and distant horizons. With shades like #BDB76B, #D2B48C, and the calming #A9A9A9, this collection is perfect for designs that require a neutral, natural, and calm feel. Designers and developers can leverage these harmonious tones to create captivating minimalist branding, natural product packaging, or digital interfaces that resonate with tranquility and organic beauty. The palette offers a versatile foundation for conveying peacefulness and understated elegance.

Best used for

  • Minimalist branding and identity
  • Natural product packaging
  • Serene web design and blogs
  • Landscape photography themes
  • Eco-conscious themes
  • Rustic interior accents

Suggested color roles

primary

#BDB76B serves as a muted olive-beige, a natural core ideal for main content areas or headers.

secondary

#A9A9A9 offers a mid-tone gray for balance, subheadings, or secondary elements.

accent

#D2B48C provides a warm, sandy highlight, perfect for subtle accents or decorative details.

background

#E0D4B1 is the lightest shade, creating a soft creamy beige base that enhances the serene feel.

text

For readability on lighter backgrounds, use #A9A9A9 or a dark charcoal. For critical text, black is recommended.

Accessibility notes

  • For text on #E0D4B1, use #A9A9A9 for sufficient contrast and optimal readability.
  • The contrast between #C0C0C0 and #E0D4B1 is low; avoid using these for small or critical text elements.
  • Ensure all interactive elements are clearly distinguishable from their backgrounds with clear focus states.
  • For body text, a dark gray or black provides optimal legibility on the lightest colors, especially for users with visual impairments.

Recommended combinations

Serene Horizon

Creates a gentle progression of light earth tones, ideal for background effects or layered elements.

#E0D4B1 · #D2B48C · #BDB76B

Plains Mist

Combines soft grays with a creamy beige background for a subtle and tranquil composition.

#A9A9A9 · #C0C0C0 · #E0D4B1

Earthy Calm

Offers balanced earth tones and gray for a tranquil feel, suitable for content blocks or visual hierarchy.

#BDB76B · #D2B48C · #A9A9A9

CSS variables

:root {
  --dusty-plains-serene-1: #BDB76B;
  --dusty-plains-serene-2: #D2B48C;
  --dusty-plains-serene-3: #E0D4B1;
  --dusty-plains-serene-4: #A9A9A9;
  --dusty-plains-serene-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dusty-plains-serene": {
        1: "#BDB76B",
        2: "#D2B48C",
        3: "#E0D4B1",
        4: "#A9A9A9",
        5: "#C0C0C0",
      }
    }
  }
}

Related searches

dusty neutral paletteserene plains colorsmuted earth graycalm natural designminimalist rustic scheme

Palette colors

Hex values

Color 1#BDB76B
·
Color 2#D2B48C
·
Color 3#E0D4B1
·
Color 4#A9A9A9
·
Color 5#C0C0C0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.4:1Fail
1.1:1Fail
1.1:1Fail
2
1:1Fail
1.3:1Fail
1.2:1Fail
1.1:1Fail
3
1.4:1Fail
1.3:1Fail
1.6:1Fail
1.2:1Fail
4
1.1:1Fail
1.2:1Fail
1.6:1Fail
1.3:1Fail
5
1.1:1Fail
1.1:1Fail
1.2:1Fail
1.3:1Fail

Similar palettes

More like Dusty Plains Serene

View all neutral