Palette

Mystic Rune Circle

Shadowy greys and muted tones evoke the ancient, quiet power of a mystic stone circle.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#696969#808080#A9A9A9#D3D3D3#4F4F4F

Palette guide

How to use Mystic Rune Circle

Overview

The "Mystic Rune Circle" palette offers a sophisticated range of monochrome greys, perfect for designs that aim for ancient, quiet power and mystery. With a spectrum from the deep `#4F4F4F` to the subtle `#D3D3D3`, and balanced mid-tones like `#696969` and `#808080`, this palette provides a solid foundation for understated elegance. Designers can leverage these tones for a sense of timelessness and gravitas, ideal for creating a calm yet intriguing user experience. Its shadowy nature makes it versatile for backgrounds, text, and accent elements in various digital and print applications, ensuring a cohesive and strong visual identity.

Best used for

Ancient history websites or educational content
Minimalist user interfaces requiring a dark theme
Branding for luxury, exclusive, or mysterious products
Architectural visualization and interior design concepts
Background textures and overlays in digital art
Mood-setting for fantasy or dark academia themes

Suggested color roles

primary

Use `#696969` as a foundational grey for primary content areas or main structural elements, providing a balanced, solid presence.

secondary

Employ `#808080` for secondary information, borders, or subtle distinctions, offering a slightly lighter, supportive tone.

accent

Apply `#D3D3D3` sparingly for highlights, interactive states, or subtle graphical elements to provide a delicate, almost glowing contrast.

background

Utilize `#4F4F4F` for deep, immersive backgrounds, establishing a dark, mysterious canvas that grounds the entire design.

text

For dark backgrounds like `#4F4F4F`, use `#A9A9A9` or a pure white for optimal readability. On lighter grey backgrounds, a dark charcoal or black is recommended.

Accessibility notes

Ensure sufficient contrast when pairing `#D3D3D3` text on mid-greys like `#A9A9A9` for readability, especially for body copy.
Verify that interactive elements, such as buttons or links using `#808080`, have clear focus states that meet accessibility standards.
When using `#4F4F4F` as a background, pair it with lighter text colors like `#A9A9A9` or `#D3D3D3` to maintain WCAG AA contrast.
Avoid using `#696969` and `#808080` for text and background combinations, as their subtle difference may hinder readability.

Recommended combinations

Deep Foundation

Ideal for a dark mode interface: `#4F4F4F` as background, `#A9A9A9` for main text, and `#D3D3D3` for headings or accents.

#4F4F4F · #A9A9A9 · #D3D3D3

Subtle Structure

Use `#696969` for card backgrounds, `#4F4F4F` for borders or dividers, and `#808080` for secondary text in a subtle hierarchy.

#696969 · #4F4F4F · #808080

Highlight & Depth

Apply `#808080` for containers, `#D3D3D3` for interactive elements, and `#696969` for supporting text to create visual depth.

#808080 · #D3D3D3 · #696969

CSS variables

:root {
  --mystic-rune-circle-1: #696969;
  --mystic-rune-circle-2: #808080;
  --mystic-rune-circle-3: #A9A9A9;
  --mystic-rune-circle-4: #D3D3D3;
  --mystic-rune-circle-5: #4F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-rune-circle": {
        1: "#696969",
        2: "#808080",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#4F4F4F",
      }
    }
  }
}

Hex values

Color 1#696969

Color 2#808080

Color 3#A9A9A9

Color 4#D3D3D3

Color 5#4F4F4F

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

3.7:1AA18

1.5:1Fail

1.4:1Fail

1.7:1Fail

2.6:1Fail

2.1:1Fail

2.3:1Fail

1.7:1Fail

1.6:1Fail

3.5:1AA18

3.7:1AA18

2.6:1Fail

1.6:1Fail

5.5:1AA

1.5:1Fail

2.1:1Fail

3.5:1AA18

5.5:1AA

Similar palettes

More like Mystic Rune Circle