Back to palettes

Palette

Old Growth

Muted, earthy greens and greys inspired by the ancient, serene beauty of a undisturbed old-growth forest.

neutralnatural5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Old Growth 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 Old Growth.

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

Data visualization

#2C3E2D#4A5D4B#6E846F#95AB96#BCCCDD

Palette guide

How to use Old Growth

Overview

The "Old Growth" palette captures the serene essence of ancient forests with its collection of muted, earthy greens and soft, cool greys. Featuring deep #2C3E2D, supportive #4A5D4B, and a surprisingly light #BCCCDD, this palette is perfect for designs aiming for a natural, organic, or calming aesthetic. It provides a harmonious blend of colors that evoke tranquility and sustainability, making it excellent for eco-conscious brands or applications requiring a soothing visual experience. Designers can create depth with its gradient-like progression, while developers will find its natural tones versatile for various UI components.

Best used for

  • Eco-friendly brand identities and packaging
  • Nature-themed websites or applications
  • Sustainable fashion or lifestyle product designs
  • Wellness and spa branding materials
  • Outdoor adventure and conservation organization websites
  • Interior design mood boards for tranquil spaces

Suggested color roles

primary

Utilize #2C3E2D as a grounding, deep forest green for primary headings, dark backgrounds, or prominent call-to-action buttons.

secondary

Apply #4A5D4B for supportive elements like subheadings, navigation menus, or sections requiring a stable, earthy feel.

accent

Employ #95AB96 as a soft, natural accent for highlights, icons, or subtle UI components that need a gentle pop.

background

Use #BCCCDD as a very light, almost airy grey-green base for main content areas, offering a clean and expansive canvas.

text

For optimal readability on light backgrounds like #BCCCDD, use #2C3E2D or a dark charcoal. On darker backgrounds, #95AB96 or a near-white provides good contrast.

Accessibility notes

  • Ensure #2C3E2D text on #BCCCDD backgrounds meets WCAG AA contrast standards for readability.
  • Be cautious when pairing #6E846F with #95AB96 for text elements, as contrast might be insufficient for body copy.
  • Utilize #BCCCDD for text on dark primary or secondary colors to ensure accessibility for visually impaired users.
  • Check color contrast for interactive elements, especially when using lighter greens for hover states.

Recommended combinations

Forest Canopy

Excellent for creating depth: dark base, mid-tone content, and light background for a natural, layered look.

#2C3E2D · #6E846F · #BCCCDD

Mossy Path

Ideal for softer sections, using mid-greens for elements and the lightest shade for a gentle background.

#4A5D4B · #95AB96 · #BCCCDD

Deep Woods

Combine these for a rich, earthy feel in headers or footers, with the lightest green providing a subtle highlight.

#2C3E2D · #4A5D4B · #95AB96

CSS variables

:root {
  --old-growth-1: #2C3E2D;
  --old-growth-2: #4A5D4B;
  --old-growth-3: #6E846F;
  --old-growth-4: #95AB96;
  --old-growth-5: #BCCCDD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "old-growth": {
        1: "#2C3E2D",
        2: "#4A5D4B",
        3: "#6E846F",
        4: "#95AB96",
        5: "#BCCCDD",
      }
    }
  }
}

Related searches

earthy green color schemenatural forest paletteserene green ui colorsmuted green branding paletteorganic nature inspired colors

Palette colors

Hex values

Color 1#2C3E2D
·
Color 2#4A5D4B
·
Color 3#6E846F
·
Color 4#95AB96
·
Color 5#BCCCDD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.8:1Fail
4.7:1AA
7:1AA
2
1.6:1Fail
1.8:1Fail
2.9:1Fail
4.3:1AA18
3
2.8:1Fail
1.8:1Fail
1.6:1Fail
2.5:1Fail
4
4.7:1AA
2.9:1Fail
1.6:1Fail
1.5:1Fail
5
7:1AA
4.3:1AA18
2.5:1Fail
1.5:1Fail

Similar palettes

More like Old Growth

View all neutral