Palette

Moonlit Canyon Path

Soft greys and blues capture the stark beauty of a desert canyon under the silent gaze of the moon.

neutraldark5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moonlit Canyon Path 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 Moonlit Canyon Path.

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

Data visualization

#3A3B4D#5D6473#8C939E#B8BFC4#E3E5E6

Palette guide

How to use Moonlit Canyon Path

Overview

The Moonlit Canyon Path palette captures the stark beauty of a desert canyon under the silent gaze of the moon, through soft greys and subtle blue undertones. It features a gradient from the deep #3A3B4D (Dark Slate Gray) to the airy #E3E5E6 (Light Gray), with intermediate shades like #5D6473 (Medium Gray), #8C939E (Cadet Gray), and #B8BFC4 (Light Blue-Gray). This versatile palette is perfect for designers and developers seeking a clean, sophisticated, and modern aesthetic with a calming, neutral foundation. Its understated elegance lends itself well to minimalist branding, professional digital interfaces, or any project that requires a sense of quiet strength and clarity, ensuring a cohesive and user-friendly experience.

Best used for

Minimalist branding and logos
Professional corporate websites
Clean portfolio designs
Modern app interfaces
Architectural visualization
Subtle editorial layouts

Suggested color roles

primary

Utilize #3A3B4D as the core dark gray for main text, headers, or foundational elements, providing a strong anchor.

secondary

Apply #5D6473 for secondary backgrounds, panels, or navigation, offering a subtle shift in depth.

accent

Employ #8C939E or #B8BFC4 for subtle highlights, interactive elements, or less critical information, adding gentle contrast.

background

The lightest shade, #E3E5E6, makes an excellent clean, bright background, promoting readability and spaciousness.

text

For primary text on light backgrounds, #3A3B4D ensures strong readability. Use #E3E5E6 for text on darker backgrounds.

Accessibility notes

Ensure high contrast for essential text, specifically pairing #3A3B4D with #E3E5E6 for optimal readability.
Avoid using #8C939E text on #B8BFC4 backgrounds for small font sizes due to potential low contrast.
Interactive elements should have clear focus states that stand out, potentially using a slightly darker or lighter shade.
For a clean aesthetic, ensure sufficient visual separation between elements by varying lightness and saturation.

Recommended combinations

Canyon Base

Creates a strong, dark base with a clean, light highlight, ideal for headers and main content areas.

#3A3B4D · #5D6473 · #E3E5E6

Path Glow

A soft, gradient-like combination, perfect for subtle background textures or layered informational panels.

#B8BFC4 · #8C939E · #5D6473

Stone Texture

A versatile trio for UI elements, offering depth, a grounding dark, and a gentle accent.

#5D6473 · #3A3B4D · #B8BFC4

CSS variables

:root {
  --moonlit-canyon-path-1: #3A3B4D;
  --moonlit-canyon-path-2: #5D6473;
  --moonlit-canyon-path-3: #8C939E;
  --moonlit-canyon-path-4: #B8BFC4;
  --moonlit-canyon-path-5: #E3E5E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-canyon-path": {
        1: "#3A3B4D",
        2: "#5D6473",
        3: "#8C939E",
        4: "#B8BFC4",
        5: "#E3E5E6",
      }
    }
  }
}

Hex values

Color 1#3A3B4D

Color 2#5D6473

Color 3#8C939E

Color 4#B8BFC4

Color 5#E3E5E6

Accessibility

Contrast checker

1.8:1Fail

3.5:1AA18

5.9:1AA

8.7:1AAA

1.8:1Fail

1.9:1Fail

3.2:1AA18

4.7:1AA

3.5:1AA18

1.9:1Fail

1.7:1Fail

2.4:1Fail

5.9:1AA

3.2:1AA18

1.7:1Fail

1.5:1Fail

8.7:1AAA

4.7:1AA

2.4:1Fail

1.5:1Fail

Similar palettes

More like Moonlit Canyon Path

View all neutral

Volcanic Ash Bloom

Gargoyle Grey

Haunted Library Pages

Mossy Stone Relic

Stormy Horizon Grey

Urban Alley Grit