Palette

Dune Wanderer Song

Evokes the quiet majesty of vast dunes and sun-baked landscapes under an ancient sun.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dune Wanderer Song 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 Dune Wanderer Song.

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

Data visualization

#DCCB9F#C9A86A#B18F5B#966C3E#6F4521

Palette guide

How to use Dune Wanderer Song

Overview

The "Dune Wanderer Song" palette evokes the quiet majesty of vast dunes and sun-baked landscapes under an ancient sun. This rich, warm, and earthy collection features a harmonious gradient of browns and tans, from the light sand #DCCB9F to the deep, grounded #6F4521. Shades like #C9A86A, #B18F5B, and #966C3E provide a smooth transition, perfect for designs that aim for natural authenticity, depth, and a touch of ancient wisdom. Designers can utilize this palette for heritage brands, rugged outdoor themes, or sophisticated, earthy digital experiences. Developers will find these hex codes excellent for creating warm, immersive user interfaces that convey strength, history, and a timeless appeal.

Best used for

Heritage brand identities and packaging
Outdoor adventure and exploration websites
Artisanal leather goods or handcrafted products
Documentary film branding on ancient cultures
Rustic cafe or brewery interior design
Luxury resort branding in desert landscapes

Suggested color roles

primary

#B18F5B - A rich, warm tan, excellent for main content areas or primary branding elements to convey natural depth and warmth.

secondary

#C9A86A - A lighter, golden tan, perfect for subheadings, navigation elements, or subtle background textures.

accent

#966C3E - A deep, earthy brown, ideal for calls-to-action, important icons, or to provide strong, grounded contrast.

background

#DCCB9F - The lightest sand color, offering a warm, inviting, and clean canvas that enhances the natural hues.

text

#6F4521 - The darkest brown in the palette, ensuring excellent readability and perfectly complementing the dune tones.

Accessibility notes

Ensure sufficient contrast when pairing #C9A86A or #B18F5B with #DCCB9F for text; a darker text color is essential.
#6F4521 provides excellent contrast on #DCCB9F and #C9A86A, making it ideal for body text.
Avoid using #B18F5B as text on #C9A86A due to potential low contrast, especially for smaller fonts.
When using these warm, close-knit shades, always test contrast ratios, particularly for interactive elements.

Recommended combinations

Desert Gradient

Creates a smooth, sun-baked background gradient or layered elements, evoking vast desert landscapes.

#DCCB9F · #C9A86A · #B18F5B

Ancient Depth

Use for primary branding, strong text, and accents to convey robustness and a sense of history.

#B18F5B · #966C3E · #6F4521

Wanderer Base

A light base with the darkest color for strong contrast and a middle tone for secondary elements.

#DCCB9F · #6F4521 · #966C3E

CSS variables

:root {
  --dune-wanderer-song-1: #DCCB9F;
  --dune-wanderer-song-2: #C9A86A;
  --dune-wanderer-song-3: #B18F5B;
  --dune-wanderer-song-4: #966C3E;
  --dune-wanderer-song-5: #6F4521;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dune-wanderer-song": {
        1: "#DCCB9F",
        2: "#C9A86A",
        3: "#B18F5B",
        4: "#966C3E",
        5: "#6F4521",
      }
    }
  }
}

Hex values

Color 1#DCCB9F

Color 2#C9A86A

Color 3#B18F5B

Color 4#966C3E

Color 5#6F4521

Accessibility

Contrast checker

1.4:1Fail

1.9:1Fail

2.9:1Fail

5.1:1AA

1.4:1Fail

1.3:1Fail

2.1:1Fail

3.6:1AA18