Palette

Rainforest Sun Dapple

Sunlight filtering through dense rainforest canopy, dappling the lush undergrowth with warm light.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rainforest Sun Dapple 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 Rainforest Sun Dapple.

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

Data visualization

#1A3E2C#3F704A#77B37E#B4DCA6#E7F5E0

Palette guide

How to use Rainforest Sun Dapple

Overview

The Rainforest Sun Dapple palette elegantly captures the serene beauty of sunlight filtering through a dense canopy, illuminating the lush undergrowth. With deep, earthy tones like #1A3E2C and #3F704A, it anchors the design in nature, while softer greens such as #77B37E and #B4DCA6 evoke dappled light. The lightest shade, #E7F5E0, provides a gentle, airy quality, completing this warm and inviting collection. This palette is an excellent choice for designers and developers aiming to create organic, calming, and naturally inspired visuals across various platforms, from web interfaces to branding.

Best used for

Organic food and beverage branding
Wellness and mindfulness app design
Botanical art and illustration
Sustainable and eco-friendly product lines
Nature-themed educational content
Earthy and calming interior design concepts

Suggested color roles

primary

Use #3F704A as the main color for headings, primary buttons, or key graphical elements, providing a rich, natural foundation.

secondary

Apply #77B37E for supporting content, subheadings, or secondary calls to action, offering a harmonious and gentle presence.

accent

Incorporate #B4DCA6 for subtle highlights, delicate patterns, or to soften visual breaks, mimicking soft sunlight.

background

Utilize #E7F5E0 as a clean, warm background color, ensuring excellent readability for darker text and a fresh feel.

text

For primary body text, #1A3E2C offers strong contrast and legibility on lighter backgrounds, maintaining the natural aesthetic.

Accessibility notes

Ensure sufficient contrast for text when using #77B37E or #B4DCA6 on #E7F5E0; #1A3E2C is ideal for body text.
Avoid using #B4DCA6 for small text on light backgrounds due to potential low contrast.
Verify all color combinations meet WCAG contrast guidelines, especially for interactive elements.
Consider larger font sizes for lighter greens if they are used for secondary information on similar tones.

Recommended combinations

Canopy Depths

Creates a layered, deep forest feel, ideal for backgrounds or gradients evoking natural shadow and light.

#1A3E2C · #3F704A · #77B37E

Dappled Light

Perfect for evoking softness and warmth, suitable for main content areas or highlighting natural textures.

#77B37E · #B4DCA6 · #E7F5E0

Earthy Contrast

A balanced triad for clear hierarchy, combining a rich green with a soft background and dark, legible text.

#3F704A · #E7F5E0 · #1A3E2C

CSS variables

:root {
  --rainforest-sun-dapple-1: #1A3E2C;
  --rainforest-sun-dapple-2: #3F704A;
  --rainforest-sun-dapple-3: #77B37E;
  --rainforest-sun-dapple-4: #B4DCA6;
  --rainforest-sun-dapple-5: #E7F5E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainforest-sun-dapple": {
        1: "#1A3E2C",
        2: "#3F704A",
        3: "#77B37E",
        4: "#B4DCA6",
        5: "#E7F5E0",
      }
    }
  }
}

Hex values

Color 1#1A3E2C

Color 2#3F704A

Color 3#77B37E

Color 4#B4DCA6

Color 5#E7F5E0

Accessibility

Contrast checker

2.1:1Fail

4.8:1AA

7.8:1AAA

10.5:1AAA

2.1:1Fail

2.4:1Fail

3.8:1AA18

5.1:1AA

4.8:1AA

2.4:1Fail

1.6:1Fail

2.2:1Fail

7.8:1AAA

3.8:1AA18

1.6:1Fail

1.4:1Fail

10.5:1AAA

5.1:1AA

2.2:1Fail

1.4:1Fail

Similar palettes

More like Rainforest Sun Dapple

Sunbeam Golden Embrace