Palette

Sun-Dappled Forest

Greens from deep shadows to bright leaves, with a pop of earthy gold, mimicking sunlit forest paths.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sun-Dappled Forest 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 Sun-Dappled Forest.

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

Data visualization

#2B451A#587D39#99C67A#E7E4BE#C1771A

Palette guide

How to use Sun-Dappled Forest

Overview

The Sun-Dappled Forest palette captures the essence of a woodland bathed in sunlight, from deep shadows to bright leaves. This natural collection features a deep forest green (#2B451A), a medium olive green (#587D39), a light sage green (#99C67A), a creamy, almost white beige (#E7E4BE), and a warm rust-gold (#C1771A). It's an excellent choice for designs that aim to evoke nature, tranquility, and organic freshness, perfect for eco-friendly and outdoor-inspired projects.

Best used for

Eco-conscious and sustainable product branding
Nature photography websites and portfolios
Outdoor adventure and tourism marketing
Organic food and wellness packaging
Serene and natural web design and user interfaces
Botanical illustrations and educational materials

Suggested color roles

primary

Use #587D39 as an inviting, natural green for main content areas, headers, or prominent graphical elements.

secondary

Apply #2B451A to add deep, grounding contrast, ideal for navigation, footers, or important textual elements.

accent

Employ #C1771A as a warm pop of sunlight, perfect for calls to action or to highlight key features.

background

Utilize #E7E4BE as a light, airy base that provides a natural canvas for the vibrant greens and warm accent.

text

For optimal readability, use dark green like #2B451A or a deep charcoal against lighter backgrounds, or white text on darker shades.

Accessibility notes

The deep #2B451A provides excellent contrast on the light #E7E4BE background for text.
Ensure #99C67A text has enough contrast against #E7E4BE; consider using a darker shade for legibility.
White text works very well on #2B451A and #587D39 for headings and prominent information.
Avoid using #99C67A as text on #E7E4BE due to insufficient contrast.

Recommended combinations

Forest Canopy

Create harmonious gradients, natural backgrounds, or layered designs that evoke depth and growth.

#2B451A · #587D39 · #99C67A

Sunlit Path

Ideal for headers, highlights, and calls to action, bringing a warm, inviting glow to designs.

#E7E4BE · #C1771A · #587D39

Earthy Greens

Use for robust branding, natural product labels, or to create a balanced yet striking visual hierarchy.

#2B451A · #C1771A · #E7E4BE

CSS variables

:root {
  --sun-dappled-forest-1: #2B451A;
  --sun-dappled-forest-2: #587D39;
  --sun-dappled-forest-3: #99C67A;
  --sun-dappled-forest-4: #E7E4BE;
  --sun-dappled-forest-5: #C1771A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sun-dappled-forest": {
        1: "#2B451A",
        2: "#587D39",
        3: "#99C67A",
        4: "#E7E4BE",
        5: "#C1771A",
      }
    }
  }
}

Hex values

Color 1#2B451A

Color 2#587D39

Color 3#99C67A

Color 4#E7E4BE

Color 5#C1771A

Accessibility

Contrast checker

2.2:1Fail

5.4:1AA

8.2:1AAA

3:1AA18

2.2:1Fail

2.4:1Fail

3.7:1AA18

1.3:1Fail

5.4:1AA

2.4:1Fail

1.5:1Fail

1.8:1Fail

8.2:1AAA

3.7:1AA18

1.5:1Fail

2.7:1Fail

3:1AA18

1.3:1Fail

1.8:1Fail

2.7:1Fail

Similar palettes

More like Sun-Dappled Forest