Back to palettes

Palette

Desert Sands Dune

Inspired by the subtle, shifting shades of desert dunes under a relentless sun, embodying natural warmth and simplicity.

earthminimal5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F2E2CC#D9C7B2#BFAB8C#A6947D#736555

Palette guide

How to use Desert Sands Dune

Overview

The Desert Sands Dune palette is inspired by the subtle, shifting shades of desert dunes under a relentless sun, embodying natural warmth and simplicity. It features a harmonious progression from the very light, inviting #F2E2CC and the balanced #D9C7B2, through the richer #BFAB8C and #A6947D, to the deep, grounding #736555. This collection is perfect for designers seeking a minimalist, serene, and sophisticated aesthetic. It provides excellent depth and natural harmony, ideal for creating a sense of calm, spaciousness, and organic connection to nature in digital or print media, emphasizing understated elegance and timeless appeal.

Best used for

  • Minimalist branding and packaging
  • High-end neutral web design
  • Eco-friendly and sustainable products
  • Serene interior design concepts
  • Fine art photography portfolios
  • UI/UX with a calming, organic feel

Suggested color roles

primary

Use #736555 for strong headings, borders, or foundational elements, providing a deep, stable anchor.

secondary

Apply #A6947D for larger content blocks or prominent UI components, offering a balanced, earthy mid-tone.

accent

Employ #BFAB8C for interactive elements or subtle highlights, adding a touch of grounded warmth.

background

Utilize #F2E2CC for clean, expansive backgrounds, ensuring good contrast for darker text and a luminous feel.

text

For optimal readability, use #736555 for body text on lighter backgrounds, or a crisp white/off-white on the darkest shades.

Accessibility notes

  • Ensure #736555 text has strong contrast against #F2E2CC and #D9C7B2.
  • #F2E2CC and #D9C7B2 may not provide enough contrast for text when paired closely.
  • The lighter shades like #BFAB8C or #A6947D should be avoided for small text against similarly light backgrounds.
  • Always test color contrast ratios for all text and interactive elements to meet WCAG standards.

Recommended combinations

Dune Layers

Creates a harmonious, calm gradient, excellent for serene backgrounds or large hero sections.

#F2E2CC · #BFAB8C · #736555

Sand Echoes

Perfect for designs needing a subtle, earthy feel with depth, like product displays or soft branding.

#D9C7B2 · #A6947D · #F2E2CC

Grounded Beige

Suitable for robust designs requiring clear hierarchy with a warm, natural touch.

#736555 · #BFAB8C · #D9C7B2

CSS variables

:root {
  --desert-sands-dune-3-1: #F2E2CC;
  --desert-sands-dune-3-2: #D9C7B2;
  --desert-sands-dune-3-3: #BFAB8C;
  --desert-sands-dune-3-4: #A6947D;
  --desert-sands-dune-3-5: #736555;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-sands-dune-3": {
        1: "#F2E2CC",
        2: "#D9C7B2",
        3: "#BFAB8C",
        4: "#A6947D",
        5: "#736555",
      }
    }
  }
}

Related searches

desert beige color paletteminimalist sand toneswarm neutral earth schemenatural calm web designmonochromatic sand colors

Palette colors

Hex values

Color 1#F2E2CC
·
Color 2#D9C7B2
·
Color 3#BFAB8C
·
Color 4#A6947D
·
Color 5#736555
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.3:1Fail
4.4:1AA18
2
1.3:1Fail
1.4:1Fail
1.8:1Fail
3.4:1AA18
3
1.8:1Fail
1.4:1Fail
1.3:1Fail
2.5:1Fail
4
2.3:1Fail
1.8:1Fail
1.3:1Fail
1.9:1Fail
5
4.4:1AA18
3.4:1AA18
2.5:1Fail
1.9:1Fail

Similar palettes

More like Desert Sands Dune

View all earth