Back to palettes

Palette

Desert Terrain

Warm and grounding tones inspired by the vast, sandy landscapes and sun-baked soils of the desert.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Desert Terrain 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 Desert Terrain.

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

Data visualization

#C2B280#D2B48C#F4A460#DEB887#BC8F8F

Palette guide

How to use Desert Terrain

Overview

The Desert Terrain palette offers warm and grounding tones inspired by the vast, sandy landscapes and sun-baked soils of the desert. Featuring a rich terracotta in #BC8F8F, it blends with sandy browns like #C2B280, #D2B48C, and #DEB887, punctuated by a vibrant orange in #F4A460. This palette is an excellent choice for designers and developers aiming to evoke a sense of rugged authenticity, natural stability, or an adventurous spirit. Its harmonious blend of earthy browns and a striking orange creates a sophisticated yet down-to-earth aesthetic, perfect for designs that require both robustness and a connection to the natural world.

Best used for

  • Outdoor apparel and gear branding
  • Eco-tourism and travel marketing
  • Natural history museum exhibits
  • Rustic cafe and restaurant branding
  • Geological and environmental studies
  • Stable and authentic digital interfaces

Suggested color roles

primary

Utilize #BC8F8F for foundational elements like main navigation, footers, or bold headlines, establishing a warm, grounded anchor.

secondary

Employ #C2B280 for supporting roles such as subheadings, secondary buttons, or background sections, offering a warm, sandy brown.

accent

Introduce #F4A460 as a vibrant, sunny orange accent for calls to action, highlights, or key interactive elements, adding a lively spark.

background

Apply #D2B48C to main content areas or large backgrounds, creating a light, warm, and highly readable canvas.

text

For optimal readability, use #BC8F8F or a dark brown/charcoal against lighter backgrounds such as #D2B48C or #DEB887.

Accessibility notes

  • Ensure sufficient contrast for text on #D2B48C and #DEB887; dark text is always recommended.
  • Verify that #F4A460 provides enough contrast if used for critical UI elements against adjacent lighter colors.
  • Avoid placing light-colored text on mid-tone browns like #C2B280 to prevent readability issues.
  • Use a contrast checker to confirm WCAG AA compliance for all text and interactive elements within this earthy palette.

Recommended combinations

Arid Foundation

Perfect for a strong primary color on a light background with a vibrant accent, excellent for impactful branding.

#BC8F8F · #D2B48C · #F4A460

Terrain Layers

Ideal for creating layered backgrounds or subtle graphic elements, providing depth and a coherent sandy feel.

#C2B280 · #DEB887 · #D2B48C

Sun-Baked Contrast

Use a light background with a terracotta primary text color and a vibrant orange for accents, ensuring clarity and warmth.

#D2B48C · #BC8F8F · #F4A460

CSS variables

:root {
  --desert-terrain-1: #C2B280;
  --desert-terrain-2: #D2B48C;
  --desert-terrain-3: #F4A460;
  --desert-terrain-4: #DEB887;
  --desert-terrain-5: #BC8F8F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-terrain": {
        1: "#C2B280",
        2: "#D2B48C",
        3: "#F4A460",
        4: "#DEB887",
        5: "#BC8F8F",
      }
    }
  }
}

Related searches

desert terrain colorssandy terracotta palettearid landscape huesnatural earthy browngrounding earth tones

Palette colors

Hex values

Color 1#C2B280
·
Color 2#D2B48C
·
Color 3#F4A460
·
Color 4#DEB887
·
Color 5#BC8F8F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1:1Fail
1.1:1Fail
1.3:1Fail
2
1.1:1Fail
1:1Fail
1.1:1Fail
1.4:1Fail
3
1:1Fail
1:1Fail
1.1:1Fail
1.4:1Fail
4
1.1:1Fail
1.1:1Fail
1.1:1Fail
1.5:1Fail
5
1.3:1Fail
1.4:1Fail
1.4:1Fail
1.5:1Fail

Similar palettes

More like Desert Terrain

View all earth