Palette

Deep Canyon Sunset

The dramatic, sun-drenched layers of a deep canyon wall at dusk, bathed in warm, earthy hues.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Canyon Sunset 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 Deep Canyon Sunset.

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

Data visualization

#4F2C1A#8C4E2C#B76F4B#D09C7B#ECC6B3

Palette guide

How to use Deep Canyon Sunset

Overview

The Deep Canyon Sunset palette captures the dramatic, sun-drenched layers of a canyon wall at dusk, offering a warm and earthy spectrum. From the grounding #4F2C1A to the soft #ECC6B3, with vibrant #B76F4B, this collection evokes a sense of natural grandeur and comfort. Designers can craft inviting websites or rustic branding, while developers can utilize its rich progression for engaging visual narratives and intuitive user interfaces. This palette is ideal for projects that seek to convey warmth, adventure, and natural beauty.

Best used for

Outdoor adventure brands
Travel and nature blogs
Rustic home decor websites
Food and beverage packaging
Photography portfolios (landscape)
Autumnal fashion collections

Suggested color roles

primary

Utilize #4F2C1A as a deep, grounding base for primary branding, robust headers, or dark mode themes.

secondary

Apply #8C4E2C for supporting content, subheadings, or secondary navigation, adding warmth and depth.

accent

Highlight calls to action or key information with the vibrant #B76F4B, ensuring clear visibility.

background

The pale #ECC6B3 offers a soft, warm backdrop, while #4F2C1A creates a dramatic, immersive dark theme.

text

On light backgrounds, #4F2C1A provides excellent legibility. For dark backgrounds, white or a light cream ensures clarity.

Accessibility notes

Ensure sufficient contrast for text on mid-tone colors like #8C4E2C and #B76F4B.
Verify that lighter tones like #D09C7B and #ECC6B3 provide adequate contrast for any overlaying elements.
Prioritize #4F2C1A for primary text on light backgrounds to meet WCAG AA standards.
Interactive elements should have distinct visual states, especially when using similar warm hues.

Recommended combinations

Canyon Walls

Ideal for creating layered backgrounds or section dividers, reflecting the canyon's geological strata.

#4F2C1A · #8C4E2C · #B76F4B

Sunset Glow

Perfect for gradients or highlights, suggesting the warm, fading light of a sunset.

#B76F4B · #D09C7B · #ECC6B3

Desert Twilight

Provides a strong contrast for main content, balancing deep earth tones with soft, ethereal light.

#4F2C1A · #ECC6B3 · #8C4E2C

CSS variables

:root {
  --deep-canyon-sunset-1: #4F2C1A;
  --deep-canyon-sunset-2: #8C4E2C;
  --deep-canyon-sunset-3: #B76F4B;
  --deep-canyon-sunset-4: #D09C7B;
  --deep-canyon-sunset-5: #ECC6B3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-canyon-sunset": {
        1: "#4F2C1A",
        2: "#8C4E2C",
        3: "#B76F4B",
        4: "#D09C7B",
        5: "#ECC6B3",
      }
    }
  }
}

Hex values

Color 1#4F2C1A

Color 2#8C4E2C

Color 3#B76F4B

Color 4#D09C7B

Color 5#ECC6B3

Accessibility

Contrast checker

1.9:1Fail

3.2:1AA18

5.1:1AA

7.8:1AAA

1.9:1Fail

1.7:1Fail

2.7:1Fail

4.1:1AA18

3.2:1AA18

1.7:1Fail

1.6:1Fail

2.5:1Fail

5.1:1AA

2.7:1Fail

1.6:1Fail

1.5:1Fail

7.8:1AAA

4.1:1AA18

2.5:1Fail

1.5:1Fail

Similar palettes

More like Deep Canyon Sunset