Palette

Twilight Forest Canopy

Evokes the deep, mysterious shadows and fading light filtering through a dense forest canopy at the cusp of night.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Twilight Forest Canopy 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 Twilight Forest Canopy.

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

Data visualization

#2C3E50#34495E#5D6D7E#ABB2B9#1F2D3A

Palette guide

How to use Twilight Forest Canopy

Overview

The "Twilight Forest Canopy" palette offers a sophisticated range of deep blues and grays, perfect for designs aiming for a mysterious yet calming aesthetic. With its darkest shade, #1F2D3A, anchoring the collection, and a versatile mid-tone like #5D6D7E, designers can craft compelling UIs. The lighter #ABB2B9 provides excellent contrast, while #2C3E50 and #34495E offer rich, deep blue-gray variations. This palette is ideal for projects requiring a sense of depth, tranquility, and understated elegance, reminiscent of a dense forest at dusk. Its cool, muted tones are particularly effective in digital interfaces, branding, and atmospheric visual content.

Best used for

Luxury brand websites and apps
Nature-themed video game UI
Dark mode UI themes
Photography portfolios or galleries
Environmental advocacy websites
Corporate reports or presentations with a serious tone

Suggested color roles

primary

#2C3E50 - Use as the dominant brand color or primary background for sections, offering a deep, stable base.

secondary

#34495E - Ideal for secondary navigation, card backgrounds, or subtle interactive elements, complementing the primary.

accent

#ABB2B9 - Employ sparingly for call-to-action buttons, icons, or highlights to provide a crisp, luminous contrast.

background

#1F2D3A - Best suited for a deep, immersive full-page background in dark themes, providing a strong foundation.

text

#ABB2B9 - Excellent for primary body text against darker backgrounds like #1F2D3A or #2C3E50 for optimal readability.

Accessibility notes

Ensure #ABB2B9 text has sufficient contrast against all darker shades for WCAG AA compliance.
Avoid using #5D6D7E for small text on #34495E backgrounds due to potentially low contrast.
Use a contrast checker for all text and interactive element pairings, especially for smaller font sizes.
Consider a lighter text like pure white (e.g., #FFFFFF) for headlines on the darkest backgrounds if #ABB2B9 feels too muted.

Recommended combinations

Dark UI Base

Foundation for dark mode interfaces, with the lightest color for text and accents.

#1F2D3A · #34495E · #ABB2B9

Subtle Depth

Layered backgrounds and content blocks for a sophisticated, deep visual hierarchy.

#2C3E50 · #5D6D7E · #34495E

Highlight Contrast

Primary content panels with clear text and subtle interactive elements.

#5D6D7E · #ABB2B9 · #2C3E50

CSS variables

:root {
  --twilight-forest-canopy-1: #2C3E50;
  --twilight-forest-canopy-2: #34495E;
  --twilight-forest-canopy-3: #5D6D7E;
  --twilight-forest-canopy-4: #ABB2B9;
  --twilight-forest-canopy-5: #1F2D3A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-forest-canopy": {
        1: "#2C3E50",
        2: "#34495E",
        3: "#5D6D7E",
        4: "#ABB2B9",
        5: "#1F2D3A",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#34495E

Color 3#5D6D7E

Color 4#ABB2B9

Color 5#1F2D3A

Accessibility

Contrast checker

1.2:1Fail

2.1:1Fail

5.1:1AA

1.3:1Fail

1.2:1Fail

1.7:1Fail

4.3:1AA18

1.5:1Fail

2.1:1Fail

1.7:1Fail

2.5:1Fail

2.6:1Fail

5.1:1AA

4.3:1AA18

2.5:1Fail

6.6:1AA

1.3:1Fail

1.5:1Fail

2.6:1Fail

6.6:1AA

Similar palettes

More like Twilight Forest Canopy

View all dark

Enchanted Twilight Deep

Abyss Gaze

Abyssal Bioluminescent Glow

Abyssal Coral Glow

Abyssal Depths

Abyssal Luminous Depths