Back to palettes

Palette

Shadowed Woods Twilight

Deep, mysterious greens and blues reflecting the profound silence and shadows of a forest at midnight.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Shadowed Woods Twilight 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 Shadowed Woods Twilight.

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

Data visualization

#1A2D2B#3A5C5A#688D8B#0D1B1B#4B7573

Palette guide

How to use Shadowed Woods Twilight

Overview

The Shadowed Woods Twilight palette captures the profound silence and deep shadows of a forest at midnight, blending mysterious greens and blues. Anchored by the near-black #0D1B1B, it features the dark teal #1A2D2B and the calming mid-tone #3A5C5A, creating an immersive, tranquil base. A slightly lighter blue-green, #4B7573, adds subtle variation, while the misty #688D8B provides a delicate highlight, like moonlight filtering through trees. This collection is an excellent choice for designers and developers seeking to evoke serenity, mystery, and natural elegance, perfect for projects that benefit from a deep, atmospheric, and calming color scheme.

Best used for

  • Fantasy game interfaces and concept art
  • Serene meditation and mindfulness apps
  • Nature photography showcases and portfolios
  • Dark mode operating systems and applications
  • Mysterious branding and product design
  • Eco-conscious and wellness-focused platforms

Suggested color roles

primary

Utilize #0D1B1B as the deepest green-black base for main backgrounds or large containers, establishing a profound, tranquil tone.

secondary

Employ #1A2D2B for secondary sections, headers, or large graphical elements, adding a subtle, dark teal layer.

accent

Apply #688D8B as a light grey-teal accent for subtle highlights, interactive elements, or delicate UI details, offering gentle contrast.

background

Use #3A5C5A as a primary background color for content areas, offering a rich, mid-tone blue-green base that is calming.

text

Pair #688D8B with the darkest shades like #0D1B1B or #1A2D2B for readable body text, or use a crisp white for maximum contrast.

Accessibility notes

  • Ensure #688D8B text on #0D1B1B or #1A2D2B meets WCAG AA contrast ratios for body text to guarantee legibility.
  • The combination of #4B7573 on #3A5C5A might have insufficient contrast for small text; reserve for larger elements or decorative use.
  • For optimal readability of extensive body text, a pure white or very light grey is recommended on the darkest shades.
  • Interactive elements should provide clear visual feedback and sufficient contrast to ensure usability within the dark palette.

Recommended combinations

Twilight Contrast

Ideal for main UI elements, impactful headings, and areas where strong visual separation is desired.

#0D1B1B · #688D8B · #1A2D2B

Misty Layers

Excellent for creating distinct cards, subtle gradients, or layered backgrounds that add depth and texture.

#3A5C5A · #4B7573 · #688D8B

Deep Serenity

Perfect for atmospheric graphics, background patterns, or illustrations that evoke a sense of calm and mystery.

#1A2D2B · #4B7573 · #0D1B1B

CSS variables

:root {
  --shadowed-woods-twilight-1: #1A2D2B;
  --shadowed-woods-twilight-2: #3A5C5A;
  --shadowed-woods-twilight-3: #688D8B;
  --shadowed-woods-twilight-4: #0D1B1B;
  --shadowed-woods-twilight-5: #4B7573;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "shadowed-woods-twilight": {
        1: "#1A2D2B",
        2: "#3A5C5A",
        3: "#688D8B",
        4: "#0D1B1B",
        5: "#4B7573",
      }
    }
  }
}

Related searches

dark teal blue paletteforest midnight colorsmysterious green blue designdeep nature UItwilight woodland scheme

Palette colors

Hex values

Color 1#1A2D2B
·
Color 2#3A5C5A
·
Color 3#688D8B
·
Color 4#0D1B1B
·
Color 5#4B7573
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
4:1AA18
1.2:1Fail
2.8:1Fail
2
2:1Fail
2:1Fail
2.4:1Fail
1.4:1Fail
3
4:1AA18
2:1Fail
4.9:1AA
1.4:1Fail
4
1.2:1Fail
2.4:1Fail
4.9:1AA
3.4:1AA18
5
2.8:1Fail
1.4:1Fail
1.4:1Fail
3.4:1AA18

Similar palettes

More like Shadowed Woods Twilight

View all dark
Forest Canopy Seclusion
Midnight Fern Glow
Midnight Forest Velvet
Ancient Forest Depths
Celestial Night Sky
Dark Forest Glade