Palette

Bayou Mist Shroud

A deep and moody palette evoking the secretive, shadowed atmosphere of a misty bayou at twilight.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Bayou Mist 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 Bayou Mist Shroud.

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

Data visualization

#1B2C26#3E5754#6A8681#9BB6B2#101B18

Palette guide

How to use Bayou Mist Shroud

Overview

The Bayou Mist Shroud palette offers a deep and moody collection, evoking the secretive, shadowed atmosphere of a misty bayou at twilight. Featuring the deepest forest green #101B18, dark teal-grey #1B2C26, and muted sage green #9BB6B2, this collection is perfect for designers and developers seeking a mysterious, cool, and atmospheric aesthetic. The additional shades of #3E5754 and #6A8681 complete a spectrum that provides subtle variations, creating profound depth and a sense of natural intrigue. This palette is ideal for projects that require a tranquil yet enigmatic presence, emphasizing subtle textures and a grounding, earthy feel.

Best used for

Mysterious storytelling websites and digital experiences
Indie game design (atmospheric environments)
Eco-tourism branding (swamp/wetland focus)
Dark mode application themes and UI/UX
Photography portfolios of natural landscapes
Branding for artisanal, rustic, or organic products

Suggested color roles

primary

Utilize the deepest forest green #101B18 for foundational backgrounds, bold typography, or dominant sections, providing a powerful anchor.

secondary

Apply the dark teal-grey #1B2C26 for main content areas, headers, or significant textual blocks, offering strong readability.

accent

Employ the muted sage green #9BB6B2 for subtle highlights, interactive elements, or delicate UI components, adding a touch of lightness.

background

Use the mid-tone green-grey #3E5754 for a soft, atmospheric base, or #101B18 for a deep, immersive dark theme.

text

Integrate the light grey-green #6A8681 for secondary text on dark backgrounds, or use white or near-white for optimal readability on #101B18 or #1B2C26.

Accessibility notes

The deepest forest green #101B18 and dark teal-grey #1B2C26 provide excellent contrast for white or light-colored text like #9BB6B2.
Ensure #6A8681 text on #3E5754 background meets WCAG contrast requirements for legibility.
For primary body text on darker backgrounds, use white or a very light grey for optimal readability.
Avoid pairing #9BB6B2 with #6A8681 for text and background due to potential low contrast, which can hinder readability.

Recommended combinations

Deep Atmosphere

Create an immersive, dark, and mysterious feel for backgrounds and primary content areas, ideal for high-impact visual statements.

#101B18 · #1B2C26 · #3E5754

Misty Contrast

Highlight elements within a dark theme, providing a subtle yet distinct contrast for secondary information or interactive components.

#1B2C26 · #9BB6B2 · #6A8681

Subtle Layers

Design a smooth, serene, and natural gradient for sections requiring a sophisticated visual flow or background texture.

#3E5754 · #6A8681 · #9BB6B2

CSS variables

:root {
  --bayou-mist-shroud-1: #1B2C26;
  --bayou-mist-shroud-2: #3E5754;
  --bayou-mist-shroud-3: #6A8681;
  --bayou-mist-shroud-4: #9BB6B2;
  --bayou-mist-shroud-5: #101B18;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "bayou-mist-shroud": {
        1: "#1B2C26",
        2: "#3E5754",
        3: "#6A8681",
        4: "#9BB6B2",
        5: "#101B18",
      }
    }
  }
}

Hex values

Color 1#1B2C26

Color 2#3E5754

Color 3#6A8681

Color 4#9BB6B2

Color 5#101B18

Accessibility

Contrast checker

1.9:1Fail

3.7:1AA18

6.8:1AA

1.2:1Fail

1.9:1Fail

2:1Fail

3.6:1AA18

2.3:1Fail

3.7:1AA18

2:1Fail

1.8:1Fail

4.5:1AA18

6.8:1AA

3.6:1AA18

1.8:1Fail

8.2:1AAA

1.2:1Fail

2.3:1Fail

4.5:1AA18

8.2:1AAA

Similar palettes

More like Bayou Mist Shroud

View all dark

Bayou Witch Gloom

Deep Ocean Trench

Deep Sea Luminescence

Midnight Tempest Shadow

Nocturnal Ocean Tide

Ocean Void Echo