Back to palettes

Palette

Arid Plains Vista

A soft, muted collection inspired by the expansive, quiet beauty of a windswept desert landscape.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arid Plains Vista 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 Arid Plains Vista.

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

Data visualization

#DEDCD1#C7C6B7#ADA79B#958B7E#8A7F71

Palette guide

How to use Arid Plains Vista

Overview

The Arid Plains Vista palette offers a soft, muted collection of neutral earth tones, perfect for conveying serenity and natural elegance. Featuring shades like the light `#DEDCD1`, a slightly deeper `#C7C6B7`, and the grounding `#ADA79B`, this palette is ideal for designers and developers seeking a calm, sophisticated aesthetic. Its subtle variations, including `#958B7E` and the deepest tone, `#8A7F71`, provide ample range for creating depth and visual interest without overwhelming the user. This palette is especially effective for projects requiring a sense of quiet strength and organic beauty, allowing content to take center stage.

Best used for

  • Minimalist branding and identity projects
  • Spa, wellness, and meditation app interfaces
  • Natural product packaging and eco-conscious designs
  • Serene website backgrounds and UI elements
  • Interior design mood boards for tranquil spaces
  • Photography portfolios showcasing landscapes

Suggested color roles

primary

Use `#ADA79B` as a foundational mid-tone for main content areas or primary UI elements, offering a balanced and natural feel.

secondary

Employ `#DEDCD1` for lighter sections, headers, or supporting elements where a soft, expansive feel is desired.

accent

Apply `#958B7E` sparingly for subtle emphasis on buttons, icons, or important call-to-action text, providing gentle contrast.

background

Utilize `#C7C6B7` as a soft, inviting background color that promotes readability and a sense of calm.

text

For body text and headings, `#8A7F71` offers the best contrast within the palette. Alternatively, a dark charcoal or near-black can be used for optimal readability.

Accessibility notes

  • Ensure sufficient contrast between text colors like `#8A7F71` and lighter backgrounds such as `#DEDCD1` or `#C7C6B7`.
  • Avoid placing light text (e.g., in `#DEDCD1`) on other light colors like `#C7C6B7` to prevent readability issues.
  • Use a contrast checker for all text and interactive elements to meet WCAG guidelines, especially for smaller font sizes.
  • Consider providing alternative visual cues beyond color, especially when using adjacent tones like `#ADA79B` and `#958B7E` for interactive states.

Recommended combinations

Soft Foundation

Excellent for creating a gentle, layered background or a subtle header-body-footer structure.

#DEDCD1 · #C7C6B7 · #ADA79B

Depth & Contrast

Ideal for text hierarchies, navigation links, or progressive disclosure in UI design.

#ADA79B · #958B7E · #8A7F71

Vista Gradient

Effective for subtle gradients in hero sections or for defining distinct content blocks with natural progression.

#DEDCD1 · #ADA79B · #8A7F71

CSS variables

:root {
  --arid-plains-vista-1: #DEDCD1;
  --arid-plains-vista-2: #C7C6B7;
  --arid-plains-vista-3: #ADA79B;
  --arid-plains-vista-4: #958B7E;
  --arid-plains-vista-5: #8A7F71;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arid-plains-vista": {
        1: "#DEDCD1",
        2: "#C7C6B7",
        3: "#ADA79B",
        4: "#958B7E",
        5: "#8A7F71",
      }
    }
  }
}

Related searches

neutral earth tone palettecalm serene colorsmuted desert aestheticsubtle branding palettenatural UI design colors

Palette colors

Hex values

Color 1#DEDCD1
·
Color 2#C7C6B7
·
Color 3#ADA79B
·
Color 4#958B7E
·
Color 5#8A7F71
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
2.4:1Fail
2.9:1Fail
2
1.3:1Fail
1.4:1Fail
1.9:1Fail
2.3:1Fail
3
1.7:1Fail
1.4:1Fail
1.4:1Fail
1.6:1Fail
4
2.4:1Fail
1.9:1Fail
1.4:1Fail
1.2:1Fail
5
2.9:1Fail
2.3:1Fail
1.6:1Fail
1.2:1Fail

Similar palettes

More like Arid Plains Vista

View all neutral
Desert Sand Horizon
Muted Ceramic Glaze
Sandstone Grotto
Coastal Driftwood Grey
Coastal Dune Serenity
Coastal Linen Breeze