Palette

Moonlit Canyon Stone

Muted greys and soft off-whites, echoing the stark beauty of a canyon under the gentle moonlight.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#708090#A9A9A9#D3D3D3#F5F5DC

Palette guide

How to use Moonlit Canyon Stone

Overview

The Moonlit Canyon Stone palette echoes the stark beauty of a canyon under gentle moonlight, through muted grays and soft off-whites, with a subtle hint of dark teal. It ranges from the deep #2F4F4F (Dark Slate Gray/Dark Cyan) to the almost-white #F5F5DC (Beige), featuring intermediate shades like #708090 (Slate Gray), #A9A9A9 (Dark Gray), and #D3D3D3 (Light Gray). This palette is ideal for designers and developers seeking a minimalist, serene, and sophisticated aesthetic. Its earthy yet cool tones are perfect for eco-conscious brands, architectural presentations, or any digital interface that aims for a clean, grounded, and timeless appeal, providing a harmonious and unobtrusive user experience.

Best used for

Eco-friendly brand identity
Architectural firm websites
Minimalist e-commerce platforms
Nature-themed mobile apps
Serene interior design concepts
Clean photography portfolios

Suggested color roles

primary

Utilize #2F4F4F as the foundational deep teal-gray for main sections, headers, or dark mode backgrounds, providing a solid anchor.

secondary

Apply #708090 for secondary backgrounds, panels, or larger content blocks, offering a subtle shift in tone.

accent

Employ #A9A9A9 or #D3D3D3 for subtle highlights, interactive elements, or less critical information, adding gentle contrast.

background

The lightest shade, #F5F5DC, serves as an excellent clean, warm off-white background, promoting readability and calm.

text

For primary text on light backgrounds, #2F4F4F ensures strong readability. Use #F5F5DC for text on darker backgrounds.

Accessibility notes

Ensure high contrast for essential text, pairing #2F4F4F with #F5F5DC for optimal readability.
Avoid using #A9A9A9 text on #D3D3D3 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 minimalist aesthetic, rely on distinct lightness differences to establish visual hierarchy rather than strong color contrast.

Recommended combinations

Stone Depth

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

#2F4F4F · #708090 · #F5F5DC

Canyon Light

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

#D3D3D3 · #A9A9A9 · #708090

Moonlit Rock

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

#708090 · #2F4F4F · #D3D3D3

CSS variables

:root {
  --moonlit-canyon-stone-1: #2F4F4F;
  --moonlit-canyon-stone-2: #708090;
  --moonlit-canyon-stone-3: #A9A9A9;
  --moonlit-canyon-stone-4: #D3D3D3;
  --moonlit-canyon-stone-5: #F5F5DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-canyon-stone": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#F5F5DC",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#708090

Color 3#A9A9A9

Color 4#D3D3D3

Color 5#F5F5DC

Accessibility

Contrast checker

2.2:1Fail

3.8:1AA18

6:1AA

8.1:1AAA

2.2:1Fail

1.7:1Fail

2.7:1Fail

3.7:1AA18

3.8:1AA18

1.7:1Fail

1.6:1Fail

2.1:1Fail

6:1AA

2.7:1Fail

1.6:1Fail

1.4:1Fail

8.1:1AAA

3.7:1AA18

2.1:1Fail

1.4:1Fail

Similar palettes

More like Moonlit Canyon Stone

View all neutral

Calm Lakeside Stone

Calm Stone Pathway

Coastal Pebble Smooth

Minimalist Zen Calm

Moonstone Orb Glimmer

Muted Haze Comfort