Palette

Mystic Cavern Glow

The hidden luminescence within a mysterious underground grotto, filled with secrets and shimmering light.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mystic Cavern Glow 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 Cavern Glow.

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

Data visualization

#0F4C5C#006400#4B0082#708090#2F4F4F

Palette guide

How to use Mystic Cavern Glow

Overview

The Mystic Cavern Glow palette offers a deep, cool, and mysterious aesthetic, reminiscent of hidden underground grottoes. Featuring a rich blue-green #0F4C5C, an enigmatic dark green #006400, and a striking indigo #4B0082, it's balanced by the subtle grey of #708090 and the deep slate of #2F4F4F. This palette is excellent for creating immersive, sophisticated, and slightly dramatic digital experiences. Developers and designers can use these jewel-like tones to convey depth, luxury, or a sense of intrigue in their projects.

Best used for

Fantasy game user interfaces
Luxury brand websites
Scientific data visualizations
Dark mode application themes
Theatrical set designs
Abstract digital art

Suggested color roles

primary

Utilize #0F4C5C as a deep, grounding blue-green for main sections or prominent UI elements.

secondary

Employ #2F4F4F as a supportive dark slate for backgrounds or secondary content, adding subtle texture.

accent

Highlight key interactive elements or mystical effects with #4B0082, providing a rich, mysterious pop.

background

Use #2F4F4F as an immersive, dark background base, allowing lighter elements to truly glow.

text

A light grey or white provides optimal readability when used for text against the dark colors of this palette.

Accessibility notes

Ensure sufficient contrast for text on dark backgrounds, e.g., white text on #0F4C5C or #2F4F4F.
Avoid using #708090 for small text on #2F4F4F due to potential low contrast, impacting readability.
Reserve vibrant accents like #006400 for larger elements or non-critical information to prevent eye strain.
Test all color pairings for WCAG AA compliance, especially for interactive elements and form fields.

Recommended combinations

Deep Forest

Ideal for natural, dark themes or sections requiring a sense of lush depth and mystery.

#006400 · #0F4C5C · #2F4F4F

Mystic Depths

Perfect for mystical UI elements, glowing effects, or highlighting enigmatic features.

#4B0082 · #0F4C5C · #708090

Subtle Shine

Great for subtle highlights, icons, or secondary information that requires a muted but present accent.

#708090 · #2F4F4F · #006400

CSS variables

:root {
  --mystic-cavern-glow-2-1: #0F4C5C;
  --mystic-cavern-glow-2-2: #006400;
  --mystic-cavern-glow-2-3: #4B0082;
  --mystic-cavern-glow-2-4: #708090;
  --mystic-cavern-glow-2-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-cavern-glow-2": {
        1: "#0F4C5C",
        2: "#006400",
        3: "#4B0082",
        4: "#708090",
        5: "#2F4F4F",
      }
    }
  }
}

Hex values

Color 1#0F4C5C

Color 2#006400

Color 3#4B0082

Color 4#708090

Color 5#2F4F4F

Accessibility

Contrast checker

1.3:1Fail

1.4:1Fail

2.3:1Fail

1.1:1Fail

1.3:1Fail

1.7:1Fail

1.8:1Fail

1.2:1Fail

1.4:1Fail

1.7:1Fail

3.2:1AA18

1.5:1Fail

2.3:1Fail

1.8:1Fail

3.2:1AA18

2.2:1Fail

1.1:1Fail

1.2:1Fail

1.5:1Fail

2.2:1Fail

Similar palettes

More like Mystic Cavern Glow

Midnight Ocean Trench

Northern Lights Veil