Back to palettes

Palette

Mystic Rune Stone

A grounded palette of stony greys, reminiscent of ancient, weather-worn runes carved into silent monuments.

neutralminimal5 colors
More neutral 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

#D0CABF#A5A7A7#797E7E#515352#383A38

Palette guide

How to use Mystic Rune Stone

Overview

The "Mystic Rune Stone" palette (ID: mystic-rune-stone-2) offers a grounded and earthy collection of stony greys, reminiscent of ancient, weather-worn monuments. With a range from the light, almost warm `#D0CABF` to the deep, anchoring `#383A38`, and balanced mid-tones like `#A5A7A7` and `#797E7E`, this palette exudes a minimalist and organic feel. Designers can effectively use these neutrals to create serene, contemplative spaces or robust, natural interfaces. The subtle variations in tone provide depth without overwhelming, making it ideal for projects seeking a quiet strength and timeless aesthetic.

Best used for

  • Zen meditation apps and wellness platforms
  • Architectural portfolios and design studios
  • Branding for natural, artisanal, or handcrafted products
  • Calm and understated user interfaces
  • Earthy web design for environmental or historical themes
  • Visuals for nature-inspired product packaging

Suggested color roles

primary

Use `#797E7E` as a versatile mid-tone for main content areas or interactive elements, providing a balanced and readable base.

secondary

Employ `#A5A7A7` for supporting text, subheadings, or subtle background patterns, offering a lighter, harmonious complement.

accent

Apply `#D0CABF` as a warm, subtle highlight for decorative elements, hover states, or to add a touch of natural warmth.

background

A deep tone like `#383A38` or `#515352` works well for a grounding background, while `#D0CABF` can create a light, airy canvas.

text

On light backgrounds like `#D0CABF`, use `#383A38` or a dark charcoal for body text. For dark backgrounds, `#A5A7A7` or `#D0CABF` ensures good legibility.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing mid-tones like `#A5A7A7` on backgrounds such as `#797E7E`.
  • Verify that `#D0CABF` (lightest) provides adequate contrast against `#515352` or `#383A38` for headlines or key information.
  • Interactive elements should clearly indicate their state (e.g., hover, active) with a noticeable shift in tone or color from the palette.
  • Avoid using `#383A38` on `#515352` for small text, as the contrast might be too low for comfortable reading.

Recommended combinations

Earthy Base

Use `#383A38` for a deep, grounding background, `#D0CABF` for headings, and `#797E7E` for body text to maintain readability.

#383A38 · #D0CABF · #797E7E

Calm Interface

Apply `#D0CABF` as a clean background, `#515352` for main content text, and `#A5A7A7` for secondary UI elements.

#D0CABF · #515352 · #A5A7A7

Stone Depth

Create layered elements with `#515352` for cards, `#A5A7A7` for details, and `#383A38` for strong borders or dividers.

#515352 · #A5A7A7 · #383A38

CSS variables

:root {
  --mystic-rune-stone-2-1: #D0CABF;
  --mystic-rune-stone-2-2: #A5A7A7;
  --mystic-rune-stone-2-3: #797E7E;
  --mystic-rune-stone-2-4: #515352;
  --mystic-rune-stone-2-5: #383A38;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-rune-stone-2": {
        1: "#D0CABF",
        2: "#A5A7A7",
        3: "#797E7E",
        4: "#515352",
        5: "#383A38",
      }
    }
  }
}

Related searches

earthy grey paletteancient stone colorsminimalist neutral thememeditation app colorsorganic design palette

Palette colors

Hex values

Color 1#D0CABF
·
Color 2#A5A7A7
·
Color 3#797E7E
·
Color 4#515352
·
Color 5#383A38
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
4.8:1AA
7:1AAA
2
1.5:1Fail
1.7:1Fail
3.2:1AA18
4.7:1AA
3
2.5:1Fail
1.7:1Fail
1.9:1Fail
2.8:1Fail
4
4.8:1AA
3.2:1AA18
1.9:1Fail
1.5:1Fail
5
7:1AAA
4.7:1AA
2.8:1Fail
1.5:1Fail

Similar palettes

More like Mystic Rune Stone

View all neutral