Palette

Woodland Shroud Hues

A serene, misty path winding through a deep woodland, bathed in cool, diffused light.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Woodland Shroud Hues 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 Woodland Shroud Hues.

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

Data visualization

#2F3E46#526760#84A98C#A7C9A7#CCF2BF

Palette guide

How to use Woodland Shroud Hues

Overview

The Woodland Shroud Hues palette evokes the serene and misty ambiance of a deep woodland bathed in cool, diffused light. Featuring a range of muted greens and blue-greys, from the deep #2F3E46 to the airy #CCF2BF, this palette is ideal for creating calm and sophisticated designs. Developers and designers can utilize the subtle variations, including #526760, #84A98C, and #A7C9A7, to build interfaces that feel tranquil and harmonious. It's perfect for projects that require a muted, natural aesthetic with a contemporary, cool undertone, reflecting quiet contemplation.

Best used for

Calm and meditative application interfaces
Minimalist web design projects
Environmental documentary branding
Spa and relaxation service marketing
Winter or muted fashion collection branding
Healthcare and wellness digital platforms

Suggested color roles

primary

#2F3E46 serves as a deep, cool anchor, excellent for main structural elements, headers, or dark mode themes.

secondary

#526760 provides a muted blue-green, suitable for secondary content blocks or subtle accents.

accent

#84A98C offers a soft, cool green highlight, perfect for interactive elements or visual cues.

background

#CCF2BF acts as a light, fresh, and airy base, providing an expansive and calm backdrop.

text

#2F3E46 is a dark, cool green that ensures excellent legibility for body text, or use black for universal readability.

Accessibility notes

Ensure #2F3E46 on #CCF2BF provides excellent contrast for body text (WCAG AA).
Verify sufficient contrast for #526760 when used as text on lighter backgrounds like #CCF2BF.
Avoid using #A7C9A7 or #CCF2BF for small text on white or very light backgrounds.
Consider white or a very light grey for text on darker hues like #2F3E46 or #526760.

Recommended combinations

Misty Depths

Creates a sense of profound depth and mystery, ideal for headers or background gradients.

#2F3E46 · #526760 · #84A98C

Shrouded Path

Ideal for light, airy sections, evoking diffused light and gentle, cool textures.

#84A98C · #A7C9A7 · #CCF2BF

Cool Serenity

A balanced trio for general UI, offering clear hierarchy with a calming, cool touch.

#2F3E46 · #CCF2BF · #526760

CSS variables

:root {
  --woodland-shroud-hues-1: #2F3E46;
  --woodland-shroud-hues-2: #526760;
  --woodland-shroud-hues-3: #84A98C;
  --woodland-shroud-hues-4: #A7C9A7;
  --woodland-shroud-hues-5: #CCF2BF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "woodland-shroud-hues": {
        1: "#2F3E46",
        2: "#526760",
        3: "#84A98C",
        4: "#A7C9A7",
        5: "#CCF2BF",
      }
    }
  }
}

Hex values

Color 1#2F3E46

Color 2#526760

Color 3#84A98C

Color 4#A7C9A7

Color 5#CCF2BF

Accessibility

Contrast checker

1.8:1Fail

4.2:1AA18

6.1:1AA

9:1AAA

1.8:1Fail

2.3:1Fail

3.3:1AA18

4.9:1AA

4.2:1AA18

2.3:1Fail

1.4:1Fail

2.1:1Fail

6.1:1AA

3.3:1AA18

1.4:1Fail

1.5:1Fail

9:1AAA

4.9:1AA

2.1:1Fail

1.5:1Fail

Similar palettes

More like Woodland Shroud Hues

Enchanted Forest Stream