Palette

Mystic Rune Stone

Deep and earthy grays that capture the ancient strength of weathered, inscribed stone.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A4A4A#707070#9E9E9E#CFCFCF#2C2C2C

Palette guide

How to use Mystic Rune Stone

Overview

The "Mystic Rune Stone" palette (ID: mystic-rune-stone) presents a robust collection of deep and earthy grays, embodying the ancient strength of weathered, inscribed stone. From the profound `#2C2C2C` to the lighter `#CFCFCF`, with balanced tones like `#4A4A4A` and `#707070`, this monochrome selection offers timeless solidity. Designers can leverage these colors to convey durability, authenticity, and a grounded presence. It's an excellent choice for projects requiring a serious, dark mood without being stark, providing a sophisticated backdrop for content that demands respect and longevity in its aesthetic.

Best used for

Historical documentaries and educational platforms
Masculine or industrial branding projects
Dark mode interfaces for productivity applications
Geological or archaeological themed websites
Architectural visualization and abstract art
Branding for robust, enduring products

Suggested color roles

primary

Designate `#4A4A4A` as the main color for large text blocks, primary containers, or key informational areas, offering a strong, readable presence.

secondary

Utilize `#707070` for secondary content, borders, or subtle background patterns, providing a softer contrast.

accent

Apply `#CFCFCF` sparingly for highlights, interactive elements, or focal points, drawing attention with its lightness.

background

The deepest tone, `#2C2C2C`, serves as an excellent, solid background, providing a rich, dark canvas that makes lighter elements pop.

text

On dark backgrounds like `#2C2C2C`, use `#9E9E9E` or `#CFCFCF` for body text. For headings on lighter greys, a dark charcoal or black is recommended.

Accessibility notes

Ensure sufficient contrast for text, especially when pairing `#9E9E9E` on `#4A4A4A` or similar mid-tone combinations.
Verify that interactive elements like buttons, using `#707070`, have clear visual cues for states (e.g., hover, active) to meet WCAG standards.
Avoid placing `#2C2C2C` text on `#4A4A4A` backgrounds for small fonts, as the contrast may be too subtle for readability.
Always test final designs across various screen types and lighting conditions to confirm legibility of all text and UI elements.

Recommended combinations

Solid Foundation

Use `#2C2C2C` for a dominant dark background, `#9E9E9E` for primary text, and `#707070` for secondary information or dividers.

#2C2C2C · #9E9E9E · #707070

Layered Depth

Apply `#4A4A4A` for card backgrounds, `#CFCFCF` for important highlights or icons, and `#707070` for supporting text.

#4A4A4A · #CFCFCF · #707070

Subtle Structure

Use `#707070` for a base, `#4A4A4A` for borders or strong elements, and `#CFCFCF` for subtle interactive cues.

#707070 · #4A4A4A · #CFCFCF

CSS variables

:root {
  --mystic-rune-stone-1: #4A4A4A;
  --mystic-rune-stone-2: #707070;
  --mystic-rune-stone-3: #9E9E9E;
  --mystic-rune-stone-4: #CFCFCF;
  --mystic-rune-stone-5: #2C2C2C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-rune-stone": {
        1: "#4A4A4A",
        2: "#707070",
        3: "#9E9E9E",
        4: "#CFCFCF",
        5: "#2C2C2C",
      }
    }
  }
}

Hex values

Color 1#4A4A4A

Color 2#707070

Color 3#9E9E9E

Color 4#CFCFCF

Color 5#2C2C2C

Accessibility

Contrast checker

1.8:1Fail

3.3:1AA18

5.7:1AA

1.6:1Fail

1.8:1Fail

3.2:1AA18

2.8:1Fail

3.3:1AA18

1.8:1Fail

1.7:1Fail

5.2:1AA

5.7:1AA

3.2:1AA18

1.7:1Fail

9:1AAA

1.6:1Fail

2.8:1Fail

5.2:1AA

9:1AAA

Similar palettes

More like Mystic Rune Stone

Mystic Rune Stone

See it in context.

Ready when you are.

Built with Mystic Rune Stone.

How to use Mystic Rune Stone

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Solid Foundation

Layered Depth

Subtle Structure

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Mystic Rune Stone