Back to palettes

Palette

Cloud Forest Canopy

A harmonious blend of muted greens and soft aquas, capturing the mysterious calm of a cloud forest.

EarthNatural5 colors
More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3F5753#5A7E76#7CB2AA#A1D4CE#CDECE9

Palette guide

How to use Cloud Forest Canopy

Overview

The Cloud Forest Canopy palette offers a harmonious blend of muted greens and soft aquas, capturing the mysterious calm and tranquil beauty of a dense, high-altitude forest. Anchored by the deep, earthy #3F5753, it gradually lightens through the serene #5A7E76 and #7CB2AA, culminating in the airy #A1D4CE and #CDECE9. This palette is ideal for designers and developers aiming to evoke a sense of nature, serenity, and understated elegance. Its cool, grounding tones are perfect for creating immersive digital experiences, sustainable brand identities, or calming physical spaces. Leverage these shades to build interfaces that feel organic and inviting, providing a refreshing visual escape for users.

Best used for

  • Eco-friendly brand identities
  • Spa and wellness websites
  • Nature documentary graphics
  • Sustainable product packaging
  • Tranquil interior design concepts
  • Mindfulness app interfaces

Suggested color roles

primary

Use #3F5753 as the dominant, grounding color for headers, main navigation, or strong brand elements. It provides depth and a natural anchor.

secondary

Employ #5A7E76 for supporting sections, subheadings, or background elements that require more visual weight than the lightest shades. It maintains the earthy feel.

accent

Highlight key information or interactive elements with #A1D4CE. Its gentle brightness draws attention without being overpowering, perfect for buttons or subtle notifications.

background

Utilize #CDECE9 for clean, open backgrounds. Its very light, airy quality ensures readability and a sense of spaciousness, reflecting mist-laden skies.

text

For body text, use #3F5753 on light backgrounds like #CDECE9 or #A1D4CE for optimal readability and a consistent natural aesthetic. For dark backgrounds, consider a crisp white.

Accessibility notes

  • Ensure sufficient contrast when pairing #3F5753 text on #7CB2AA or lighter backgrounds. Aim for WCAG AA or AAA compliance.
  • Avoid using #A1D4CE text on #CDECE9 backgrounds, as the contrast will be insufficient for readability.
  • Use a contrast checker to validate all text and interactive element color combinations.
  • Consider adding a darker charcoal or black (#000000) for small, critical text elements if palette colors don't provide enough contrast against very light backgrounds.

Recommended combinations

Forest Depths

Ideal for a strong, natural brand presence; #3F5753 for primary, #5A7E76 for secondary, and #CDECE9 for background/text contrast.

#3F5753 · #5A7E76 · #CDECE9

Misty Lagoon

Perfect for serene visuals or subtle UI elements, evoking calm and openness. #7CB2AA as a base with #A1D4CE for accents.

#7CB2AA · #A1D4CE · #5A7E76

Canopy Light

Great for a lighter, more ethereal feel; #5A7E76 for depth, #A1D4CE for main content, and #CDECE9 as a clean background.

#5A7E76 · #A1D4CE · #CDECE9

CSS variables

:root {
  --cloud-forest-canopy-1: #3F5753;
  --cloud-forest-canopy-2: #5A7E76;
  --cloud-forest-canopy-3: #7CB2AA;
  --cloud-forest-canopy-4: #A1D4CE;
  --cloud-forest-canopy-5: #CDECE9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-forest-canopy": {
        1: "#3F5753",
        2: "#5A7E76",
        3: "#7CB2AA",
        4: "#A1D4CE",
        5: "#CDECE9",
      }
    }
  }
}

Related searches

muted green color schemetranquil forest paletteearthy aqua design colorsnatural calming hex codescloud forest web design

Palette colors

Hex values

Color 1#3F5753
·
Color 2#5A7E76
·
Color 3#7CB2AA
·
Color 4#A1D4CE
·
Color 5#CDECE9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.3:1AA18
4.8:1AA
6.2:1AA
2
1.7:1Fail
1.9:1Fail
2.7:1Fail
3.6:1AA18
3
3.3:1AA18
1.9:1Fail
1.5:1Fail
1.9:1Fail
4
4.8:1AA
2.7:1Fail
1.5:1Fail
1.3:1Fail
5
6.2:1AA
3.6:1AA18
1.9:1Fail
1.3:1Fail

Similar palettes

More like Cloud Forest Canopy

View all Earth
Jade Forest Canopy
Ancient Forest Roots
Deep Woods
Enchanted Forest Canopy
Enchanted Forest Canopy
Enchanted Forest Dell