Back to palettes

Palette

Mystic Moor Twilight

A deep and muted palette, evoking the mysterious and foggy atmosphere of a twilight moorland.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F2F3D#4C4C5C#6E6E7E#9595A5#BDBDC8

Palette guide

How to use Mystic Moor Twilight

Overview

The Mystic Moor Twilight palette evokes the mysterious and foggy atmosphere of a moorland at dusk, presenting a deep and muted range of grays with subtle purple undertones. Starting with the profound #2F2F3D and gradually lightening through #4C4C5C, #6E6E7E, and #9595A5, it culminates in the gentle #BDBDC8. This collection is ideal for designers and developers seeking to create sophisticated, introspective, and slightly eerie digital experiences. The harmonious progression of shades allows for seamless UI transitions and depth, perfect for projects requiring a mature, understated elegance with a touch of the unknown. It's particularly effective for conveying a sense of calm contemplation or quiet drama.

Best used for

  • Gothic or mystery novel websites
  • Atmospheric video game interfaces
  • Luxury dark mode UI designs
  • Abstract art exhibition branding
  • High-end fashion or jewelry websites
  • Cinematic title sequences or film posters

Suggested color roles

primary

Use #2F2F3D as a deep, anchoring primary color for backgrounds, headers, or robust UI elements, establishing a somber mood.

secondary

Apply #4C4C5C for secondary navigation, subheadings, or subtle dividers, maintaining the palette's depth.

accent

Utilize #9595A5 as a gentle accent for interactive elements, icons, or subtle highlights, providing a soft lift.

background

Employ #BDBDC8 as a light, misty background for content areas, ensuring readability while maintaining the twilight feel.

text

For optimal readability on lighter backgrounds, #2F2F3D provides excellent contrast. On darker shades, use #BDBDC8 or near-white.

Accessibility notes

  • Ensure sufficient contrast when using #6E6E7E for text on #9595A5; consider larger font sizes.
  • #2F2F3D offers excellent contrast against #BDBDC8 for primary text, meeting WCAG AA standards.
  • Avoid pairing #9595A5 text with #BDBDC8 for small text to prevent low readability; check contrast ratios carefully.
  • For critical information, always pair a dark color like #2F2F3D with the lightest available background #BDBDC8.

Recommended combinations

Deep Twilight

Creates a profound dark mode theme with clear readability, perfect for immersive content experiences.

#2F2F3D · #4C4C5C · #BDBDC8

Misty Layers

Ideal for layered UI elements or subtle visual effects, mimicking the gradual fading of light.

#4C4C5C · #6E6E7E · #9595A5

Subtle Highlight

Combines a dark base with a light background and a gentle accent for sophisticated, understated designs.

#2F2F3D · #BDBDC8 · #9595A5

CSS variables

:root {
  --mystic-moor-twilight-1: #2F2F3D;
  --mystic-moor-twilight-2: #4C4C5C;
  --mystic-moor-twilight-3: #6E6E7E;
  --mystic-moor-twilight-4: #9595A5;
  --mystic-moor-twilight-5: #BDBDC8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-moor-twilight": {
        1: "#2F2F3D",
        2: "#4C4C5C",
        3: "#6E6E7E",
        4: "#9595A5",
        5: "#BDBDC8",
      }
    }
  }
}

Related searches

dark gray purple palettemysterious moor twilight colorsmuted landscape UI schemeeerie elegant web designfoggy purple gray hex codes

Palette colors

Hex values

Color 1#2F2F3D
·
Color 2#4C4C5C
·
Color 3#6E6E7E
·
Color 4#9595A5
·
Color 5#BDBDC8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
4.5:1AA18
7.1:1AAA
2
1.6:1Fail
1.7:1Fail
2.9:1Fail
4.5:1AA
3
2.6:1Fail
1.7:1Fail
1.7:1Fail
2.7:1Fail
4
4.5:1AA18
2.9:1Fail
1.7:1Fail
1.6:1Fail
5
7.1:1AAA
4.5:1AA
2.7:1Fail
1.6:1Fail

Similar palettes

More like Mystic Moor Twilight

View all dark
Gothic Library Veil
Gothic Window Glow
Midnight Library Study
Mystic Fog Shroud
Abyssal Void Hues
Acid Rain Gloom