Palette

Dark Forest Lore

A deep and mysterious palette of greens, evoking the ancient and hidden secrets of an enchanted forest.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dark Forest Lore 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 Dark Forest Lore.

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

Data visualization

#1A281A#334A33#557755#88AA88#BBCCBB

Palette guide

How to use Dark Forest Lore

Overview

The Dark Forest Lore palette (version 2) presents a captivating gradient of deep to light greens, perfectly capturing the essence of an ancient, mystical forest. Starting with the profound #1A281A and ascending to the airy #BBCCBB, this palette offers a harmonious range for designs that require a natural, tranquil, yet slightly enigmatic feel. It's ideal for environmental branding, fantasy-themed interfaces, or projects seeking to evoke a sense of organic wisdom. Designers can leverage its consistent green tones for cohesive visual narratives, while developers will find it suitable for creating dark mode experiences that are both visually rich and easy on the eyes.

Best used for

Fantasy game UI or concept art
Eco-tourism marketing materials
Wellness and mindfulness app design
Book cover designs for folklore or fantasy
Sustainable product branding
Botanical garden website themes

Suggested color roles

primary

#334A33 - A rich, deep forest green that serves as a strong, grounding primary color for headers, main content areas, or brand logos.

secondary

#557755 - This balanced mid-tone green offers a harmonious complement, suitable for secondary navigation, accent panels, or important informational blocks.

accent

#BBCCBB - The lightest green in the palette, ideal for subtle highlights, interactive elements that need a gentle pop, or delicate graphical flourishes.

background

#1A281A - A very dark, almost black-green that provides a profound and immersive background, perfect for a sophisticated dark mode or full-bleed imagery.

text

#88AA88 - A legible, muted green that works well for body text on darker backgrounds within the palette. For optimal readability on #1A281A, consider a very light grey (e.g., #F0F0F0).

Accessibility notes

Ensure sufficient contrast when using lighter greens like #BBCCBB for text on darker backgrounds.
Avoid placing #88AA88 text directly on #557755; contrast might be insufficient for accessibility.
For primary body text, consider using a high-contrast white or light gray on #1A281A and #334A33.
Test all text and background pairings using WCAG contrast checkers to meet AA or AAA standards.

Recommended combinations

Mystic Gradient

Creating a seamless, deep-to-mid green gradient for backgrounds or large hero sections.

#1A281A · #334A33 · #557755

Lore Contrast

Pairing a dominant dark green with a lighter accent and a legible text color for content blocks.

#334A33 · #BBCCBB · #88AA88

Whispering Leaves

Layering elements where subtle distinctions are needed, such as cards within a panel or subtle UI states.

#557755 · #88AA88 · #BBCCBB

CSS variables

:root {
  --dark-forest-lore-2-1: #1A281A;
  --dark-forest-lore-2-2: #334A33;
  --dark-forest-lore-2-3: #557755;
  --dark-forest-lore-2-4: #88AA88;
  --dark-forest-lore-2-5: #BBCCBB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dark-forest-lore-2": {
        1: "#1A281A",
        2: "#334A33",
        3: "#557755",
        4: "#88AA88",
        5: "#BBCCBB",
      }
    }
  }
}

Hex values

Color 1#1A281A

Color 2#334A33

Color 3#557755

Color 4#88AA88

Color 5#BBCCBB

Accessibility

Contrast checker

1.6:1Fail

3.1:1AA18

6:1AA

9.2:1AAA

1.6:1Fail

1.9:1Fail

3.8:1AA18

5.8:1AA

3.1:1AA18

1.9:1Fail

2:1Fail

3:1Fail