Back to palettes

Palette

Mystic Swamp Glow

Submerged in a mystical haze of deep, muted teal greens, echoing the secrets of a shadowy swamp.

DarkDark5 colors
More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F3F3E#2A5A57#3C7A78#559E9A#88BFBC

Palette guide

How to use Mystic Swamp Glow

Overview

The "Mystic Swamp Glow" palette immerses designs in a mysterious haze of deep, muted teal greens, echoing the secrets of a shadowy swamp. With a spectrum ranging from the profound `#1F3F3E` to the subtly glowing `#88BFBC`, and balanced mid-tones like `#2A5A57` and `#3C7A78`, this palette creates a moody, enchanted atmosphere. Designers can leverage these rich, dark tones to craft compelling visuals for fantasy themes, dark mode interfaces, or any project that benefits from an intriguing and sophisticated depth. The subtle luminosity of the lighter teals provides a captivating contrast against the darker, grounding hues.

Best used for

  • Fantasy game user interfaces and world-building
  • Dark mode themes for productivity or creative apps
  • Mysterious or gothic branding identities
  • Nature documentaries focusing on swamps or deep forests
  • Creative digital art and illustration with a moody feel
  • Websites requiring a sophisticated, dark aesthetic

Suggested color roles

primary

Utilize `#2A5A57` as a strong primary color for main content areas or key informational elements, offering a deep yet engaging presence.

secondary

Employ `#1F3F3E` for foundational elements, large text blocks, or backgrounds, providing a profound, anchoring base.

accent

Apply `#88BFBC` sparingly for subtle glowing effects, interactive states, or delicate graphic accents, providing a luminous contrast.

background

The darkest tone, `#1F3F3E`, makes an excellent, immersive background, setting a mysterious and sophisticated mood.

text

For dark backgrounds like `#1F3F3E`, use `#559E9A` or `#88BFBC` for main text. A pure white can also be used for headings to ensure maximum contrast.

Accessibility notes

  • Ensure high contrast when pairing lighter teals like `#88BFBC` on darker backgrounds such as `#1F3F3E` for optimal readability.
  • Verify that interactive elements, such as buttons or links, have clear focus states that meet WCAG accessibility standards.
  • Avoid using `#1F3F3E` and `#2A5A57` for text and background combinations, as their subtle difference may hinder readability for smaller text.
  • Test text legibility, especially for smaller font sizes, as dark green hues can sometimes be challenging on screens.

Recommended combinations

Deep Mystery

Use `#1F3F3E` for a deep, shadowy background, `#559E9A` for primary text, and `#2A5A57` for important headings or buttons.

#1F3F3E · #559E9A · #2A5A57

Subtle Glow

Apply `#2A5A57` for card backgrounds, `#88BFBC` for glowing icons or indicators, and `#3C7A78` for supporting text.

#2A5A57 · #88BFBC · #3C7A78

Layered Teal

Create layered UI elements with `#3C7A78` as a base, `#1F3F3E` for borders, and `#559E9A` for interactive text.

#3C7A78 · #1F3F3E · #559E9A

CSS variables

:root {
  --mystic-swamp-glow-1: #1F3F3E;
  --mystic-swamp-glow-2: #2A5A57;
  --mystic-swamp-glow-3: #3C7A78;
  --mystic-swamp-glow-4: #559E9A;
  --mystic-swamp-glow-5: #88BFBC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-swamp-glow": {
        1: "#1F3F3E",
        2: "#2A5A57",
        3: "#3C7A78",
        4: "#559E9A",
        5: "#88BFBC",
      }
    }
  }
}

Related searches

mystic swamp colorsdark teal green paletteshadowy nature themeenchanted forest uimoody green design

Palette colors

Hex values

Color 1#1F3F3E
·
Color 2#2A5A57
·
Color 3#3C7A78
·
Color 4#559E9A
·
Color 5#88BFBC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.3:1Fail
3.7:1AA18
5.6:1AA
2
1.5:1Fail
1.6:1Fail
2.5:1Fail
3.8:1AA18
3
2.3:1Fail
1.6:1Fail
1.6:1Fail
2.4:1Fail
4
3.7:1AA18
2.5:1Fail
1.6:1Fail
1.5:1Fail
5
5.6:1AA
3.8:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Mystic Swamp Glow

View all Dark
Deep Woodland Shrine
Abyssal Seaweed Garden
Deep Forest Murmur
Haunted Hallway Gloom
Midnight Ember Smoke
Midnight Forest Whisper