Palette

Mystic Forest Shroud

A deeply atmospheric palette drawing inspiration from the shadowy depths of an ancient, enigmatic forest.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mystic Forest Shroud 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 Forest Shroud.

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

Data visualization

#2F4F4F#5F9EA0#4682B4#36454F#008080

Palette guide

How to use Mystic Forest Shroud

Overview

The Mystic Forest Shroud palette (ID: mystic-forest-shroud) draws inspiration from the shadowy depths of an ancient, enigmatic forest, offering a deeply atmospheric collection of cool teals and blues. With hues like the deep #2F4F4F, the rich #5F9EA0, and the striking #4682B4, this palette is designed to evoke mystery, sophistication, and a sense of hidden wonder. It's an excellent choice for designers and developers aiming to create compelling, modern, and intriguing experiences. These cool, deep tones work harmoniously to build a strong visual narrative, perfect for projects that require a touch of the unknown and a sophisticated allure.

Best used for

Ocean conservation and marine-themed digital projects
Tech startups and innovative brand identities
Abstract art and digital installations with cool tones
Modern interior design concepts and mood boards
Sophisticated digital interfaces and dark mode themes
Brand identity for intellectual or mysterious themes

Suggested color roles

primary

Use #2F4F4F as a deep, cool teal-grey for main content areas, providing a sophisticated and stable presence.

secondary

Employ #5F9EA0 as a mid-tone, slightly brighter teal for supporting elements, adding depth and subtle emphasis.

accent

Apply #4682B4 as a striking steel blue accent, perfect for calls to action, important highlights, or elements needing a vibrant pop.

background

Utilize #36454F as a dark, grounding base, setting a mysterious and immersive atmosphere for other colors to emerge.

text

Choose #5F9EA0 for primary body text against darker backgrounds, ensuring good readability, or a pure white for optimal contrast.

Accessibility notes

Ensure high contrast when using #5F9EA0 or white text against the darker backgrounds like #36454F or #2F4F4F.
Use #4682B4 for interactive elements to ensure they are clearly discernible against darker page elements.
Avoid placing mid-tone text (e.g., #5F9EA0) on similar backgrounds (e.g., #2F4F4F) without checking contrast ratios.
Provide clear focus states for UI elements, perhaps using #4682B4 to draw attention or a distinct border.

Recommended combinations

Deep Waters

Creates layered, deep cool tones, ideal for immersive backgrounds or sections requiring a sense of oceanic depth.

#36454F · #2F4F4F · #008080

Hidden Stream

Offers brighter blues with a deep base, suitable for content cards or sections needing a subtle lift and focus.

#5F9EA0 · #4682B4 · #2F4F4F

Mystic Contrast

Provides a strong dark background with brighter text and a striking accent for engaging and readable compositions.

#36454F · #5F9EA0 · #4682B4

CSS variables

:root {
  --mystic-forest-shroud-1: #2F4F4F;
  --mystic-forest-shroud-2: #5F9EA0;
  --mystic-forest-shroud-3: #4682B4;
  --mystic-forest-shroud-4: #36454F;
  --mystic-forest-shroud-5: #008080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-forest-shroud": {
        1: "#2F4F4F",
        2: "#5F9EA0",
        3: "#4682B4",
        4: "#36454F",
        5: "#008080",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#5F9EA0

Color 3#4682B4

Color 4#36454F

Color 5#008080

Accessibility

Contrast checker

2.9:1Fail

2.2:1Fail

1.1:1Fail

1.9:1Fail

2.9:1Fail

1.3:1Fail

3.2:1AA18

1.6:1Fail

2.2:1Fail

1.3:1Fail

2.4:1Fail

1.2:1Fail