Palette

Mystic Bog Glow

Deep, murky greens and blues with an otherworldly glow, inspired by a mysterious, ancient bog.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2a3e3c#4c6e6b#7b9f9a#a3cbc8#c8e9e7

Palette guide

How to use Mystic Bog Glow

Overview

The Mystic Bog Glow palette captures the enigmatic beauty of an ancient bog, blending deep, murky greens and blues with an otherworldly, ethereal glow. This collection features a very dark forest green-blue, #2a3e3c, a rich deep teal, #4c6e6b, and a softer, muted seafoam green, #7b9f9a. Lighter, glowing tones include a pale mint, #a3cbc8, and a very light, almost white aqua, #c8e9e7, which evokes a mysterious luminescence. This palette is perfect for designs aiming for a natural, mysterious, and tranquil aesthetic, ideal for evoking a sense of ancient wisdom and serene depth.

Best used for

Fantasy game environments
Mystical branding projects
Eco-conscious lifestyle blogs
Spa and meditation retreat websites
Nature documentary film titles
Artisan soap or candle packaging

Suggested color roles

primary

Use #2a3e3c (Deep Bog Green) for large background sections, headers, or footers to establish a strong, mysterious, and grounding presence.

secondary

Apply #4c6e6b (Deep Teal) for subheadings, navigation, or card backgrounds, offering a rich, supportive depth.

accent

Utilize #7b9f9a (Seafoam Green) for interactive elements, icons, or subtle highlights to add a touch of mysterious glow and visual interest.

background

Employ #c8e9e7 (Pale Aqua) as a very light and airy base for content, providing excellent contrast for darker text, evoking a misty feel.

text

White or a very light gray is essential for text on #2a3e3c and #4c6e6b. For text on #c8e9e7, a dark charcoal or black provides excellent readability.

Accessibility notes

Crucially, ensure high contrast (white or light text) when using #2a3e3c or #4c6e6b as backgrounds for text.
#c8e9e7 offers a bright background for dark text, ensuring good readability for main content.
Avoid using #a3cbc8 for small text on #c8e9e7 as their closeness in lightness might reduce contrast.
Always verify text and interactive element color combinations using accessibility tools to meet WCAG standards.

Recommended combinations

Ancient Depths

Perfect for a website hero section, using #2a3e3c as the dominant background, #c8e9e7 for main text, and #7b9f9a for a subtle call-to-action.

#2A3E3C · #C8E9E7 · #7B9F9A

Ethereal Mist

Great for creating layered visual effects or soft gradients, with #4c6e6b as the base, #a3cbc8 for overlays, and #7b9f9a for mid-tones.

#4C6E6B · #A3CBC8 · #7B9F9A

Glowing Reeds

Ideal for minimalist UI elements, using #a3cbc8 for card backgrounds, #2a3e3c for titles, and #4c6e6b for subtle icons.

#A3CBC8 · #2A3E3C · #4C6E6B

CSS variables

:root {
  --mystic-bog-glow-1: #2a3e3c;
  --mystic-bog-glow-2: #4c6e6b;
  --mystic-bog-glow-3: #7b9f9a;
  --mystic-bog-glow-4: #a3cbc8;
  --mystic-bog-glow-5: #c8e9e7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-bog-glow": {
        1: "#2a3e3c",
        2: "#4c6e6b",
        3: "#7b9f9a",
        4: "#a3cbc8",
        5: "#c8e9e7",
      }
    }
  }
}

Hex values

Color 1#2a3e3c

Color 2#4c6e6b

Color 3#7b9f9a

Color 4#a3cbc8

Color 5#c8e9e7

Accessibility

Contrast checker

2:1Fail

3.9:1AA18

6.4:1AA

8.8:1AAA

2:1Fail

1.9:1Fail

3.2:1AA18

4.3:1AA18

3.9:1AA18

1.9:1Fail

1.6:1Fail

2.2:1Fail

6.4:1AA

3.2:1AA18

1.6:1Fail

1.4:1Fail

8.8:1AAA

4.3:1AA18

2.2:1Fail

1.4:1Fail

Similar palettes

More like Mystic Bog Glow

View all dark

Ancient Forest Depths

Cosmic Dust Trail

Dark Forest Lore

Dark Orchid Mystery

Deep Forest Labyrinth

Enchanted Brew Kettle