Palette

Canyon Sun Baked

Warm ochres and deep browns evoke the sun-baked, rugged beauty of ancient canyon walls.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Canyon Sun Baked 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 Sun Baked.

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

Data visualization

#8B4513#CD853F#D2B48C#A0522D#E0BF92

Palette guide

How to use Canyon Sun Baked

Overview

The "Canyon Sun Baked" palette evokes the sun-baked, rugged beauty of ancient canyon walls with its warm ochres and deep browns. It ranges from the profound #8B4513 to the luminous #E0BF92, offering a robust yet inviting gradient. Key shades include the earthy #A0522D, the rich #CD853F, and the soft #D2B48C. This palette is perfect for designs that seek to convey authenticity, warmth, and a connection to nature, making it ideal for rustic, heritage, or organic design themes across various platforms. Its inherent warmth provides a comforting and reliable visual experience for users.

Best used for

Rustic interior design websites or blogs
E-commerce for artisanal crafts or handmade goods
Branding for eco-friendly or natural product lines
Digital art or illustration with earthy themes
Travel blogs focusing on desert landscapes or national parks
Farm-to-table restaurant menus or branding

Suggested color roles

primary

Use #8B4513 as a grounding primary for large blocks of color or important headers, conveying stability and warmth.

secondary

Employ #A0522D for secondary elements like call-to-action buttons or accent panels, adding a vibrant, inviting energy.

accent

Apply #CD853F for focal points or interactive elements, drawing attention without overwhelming the earthy base.

background

Utilize #E0BF92 as a soft, warm background for content, ensuring good readability with darker text.

text

For body text, consider a dark charcoal or a deep brown like #8B4513, ensuring sufficient contrast against lighter backgrounds.

Accessibility notes

Ensure sufficient contrast when pairing #E0BF92 with lighter text colors; darker hues are recommended.
Check color contrast for #D2B48C used with both light and dark text to meet WCAG guidelines.
Avoid using #8B4513 and #A0522D in close proximity for small text to prevent readability issues for some users.
For interactive elements, ensure #CD853F has a clear focus state and meets minimum contrast ratios against its background.

Recommended combinations

Sun-Kissed Earth

Ideal for hero sections or banners, capturing a warm, inviting glow.

#8B4513 · #A0522D · #CD853F

Desert Radiance

Excellent for creating a soft, luminous background with prominent, readable headings and accents.

#E0BF92 · #D2B48C · #CD853F

Warm Contrast

Suitable for high-contrast informational sections, with dark text on light backgrounds, highlighted by a mid-tone.

#8B4513 · #D2B48C · #E0BF92

CSS variables

:root {
  --canyon-sun-baked-1: #8B4513;
  --canyon-sun-baked-2: #CD853F;
  --canyon-sun-baked-3: #D2B48C;
  --canyon-sun-baked-4: #A0522D;
  --canyon-sun-baked-5: #E0BF92;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "canyon-sun-baked": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#D2B48C",
        4: "#A0522D",
        5: "#E0BF92",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#CD853F

Color 3#D2B48C

Color 4#A0522D

Color 5#E0BF92

Accessibility

Contrast checker

2.4:1Fail

3.6:1AA18

1.3:1Fail

4.1:1AA18

2.4:1Fail

1.5:1Fail

1.9:1Fail

1.7:1Fail

3.6:1AA18

1.5:1Fail

2.8:1Fail

1.1:1Fail

1.3:1Fail

1.9:1Fail

2.8:1Fail

3.2:1AA18

4.1:1AA18

1.7:1Fail

1.1:1Fail

3.2:1AA18

Similar palettes

More like Canyon Sun Baked