Palette

Winter Shadow Grove

A cool, somber palette reflecting the quiet shadows and muted tones of a winter forest grove.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Winter Shadow Grove 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 Winter Shadow Grove.

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

Data visualization

#1F2826#3C4745#6B7774#9CABA9#D1E0DE

Palette guide

How to use Winter Shadow Grove

Overview

The Winter Shadow Grove palette offers a cool, somber blend reflecting the quiet shadows and muted tones of a winter forest grove. With deep, earthy shades like #1F2826 and #3C4745, complemented by softer, misty greens such as #6B7774, #9CABA9, and the airy #D1E0DE, this palette is ideal for designers and developers seeking a moody yet sophisticated aesthetic. It’s perfect for creating immersive, atmospheric digital experiences, sophisticated branding, or editorial designs that evoke introspection and natural depth. This collection promotes a sense of grounded elegance and a serene, contemplative atmosphere.

Best used for

Nature-inspired luxury brands
Dark mode UI for content-heavy applications
Photography websites showcasing natural landscapes
Environmental or conservation organization branding
Art gallery or museum digital platforms
Rustic-chic interior design concepts

Suggested color roles

primary

Establishes a robust, grounding base for main sections or dark mode backgrounds using #1F2826.

secondary

Provides a rich, supportive tone for significant content blocks or navigation with #3C4745.

accent

A subtle, organic accent for interactive elements or highlights without being overly bright using #6B7774.

background

Offers a soft, breathable canvas that lightens the overall mood while retaining sophistication, utilizing #D1E0DE.

text

Ideal for primary body text against lighter backgrounds, ensuring high readability with #1F2826.

Accessibility notes

Ensure adequate contrast for text using #1F2826 or #3C4745 against #D1E0DE or #9CABA9.
When using #6B7774 for text, ensure it’s on a sufficiently light background like #D1E0DE to meet WCAG AA.
Avoid placing #9CABA9 text directly on #D1E0DE without careful contrast checking.
For dark mode, pair lighter shades like #9CABA9 or #D1E0DE for text against #1F2826 or #3C4745 backgrounds.

Recommended combinations

Forest Depths

Creates a strong, moody contrast suitable for dark themes, luxury branding, or impactful headers.

#1F2826 · #D1E0DE · #3C4745

Misty Grove

Excellent for subtle gradients, layered UI elements, or providing visual hierarchy in content blocks.

#3C4745 · #6B7774 · #9CABA9

Winter Light

Perfect for clean, airy layouts where a dark text color grounds the design without feeling heavy.

#D1E0DE · #9CABA9 · #1F2826

CSS variables

:root {
  --winter-shadow-grove-1: #1F2826;
  --winter-shadow-grove-2: #3C4745;
  --winter-shadow-grove-3: #6B7774;
  --winter-shadow-grove-4: #9CABA9;
  --winter-shadow-grove-5: #D1E0DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-shadow-grove": {
        1: "#1F2826",
        2: "#3C4745",
        3: "#6B7774",
        4: "#9CABA9",
        5: "#D1E0DE",
      }
    }
  }
}

Hex values

Color 1#1F2826

Color 2#3C4745

Color 3#6B7774

Color 4#9CABA9

Color 5#D1E0DE

Accessibility

Contrast checker

1.6:1Fail

3.2:1AA18

6.3:1AA

11.1:1AAA

1.6:1Fail

2.1:1Fail

4:1AA18

7.1:1AAA

3.2:1AA18

2.1:1Fail

2:1Fail

3.4:1AA18

6.3:1AA

4:1AA18

2:1Fail

1.8:1Fail

11.1:1AAA

7.1:1AAA

3.4:1AA18

1.8:1Fail

Similar palettes

More like Winter Shadow Grove

View all dark

Ancient Forest Depths