Palette

Canyon Cliffside View

Layered browns and creams mimic the grand, weathered rock formations of a vast canyon.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Canyon Cliffside View 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 Cliffside View.

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

Data visualization

#5C3D2B#8A644E#B7947E#E0C1B0#F7E7DC

Palette guide

How to use Canyon Cliffside View

Overview

The "Canyon Cliffside View" palette offers a serene and sophisticated range of layered browns and creams, mirroring the majestic formations of a vast canyon. From the deep, grounding #5C3D2B to the ethereal, near-white #F7E7DC, this palette provides a harmonious gradient of natural tones. The intermediate shades, including #8A644E, #B7947E, and #E0C1B0, allow for subtle depth and gentle transitions. This collection is perfect for designs seeking a tranquil, elegant, and earthy aesthetic, ideal for evoking a sense of calm, natural beauty, and refined simplicity across various digital and print applications.

Best used for

Luxury spa or wellness retreat branding
High-end real estate websites with natural themes
Interior design portfolios showcasing minimalist spaces
E-commerce for natural fiber clothing or organic textiles
Photography websites specializing in landscapes
Museum exhibit design for geological displays

Suggested color roles

primary

Use #5C3D2B as a robust primary for navigation, footers, or strong visual anchors, providing stability and elegance.

secondary

Employ #8A644E for subheadings, borders, or secondary information, maintaining a cohesive, earthy flow.

accent

Apply #B7947E for subtle highlights or interactive elements, offering a gentle visual cue.

background

Utilize #F7E7DC as a clean, airy background, perfect for showcasing content and ensuring high readability for dark text.

text

For body text, a deep brown like #5C3D2B or a dark charcoal ensures optimal contrast and legibility against lighter backgrounds.

Accessibility notes

Ensure high contrast when using #F7E7DC or #E0C1B0 with text; darker palette colors or black are recommended.
Check WCAG compliance for #B7947E when used for text on light backgrounds.
The dark tones #5C3D2B and #8A644E provide excellent contrast for white or very light text.
Avoid pairing #E0C1B0 with #B7947E for small text to prevent potential readability issues.

Recommended combinations

Cliffside Depth

Ideal for creating a sophisticated, layered look in headers or section dividers.

#5C3D2B · #8A644E · #B7947E

Desert Air

Excellent for serene backgrounds with soft transitions, perfect for tranquil content areas.

#F7E7DC · #E0C1B0 · #B7947E

Earthy Elegance

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

#5C3D2B · #E0C1B0 · #F7E7DC

CSS variables

:root {
  --canyon-cliffside-view-1: #5C3D2B;
  --canyon-cliffside-view-2: #8A644E;
  --canyon-cliffside-view-3: #B7947E;
  --canyon-cliffside-view-4: #E0C1B0;
  --canyon-cliffside-view-5: #F7E7DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "canyon-cliffside-view": {
        1: "#5C3D2B",
        2: "#8A644E",
        3: "#B7947E",
        4: "#E0C1B0",
        5: "#F7E7DC",
      }
    }
  }
}

Hex values

Color 1#5C3D2B

Color 2#8A644E

Color 3#B7947E

Color 4#E0C1B0

Color 5#F7E7DC

Accessibility

Contrast checker

1.9:1Fail

3.5:1AA18

5.8:1AA

8.1:1AAA

1.9:1Fail

3.1:1AA18

4.3:1AA18

3.5:1AA18

1.9:1Fail

1.6:1Fail

2.3:1Fail

5.8:1AA

3.1:1AA18

1.6:1Fail

1.4:1Fail

8.1:1AAA

4.3:1AA18

2.3:1Fail

1.4:1Fail

Similar palettes

More like Canyon Cliffside View

Canyon Cliffside View

See it in context.

Ready when you are.

Built with Canyon Cliffside View.

How to use Canyon Cliffside View

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Cliffside Depth

Desert Air

Earthy Elegance

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Canyon Cliffside View