Back to palettes

Palette

Dusty Plains Horizon

Soft, faded browns and muted yellows that evoke endless horizons and sun-baked landscapes.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B7906A#D6C293#E6D8B0#F5F0E1#9E7D5C

Palette guide

How to use Dusty Plains Horizon

Overview

The Dusty Plains Horizon palette features soft, faded browns and muted yellows that evoke endless horizons and sun-baked landscapes. With shades like #B7906A, #D6C293, and the airy #F5F0E1, this collection is perfect for designs that require a minimalist, serene, and natural feel. Designers and developers can leverage these harmonious tones to create captivating minimalist branding, nature photography themes, or digital interfaces that resonate with tranquility and organic beauty. The palette offers a versatile foundation for conveying the vastness and calm of natural plains.

Best used for

  • Minimalist branding and identity
  • Nature photography and art
  • Eco-friendly product packaging
  • Serene web design and blogs
  • Rustic home decor
  • Tranquil spaces and environments

Suggested color roles

primary

#B7906A serves as a warm, muted brown, ideal for main content areas or headers.

secondary

#9E7D5C is the deepest shade, providing grounding for strong anchors, shadows, or borders.

accent

#D6C293 offers a lighter, soft yellow-beige, perfect for subtle accents or decorative details.

background

#F5F0E1 is the lightest shade, creating an airy off-white base that enhances the serene feel.

text

For readability on light backgrounds, use #9E7D5C or a dark brown/charcoal. For critical text, black is recommended.

Accessibility notes

  • For text on #F5F0E1, use #9E7D5C for sufficient contrast and optimal readability.
  • The contrast between #E6D8B0 and #F5F0E1 is very 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 brown or black provides optimal legibility on the lightest colors, especially for users with visual impairments.

Recommended combinations

Horizon Fade

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

#F5F0E1 · #E6D8B0 · #D6C293

Plains Ground

Combines deeper brown with a soft, airy background for strong contrast and a rich, natural feel.

#9E7D5C · #B7906A · #F5F0E1

Sun-baked Serene

Offers balanced mid-tones for a calm, natural feel, suitable for content blocks or visual hierarchy.

#D6C293 · #E6D8B0 · #B7906A

CSS variables

:root {
  --dusty-plains-horizon-1: #B7906A;
  --dusty-plains-horizon-2: #D6C293;
  --dusty-plains-horizon-3: #E6D8B0;
  --dusty-plains-horizon-4: #F5F0E1;
  --dusty-plains-horizon-5: #9E7D5C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dusty-plains-horizon": {
        1: "#B7906A",
        2: "#D6C293",
        3: "#E6D8B0",
        4: "#F5F0E1",
        5: "#9E7D5C",
      }
    }
  }
}

Related searches

dusty plains palettemuted earth tonesserene horizon colorsminimalist rustic designwarm beige yellow

Palette colors

Hex values

Color 1#B7906A
·
Color 2#D6C293
·
Color 3#E6D8B0
·
Color 4#F5F0E1
·
Color 5#9E7D5C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.1:1Fail
2.6:1Fail
1.3:1Fail
2
1.7:1Fail
1.2:1Fail
1.5:1Fail
2.2:1Fail
3
2.1:1Fail
1.2:1Fail
1.2:1Fail
2.7:1Fail
4
2.6:1Fail
1.5:1Fail
1.2:1Fail
3.3:1AA18
5
1.3:1Fail
2.2:1Fail
2.7:1Fail
3.3:1AA18

Similar palettes

More like Dusty Plains Horizon

View all earth