Back to palettes

Palette

Mystic Moor

Deep, somber greens and greys, like a remote, mist-shrouded moor at dusk.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mystic Moor 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 Mystic Moor.

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

Data visualization

#383D43#6D7973#9DAB9D#BFD1BF#E1E8E1

Palette guide

How to use Mystic Moor

Overview

The Mystic Moor palette, with its deep and somber greens and grays, captures the essence of a remote, mist-shrouded landscape. Anchored by the profound #383D43 and transitioning through the earthy #6D7973 and #9DAB9D, it offers a mature and atmospheric aesthetic. The lighter shades, #BFD1BF and #E1E8E1, provide necessary contrast, mimicking faint light breaking through fog. This palette is exceptionally useful for designers and developers aiming to create environments that are grounded, contemplative, and slightly mysterious. It’s perfect for projects requiring a natural, organic feel with a touch of melancholy, offering excellent depth and visual texture for evocative digital experiences.

Best used for

  • Environmental or conservation websites
  • Fantasy game UI or concept art
  • Documentary film branding
  • Gothic or historical literature covers
  • Artistic photography websites (landscape focus)
  • High-end outdoor apparel branding

Suggested color roles

primary

Use #383D43 as a foundational primary color for backgrounds, strong headers, or robust UI components, providing depth.

secondary

Apply #6D7973 for secondary navigation, subheadings, or supporting design elements, offering a harmonious mid-tone.

accent

Utilize #9DAB9D as a subtle accent for highlighting interactive elements or adding a touch of muted vibrancy.

background

Employ #E1E8E1 as a clean, soft background for content areas, ensuring readability and a gentle, diffused light effect.

text

For optimal readability, use #383D43 for text on lighter backgrounds like #E1E8E1 or #BFD1BF. For darker backgrounds, use near-white.

Accessibility notes

  • Ensure #6D7973 on #9DAB9D or #BFD1BF has sufficient contrast for text, especially for small font sizes.
  • #383D43 offers excellent contrast against #E1E8E1, making it ideal for primary text and backgrounds.
  • Avoid using #9DAB9D for small text on #BFD1BF to prevent readability issues; check WCAG AA standards.
  • For critical information, always pair a dark color like #383D43 with the lightest available background #E1E8E1.

Recommended combinations

Misty Depths

Creates a deep, atmospheric background with clear, legible text, ideal for immersive storytelling.

#383D43 · #6D7973 · #E1E8E1

Foggy Gradient

Perfect for subtle gradients or layered elements, mimicking the soft transitions of a misty landscape.

#6D7973 · #9DAB9D · #BFD1BF

Earthy Contrast

Provides a robust dark base with a lighter highlight and a grounding accent, suitable for structured layouts.

#383D43 · #BFD1BF · #9DAB9D

CSS variables

:root {
  --mystic-moor-2-1: #383D43;
  --mystic-moor-2-2: #6D7973;
  --mystic-moor-2-3: #9DAB9D;
  --mystic-moor-2-4: #BFD1BF;
  --mystic-moor-2-5: #E1E8E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-moor-2": {
        1: "#383D43",
        2: "#6D7973",
        3: "#9DAB9D",
        4: "#BFD1BF",
        5: "#E1E8E1",
      }
    }
  }
}

Related searches

dark green gray palettesomber nature color schememisty moorland hex codesgloomy landscape UI colorsearthy dark web design

Palette colors

Hex values

Color 1#383D43
·
Color 2#6D7973
·
Color 3#9DAB9D
·
Color 4#BFD1BF
·
Color 5#E1E8E1
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
4.6:1AA
6.8:1AA
8.8:1AAA
2
2.4:1Fail
1.9:1Fail
2.8:1Fail
3.6:1AA18
3
4.6:1AA
1.9:1Fail
1.5:1Fail
1.9:1Fail
4
6.8:1AA
2.8:1Fail
1.5:1Fail
1.3:1Fail
5
8.8:1AAA
3.6:1AA18
1.9:1Fail
1.3:1Fail

Similar palettes

More like Mystic Moor

View all dark
Bayou Witch Gloom
Gloomwood Canopy Depths
Harvest Moon Gloom
Moody Urban Graphite
Volcanic Ash Bloom
Volcanic Ash Glaze