Back to palettes

Palette

Shadowed Canyon Vista

The profound grays and silvers of a canyon at dusk, as shadows lengthen across the rocks.

DarkDark5 colors
More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Shadowed Canyon Vista 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 Shadowed Canyon Vista.

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

Data visualization

#2F4F4F#696969#708090#A9A9A9#D3D3D3

Palette guide

How to use Shadowed Canyon Vista

Overview

The Shadowed Canyon Vista palette evokes the serene, muted tones of a canyon at dusk, offering a sophisticated range of grays and a deep blue-gray. Starting with the rich dark slate gray of #2F4F4F, it smoothly transitions through the balanced mid-grays #696969 and #708090, leading to the lighter, ethereal #A9A9A9 and #D3D3D3. This palette is excellent for designers and developers aiming for a calm, introspective, or slightly melancholic aesthetic. Its natural, earthy feel, grounded by #2F4F4F, provides a versatile foundation for both digital interfaces and branding that requires a sense of gravitas and timelessness.

Best used for

  • Nature-inspired websites or apps
  • Photography and art portfolios
  • Corporate branding with a calming feel
  • Interior design visualization
  • Documentary film titles
  • Sustainable product packaging

Suggested color roles

primary

#2F4F4F serves as a grounding primary color for large backgrounds or header sections, imparting depth.

secondary

Utilize #708090 for secondary containers, cards, or subtle dividers to add structure without harsh contrast.

accent

#A9A9A9 or #D3D3D3 can be used for highlights, icons, or interactive elements, providing a soft glow.

background

#2F4F4F for a very dark, contemplative background, or #696969 for a softer, charcoal base.

text

For dark backgrounds, #D3D3D3 or a near-white provides excellent legibility. On lighter grays, a dark charcoal like #2F4F4F works well.

Accessibility notes

  • Ensure sufficient contrast for text, especially with mid-tones like #696969 and #708090.
  • #D3D3D3 on #2F4F4F should meet WCAG AA for normal text.
  • Avoid using #A9A9A9 or #D3D3D3 for small text on #708090 without careful testing.
  • Larger text can tolerate slightly less contrast, but always prioritize clear readability.

Recommended combinations

Canyon Depths

Establishes a deep, layered look with clear hierarchy, perfect for sections and headlines.

#2F4F4F · #708090 · #D3D3D3

Misty Horizon

Creates a light, airy feel with subtle transitions, suitable for secondary information or overlays.

#696969 · #A9A9A9 · #D3D3D3

Stone & Sky

Combines a strong base with mid-tones and a soft highlight, versatile for various UI elements.

#2F4F4F · #696969 · #A9A9A9

CSS variables

:root {
  --shadowed-canyon-vista-1: #2F4F4F;
  --shadowed-canyon-vista-2: #696969;
  --shadowed-canyon-vista-3: #708090;
  --shadowed-canyon-vista-4: #A9A9A9;
  --shadowed-canyon-vista-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "shadowed-canyon-vista": {
        1: "#2F4F4F",
        2: "#696969",
        3: "#708090",
        4: "#A9A9A9",
        5: "#D3D3D3",
      }
    }
  }
}

Related searches

serene gray palettenatural dark themecalm ui colorslandscape inspired palettemuted gray web design

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#696969
·
Color 3#708090
·
Color 4#A9A9A9
·
Color 5#D3D3D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.2:1Fail
3.8:1AA18
6:1AA
2
1.6:1Fail
1.4:1Fail
2.3:1Fail
3.7:1AA18
3
2.2:1Fail
1.4:1Fail
1.7:1Fail
2.7:1Fail
4
3.8:1AA18
2.3:1Fail
1.7:1Fail
1.6:1Fail
5
6:1AA
3.7:1AA18
2.7:1Fail
1.6:1Fail

Similar palettes

More like Shadowed Canyon Vista

View all Dark
Abyssal Bioluminescence
Deep Space Nebula
Gothic Nightshade Bloom
Haunted Hallway Gloom
Lunar Shadow Garden
Midnight Bloom Velvet