Palette

Deep Forest Lumina

Explores the hidden depths of an ancient forest, where faint light filters through thick canopy.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Forest Lumina 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 Deep Forest Lumina.

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

Data visualization

#1A312B#2C4D44#44746B#619D94#87C7BC

Palette guide

How to use Deep Forest Lumina

Overview

The Deep Forest Lumina palette explores the hidden depths of an ancient forest, where faint light filters through a thick canopy. It begins with the profound #1A312B, a deep, almost teal-infused green, and gradually brightens through #2C4D44 and #44746B. The journey culminates in the luminous #619D94 and the ethereal #87C7BC, reminiscent of dappled sunlight on moss. This palette is expertly crafted for designers seeking to evoke mystery, growth, and subtle enlightenment. Its cool yet inviting tones are perfect for projects demanding a sophisticated, natural, or slightly futuristic aesthetic, providing depth and a sense of discovery without being overtly dark.

Best used for

Tech companies with an eco-focus
Sustainable energy branding
Modern wellness platforms
Interactive data visualizations
Sci-fi fantasy game environments
Luxury home automation interfaces

Suggested color roles

primary

Use #1A312B as a deep, anchoring color for backgrounds or main structural elements, conveying depth and innovation.

secondary

Apply #2C4D44 for supporting content areas, navigation, or larger text blocks, adding texture and sophistication.

accent

Incorporate #87C7BC for calls-to-action, highlights, or interactive elements, providing a luminous and refreshing pop.

background

Utilize #619D94 as a light, airy background color for content, offering a clean yet intriguing canvas.

text

For primary body text, use #1A312B on lighter backgrounds like #619D94 or #87C7BC to ensure excellent readability and a cohesive, modern feel.

Accessibility notes

Ensure #87C7BC text on #619D94 backgrounds has sufficient contrast; consider a darker shade for small text.
Text in #1A312B offers strong contrast against #87C7BC and #619D94, suitable for body copy and headings.
Avoid using #2C4D44 for text on #44746B without careful contrast checking due to their similar lightness values.
Interactive elements should have distinct hover/focus states, especially when using the mid-tones for buttons.

Recommended combinations

Canopy Shade

Ideal for creating a deep, mysterious base, perfect for immersive digital experiences or sophisticated branding.

#1A312B · #2C4D44 · #44746B

Dappled Light

Creates a luminous contrast, suitable for highlighting key information or adding a touch of ethereal glow.

#2C4D44 · #87C7BC · #1A312B

Forest Glint

Offers a soft, harmonious gradient, excellent for background elements or subtle visual transitions in a modern design.

#44746B · #619D94 · #87C7BC

CSS variables

:root {
  --deep-forest-lumina-1: #1A312B;
  --deep-forest-lumina-2: #2C4D44;
  --deep-forest-lumina-3: #44746B;
  --deep-forest-lumina-4: #619D94;
  --deep-forest-lumina-5: #87C7BC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-forest-lumina": {
        1: "#1A312B",
        2: "#2C4D44",
        3: "#44746B",
        4: "#619D94",
        5: "#87C7BC",
      }
    }
  }
}

Hex values

Color 1#1A312B

Color 2#2C4D44

Color 3#44746B

Color 4#619D94

Color 5#87C7BC

Accessibility

Contrast checker

1.5:1Fail

2.6:1Fail

4.5:1AA18

7.2:1AAA

1.5:1Fail

1.8:1Fail

3:1AA18

4.9:1AA

2.6:1Fail

1.8:1Fail

1.7:1Fail

2.8:1Fail

4.5:1AA18

3:1AA18

1.7:1Fail

1.6:1Fail

7.2:1AAA

4.9:1AA

2.8:1Fail

1.6:1Fail

Similar palettes

More like Deep Forest Lumina

Deep Undergrowth Shadow

Emerald Canopy Depths

Enchanted Evergreen Depth