Palette

Mystic Jewel Shadow

A mysterious and luxurious collection of deep jewel tones, like ancient gems hidden within a shadowed velvet casket.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mystic Jewel Shadow 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 Jewel Shadow.

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

Data visualization

#1E2A1E#004F00#0F0F4A#4A0A0A#7F7F7F

Palette guide

How to use Mystic Jewel Shadow

Overview

The "Mystic Jewel Shadow" palette presents a luxurious and enigmatic collection of deep jewel tones, evoking the sense of ancient gems hidden in a shadowed velvet casket. With profound shades like the dark #1E2A1E, the rich #004F00, and the intense #0F0F4A, this palette provides a sophisticated foundation. The striking #4A0A0A adds a touch of dramatic elegance, while #7F7F7F offers a cool, balancing grey. This collection is perfect for designs requiring a dramatic, opulent, and mysterious aesthetic, ideal for high-end branding or projects with a gothic or fantasy flair.

Best used for

Luxury product branding and high-end packaging
Gothic or dark fantasy themed digital art
Elegant event invitations and decor
Dark mode UI for sophisticated applications
Fashion and jewelry editorial layouts
Theatrical or cinematic production design

Suggested color roles

primary

Utilize #1E2A1E as the foundational dark green-black, perfect for backgrounds, headers, or main branding elements to convey profound depth and luxury.

secondary

Employ #0F0F4A for supporting sections, subheadings, or large accent areas, offering a rich, mysterious blue.

accent

Apply #4A0A0A or #004F00 for striking accents, interactive elements, or graphic details, providing a bold and opulent focal point.

background

For a truly dark mood, use #1E2A1E. For contrast, #7F7F7F can serve as a subtle background for secondary information or lighter elements.

text

On dark backgrounds, a crisp white or very light grey is essential for readability. For text on #7F7F7F, use #1E2A1E or #0F0F4A for strong contrast.

Accessibility notes

Ensure very high contrast for text on dark backgrounds; white or near-white text on #1E2A1E is crucial for readability.
Avoid using #7F7F7F for text on dark backgrounds; its contrast may be insufficient for accessibility.
Test color pairings like #4A0A0A on #1E2A1E for decorative elements, but avoid for critical text.
Provide clear focus states for interactive elements, using a bright, contrasting color outside the palette if needed.

Recommended combinations

Shadowed Emerald

Excellent for a dramatic brand statement: deep green-black base, contrasting grey, and a rich emerald accent for key elements.

#1E2A1E · #7F7F7F · #004F00

Ruby & Sapphire

Ideal for luxurious content blocks or layered graphics, blending deep blue with a striking red and a dark anchor.

#0F0F4A · #4A0A0A · #1E2A1E

Mystic Glimmer

Perfect for subtle UI elements or metallic accents, using a mid-grey base with deep jewel tones for depth and detail.

#7F7F7F · #0F0F4A · #004F00

CSS variables

:root {
  --mystic-jewel-shadow-1: #1E2A1E;
  --mystic-jewel-shadow-2: #004F00;
  --mystic-jewel-shadow-3: #0F0F4A;
  --mystic-jewel-shadow-4: #4A0A0A;
  --mystic-jewel-shadow-5: #7F7F7F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-jewel-shadow": {
        1: "#1E2A1E",
        2: "#004F00",
        3: "#0F0F4A",
        4: "#4A0A0A",
        5: "#7F7F7F",
      }
    }
  }
}

Hex values

Color 1#1E2A1E

Color 2#004F00

Color 3#0F0F4A

Color 4#4A0A0A

Color 5#7F7F7F

Accessibility

Contrast checker

1.5:1Fail

1.2:1Fail

1:1Fail

3.7:1AA18

1.5:1Fail

1.8:1Fail

1.6:1Fail

2.5:1Fail

1.2:1Fail

1.8:1Fail

1.1:1Fail

4.4:1AA18

1:1Fail

1.6:1Fail

1.1:1Fail

3.9:1AA18

3.7:1AA18

2.5:1Fail

4.4:1AA18

3.9:1AA18

Similar palettes

More like Mystic Jewel Shadow

Enigmatic Shadow Tale

Gothic Cathedral Glint