Back to palettes

Palette

Mystic Moor

A palette of deep purples and hazy blues, reminiscent of a mysterious, fog-laden moor at twilight.

CoolElegant5 colors
More Cool 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

#4B0082#6A5ACD#87CEFA#ADD8E6#D8BFD8

Palette guide

How to use Mystic Moor

Overview

The Mystic Moor palette, with its deep purples and hazy blues, beautifully evokes a fog-laden moor at twilight, offering an elegant and mystical aesthetic. From the rich #4B0082 and vibrant #6A5ACD to the ethereal #87CEFA, #ADD8E6, and soft #D8BFD8, this collection provides a seamless gradient of cool tones. Designers and developers can leverage these shades to create enchanting digital experiences, perfect for projects requiring a touch of fantasy, sophistication, and tranquility. The diverse range of values allows for dynamic visual hierarchies and captivating atmospheric effects, making it ideal for web interfaces, branding, and digital art that seeks to inspire wonder and calm.

Best used for

  • Fantasy or magical themed websites
  • Luxury event invitations or branding
  • Meditation and wellness app interfaces
  • Artistic photography showcases
  • E-commerce for artisanal crafts or jewelry
  • Nature-inspired digital illustrations

Suggested color roles

primary

Use #4B0082 as a deep, anchoring primary color for headers, important calls-to-action, or backgrounds to establish elegance.

secondary

Apply #6A5ACD for subheadings, navigation links, or secondary information, providing a vibrant yet harmonious contrast.

accent

Utilize #87CEFA as a captivating accent for interactive elements, icons, or subtle highlights, drawing attention effectively.

background

Employ #D8BFD8 as a soft, airy background for content areas, ensuring readability and a gentle, ethereal feel.

text

For optimal readability on lighter backgrounds, #4B0082 provides excellent contrast. On darker shades, use #D8BFD8 or white.

Accessibility notes

  • Ensure sufficient contrast when using #ADD8E6 for text on #D8BFD8; consider larger font sizes or bolder weights.
  • #4B0082 offers excellent contrast against #D8BFD8 for primary text, meeting WCAG AA standards.
  • Avoid using #87CEFA for small text on #ADD8E6 to prevent readability issues; check contrast ratios carefully.
  • For critical information, always pair a dark color like #4B0082 or #6A5ACD with the lightest available background #D8BFD8.

Recommended combinations

Twilight Gradient

Creates a deep, mesmerizing gradient for backgrounds or hero sections, evoking depth and magic.

#4B0082 · #6A5ACD · #87CEFA

Misty Contrast

Pairs a strong primary with a light background and a hazy accent for clear hierarchy and ethereal visual appeal.

#4B0082 · #D8BFD8 · #ADD8E6

Soft Haze

Ideal for soft, atmospheric overlays or subtle design elements, mimicking the gentle transition of fog.

#87CEFA · #ADD8E6 · #D8BFD8

CSS variables

:root {
  --mystic-moor-1: #4B0082;
  --mystic-moor-2: #6A5ACD;
  --mystic-moor-3: #87CEFA;
  --mystic-moor-4: #ADD8E6;
  --mystic-moor-5: #D8BFD8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-moor": {
        1: "#4B0082",
        2: "#6A5ACD",
        3: "#87CEFA",
        4: "#ADD8E6",
        5: "#D8BFD8",
      }
    }
  }
}

Related searches

mystical purple blue palettefoggy moorland colorselegant twilight hex codesfantasy UI color schemecool purple blue web design

Palette colors

Hex values

Color 1#4B0082
·
Color 2#6A5ACD
·
Color 3#87CEFA
·
Color 4#ADD8E6
·
Color 5#D8BFD8
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
7.5:1AAA
8.5:1AAA
7.6:1AAA
2
2.4:1Fail
3.1:1AA18
3.5:1AA18
3.1:1AA18
3
7.5:1AAA
3.1:1AA18
1.1:1Fail
1:1Fail
4
8.5:1AAA
3.5:1AA18
1.1:1Fail
1.1:1Fail
5
7.6:1AAA
3.1:1AA18
1:1Fail
1.1:1Fail

Similar palettes

More like Mystic Moor

View all Cool
Cosmic Dust Trail
Amethyst Cavern Glow
Moon Garden Enchant
Moonlit Ocean Glow
Nebula Cloud
Twilight Aura