Palette

Desert Sands Dune

Evokes the warm, shifting sands of a vast desert, bathed in the soft glow of sun.

earthnatural5 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

#F4A460#DEB887#D2B48C#F5DEB3#FFF8DC

Palette guide

How to use Desert Sands Dune

Overview

The Desert Sands Dune palette evokes the warm, shifting sands of a vast desert, bathed in the soft glow of the sun. This inviting collection ranges from the vibrant #F4A460 and the balanced #DEB887, through the classic sand tone of #D2B48C, to the lighter, luminous #F5DEB3 and the exceptionally pale #FFF8DC. It's ideal for designers seeking a natural, comforting, and sophisticated aesthetic. This palette provides excellent warmth and breadth, perfect for creating a sense of organic luxury or a comforting, established presence in digital or print media, emphasizing natural elegance and a sun-kissed feel.

Best used for

Natural and organic branding
Warm, inviting web design
Eco-friendly product packaging
Serene interior design concepts
Food and beverage marketing
UI/UX with a calming, earthy feel

Suggested color roles

primary

Use #F4A460 for strong headings, borders, or foundational elements, providing a vibrant yet natural anchor.

secondary

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

accent

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

background

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

text

For optimal readability, use a dark brown or charcoal (e.g., #F4A460 or black) on the lightest backgrounds.

Accessibility notes

Ensure #F4A460 text has strong contrast against #FFF8DC and #F5DEB3.
#F5DEB3 and #FFF8DC may not provide enough contrast for text when paired closely.
The lighter shades like #DEB887 or #D2B48C 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

Golden Dunes

Creates a warm, inviting gradient, excellent for serene backgrounds or large hero sections.

#F4A460 · #DEB887 · #FFF8DC

Sunbaked Sands

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

#D2B48C · #F5DEB3 · #F4A460

Desert Glow

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

#F4A460 · #F5DEB3 · #DEB887

CSS variables

:root {
  --desert-sands-dune-1: #F4A460;
  --desert-sands-dune-2: #DEB887;
  --desert-sands-dune-3: #D2B48C;
  --desert-sands-dune-4: #F5DEB3;
  --desert-sands-dune-5: #FFF8DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-sands-dune": {
        1: "#F4A460",
        2: "#DEB887",
        3: "#D2B48C",
        4: "#F5DEB3",
        5: "#FFF8DC",
      }
    }
  }
}

Hex values

Color 1#F4A460

Color 2#DEB887

Color 3#D2B48C

Color 4#F5DEB3

Color 5#FFF8DC

Accessibility

Contrast checker

1.1:1Fail

1:1Fail

1.5:1Fail

1.9:1Fail

1.1:1Fail

1.4:1Fail

1.7:1Fail

1:1Fail

1.1:1Fail

1.5:1Fail

1.9:1Fail

1.5:1Fail

1.4:1Fail

1.5:1Fail

1.2:1Fail

1.9:1Fail

1.7:1Fail

1.9:1Fail

1.2:1Fail

Similar palettes

More like Desert Sands Dune

Desert Sands Dune

See it in context.

Ready when you are.

Built with Desert Sands Dune.

How to use Desert Sands Dune

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Golden Dunes

Sunbaked Sands

Desert Glow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Desert Sands Dune