Palette

Moonlit Canyon Gloom

Deep, cool blues and greys conjure the eerie quiet and shadowed depths of a canyon under a sliver of moonlight.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E3A4A#4F5E6E#7A8C9B#222B38#1A222A

Palette guide

How to use Moonlit Canyon Gloom

Overview

The Moonlit Canyon Gloom palette conjures the eerie quiet and shadowed depths of a canyon under a sliver of moonlight, featuring deep, cool blues and grays. It spans from the profound #1A222A and #222B38 to the slightly lighter #2E3A4A and #4F5E6E, with #7A8C9B offering the only notable contrast. This palette is designed for creators seeking to evoke mystery, drama, or a sophisticated, moody atmosphere. Its intensely dark and muted tones are perfect for luxury dark mode interfaces, dramatic digital art, or branding that values depth and intrigue over brightness. Developers will find these shades excellent for creating immersive, eye-friendly dark themes that promote focus and a sense of gravitas.

Best used for

Dramatic website themes
Luxury dark mode applications
Mysterious brand identity
Cinematic video game interfaces
Abstract and moody digital art
High-end tech product design

Suggested color roles

primary

Utilize #1A222A as the deepest dark for foundational backgrounds, setting an immersive and profound tone.

secondary

Apply #2E3A4A for secondary panels, cards, or containers, offering subtle visual breaks within the dark theme.

accent

Employ #7A8C9B sparingly for critical highlights, interactive elements, or key text, providing essential contrast.

background

The profound #1A222A or #222B38 makes an excellent immersive dark background, fostering focus and mood.

text

For readability, use #7A8C9B or a bright white for body text. Darker shades are suitable for very large, decorative text.

Accessibility notes

High contrast is crucial for readability; ensure text is always significantly lighter than its background, e.g., #7A8C9B on #1A222A.
Avoid placing any dark colors on each other for text; reserve them for background layering.
Interactive elements must have clear visual feedback using the lightest color, #7A8C9B.
Consider larger font sizes or bolding for important text to enhance readability within this dark palette.

Recommended combinations

Canyon Depths

Creates an incredibly deep, layered dark background, ideal for immersive and dramatic sections.

#1A222A · #222B38 · #2E3A4A

Moonlit Edge

Provides subtle contrast and hierarchy for UI elements, with #7A8C9B as a gentle highlight.

#4F5E6E · #7A8C9B · #2E3A4A

Shadow Play

A balanced dark combination for sleek interfaces, offering understated elegance and crucial contrast.

#222B38 · #7A8C9B · #4F5E6E

CSS variables

:root {
  --moonlit-canyon-gloom-1: #2E3A4A;
  --moonlit-canyon-gloom-2: #4F5E6E;
  --moonlit-canyon-gloom-3: #7A8C9B;
  --moonlit-canyon-gloom-4: #222B38;
  --moonlit-canyon-gloom-5: #1A222A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-canyon-gloom": {
        1: "#2E3A4A",
        2: "#4F5E6E",
        3: "#7A8C9B",
        4: "#222B38",
        5: "#1A222A",
      }
    }
  }
}

Hex values

Color 1#2E3A4A

Color 2#4F5E6E

Color 3#7A8C9B

Color 4#222B38

Color 5#1A222A

Accessibility

Contrast checker

1.7:1Fail

3.3:1AA18

1.2:1Fail

1.4:1Fail

1.7:1Fail

1.9:1Fail

2.1:1Fail

2.4:1Fail

3.3:1AA18

1.9:1Fail

4.1:1AA18

4.6:1AA

1.2:1Fail

2.1:1Fail

4.1:1AA18

1.1:1Fail

1.4:1Fail

2.4:1Fail

4.6:1AA

1.1:1Fail

Similar palettes

More like Moonlit Canyon Gloom