Back to palettes

Palette

Canyon Whisper Sand

Soft, dusty tones capture the tranquil beauty of ancient canyons and sun-drenched rock formations.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Canyon Whisper Sand 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 Canyon Whisper Sand.

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

Data visualization

#A97C6A#C7A08E#E0C7B4#F2E4D5#D1BAA9

Palette guide

How to use Canyon Whisper Sand

Overview

The Canyon Whisper Sand palette embodies the tranquil beauty of sun-drenched canyon walls and vast desert sands. Featuring a muted taupe #A97C6A, soft beige #C7A08E, light sand #E0C7B4, airy cream #F2E4D5, and a gentle fawn #D1BAA9, this collection offers a serene and sophisticated aesthetic. Designers and developers will find this palette excellent for projects demanding calmness, elegance, and a natural, understated feel. Its harmonious blend of soft, muted tones creates an inviting and peaceful user experience, perfect for conveying tranquility and organic beauty.

Best used for

  • Minimalist or spa-like branding
  • Eco-friendly product websites
  • High-end natural cosmetic packaging
  • Digital interfaces for meditation or wellness apps
  • Serene interior design concepts
  • Editorial layouts for quiet luxury or mindful living

Suggested color roles

primary

Use #A97C6A as a foundational color for main content blocks, headers, or primary navigation, establishing a sophisticated, calming base.

secondary

Apply #C7A08E for supporting details, sub-sections, or background elements, providing a softer, harmonious layer.

accent

Leverage #D1BAA9 for subtle highlights, interactive elements, or decorative accents, offering gentle contrast and warmth.

background

Employ #F2E4D5 for expansive backgrounds or main content areas, creating a light, airy, and highly readable canvas.

text

For optimal readability, use a dark brown (e.g., #A97C6A) or a deep charcoal against lighter backgrounds, and white text sparingly.

Accessibility notes

  • Ensure #A97C6A provides sufficient contrast for text when used on #F2E4D5 or #E0C7B4 backgrounds.
  • Avoid using #C7A08E text on #D1BAA9 backgrounds for main content due to potential low contrast.
  • Lighter colors like #F2E4D5 should be reserved for larger display text if used on #E0C7B4.
  • Verify contrast ratios for all interactive elements, ensuring clear distinction between states, especially with the subtle variations in light tones.

Recommended combinations

Desert Breeze

Ideal for soft gradients, expansive backgrounds, or delicate UI elements.

#F2E4D5 · #E0C7B4 · #C7A08E

Tranquil Sands

Perfect for creating cohesive content blocks or sophisticated textual displays.

#A97C6A · #C7A08E · #D1BAA9

Whisper Muted

Use for subtle graphic accents, borders, or elements needing gentle emphasis.

#D1BAA9 · #F2E4D5 · #A97C6A

CSS variables

:root {
  --canyon-whisper-sand-1: #A97C6A;
  --canyon-whisper-sand-2: #C7A08E;
  --canyon-whisper-sand-3: #E0C7B4;
  --canyon-whisper-sand-4: #F2E4D5;
  --canyon-whisper-sand-5: #D1BAA9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "canyon-whisper-sand": {
        1: "#A97C6A",
        2: "#C7A08E",
        3: "#E0C7B4",
        4: "#F2E4D5",
        5: "#D1BAA9",
      }
    }
  }
}

Related searches

muted desert palettetranquil sand colorssoft canyon neutralsearthy beige cream schememinimalist natural tones

Palette colors

Hex values

Color 1#A97C6A
·
Color 2#C7A08E
·
Color 3#E0C7B4
·
Color 4#F2E4D5
·
Color 5#D1BAA9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
2.9:1Fail
2:1Fail
2
1.5:1Fail
1.5:1Fail
1.9:1Fail
1.3:1Fail
3
2.2:1Fail
1.5:1Fail
1.3:1Fail
1.1:1Fail
4
2.9:1Fail
1.9:1Fail
1.3:1Fail
1.5:1Fail
5
2:1Fail
1.3:1Fail
1.1:1Fail
1.5:1Fail

Similar palettes

More like Canyon Whisper Sand

View all earth