Back to palettes

Palette

Misty Spruce Grove

Deep, cool greens evoke a serene, misty evergreen forest in winter.

darkcalm5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Spruce Grove 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 Misty Spruce Grove.

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

Data visualization

#002F2F#004747#006A6A#3D7F7F#7DAAAA

Palette guide

How to use Misty Spruce Grove

Overview

The Misty Spruce Grove palette offers a serene and deep collection of cool greens, perfect for designs aiming for a calm, sophisticated, or natural aesthetic. Inspired by a tranquil evergreen forest shrouded in mist, this palette features rich tones like the deep teal #002F2F and #004747, moving through the balanced #006A6A and #3D7F7F, to the lighter, airy #7DAAAA. These hues work harmoniously to create depth and a sense of quiet elegance, suitable for branding, web interfaces, or interior concepts where a connection to nature and tranquility is desired. Designers and developers will find these shades versatile for various visual applications.

Best used for

  • Nature-inspired branding and logos
  • Calm and sophisticated website designs
  • Eco-friendly product packaging
  • Interior design concepts for relaxing spaces
  • Winter-themed digital illustrations
  • Environmental or conservation organization websites

Suggested color roles

primary

Use #002F2F as a foundational, deep background or header color to establish a strong, grounded presence.

secondary

Employ #004747 for prominent sections, navigation elements, or larger text blocks, offering a slightly lighter yet still dominant tone.

accent

Highlight key interactive elements or calls to action with #006A6A or #3D7F7F for a subtle pop within the cool green spectrum.

background

The lighter #7DAAAA serves as an excellent soft background for content areas, providing a gentle contrast without being stark.

text

For body text, use a very dark shade like #002F2F or a near-black for readability against lighter backgrounds. For text on darker backgrounds, use #7DAAAA or a crisp white.

Accessibility notes

  • Ensure sufficient contrast when pairing #002F2F with #004747 for text; consider a lighter text color.
  • Use #7DAAAA for text on darker shades like #002F2F or #004747 to meet WCAG AA standards.
  • Avoid using #3D7F7F for small text on #006A6A backgrounds as contrast may be insufficient.
  • Larger text elements can utilize #006A6A or #3D7F7F against #7DAAAA backgrounds effectively.

Recommended combinations

Deep Forest Base

Ideal for a dark mode interface, with #7DAAAA as legible text against the deep greens.

#002F2F · #004747 · #7DAAAA

Misty Accent

Creates a harmonious gradient effect, suitable for headers or layered graphic elements.

#006A6A · #3D7F7F · #002F2F

Subtle Contrast

Excellent for a lighter theme, with #004747 and #006A6A providing depth to a #7DAAAA background.

#7DAAAA · #004747 · #006A6A

CSS variables

:root {
  --misty-spruce-grove-1: #002F2F;
  --misty-spruce-grove-2: #004747;
  --misty-spruce-grove-3: #006A6A;
  --misty-spruce-grove-4: #3D7F7F;
  --misty-spruce-grove-5: #7DAAAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-spruce-grove": {
        1: "#002F2F",
        2: "#004747",
        3: "#006A6A",
        4: "#3D7F7F",
        5: "#7DAAAA",
      }
    }
  }
}

Related searches

teal green color schemecool forest palettewinter green color ideasserene nature colorsdark teal web design

Palette colors

Hex values

Color 1#002F2F
·
Color 2#004747
·
Color 3#006A6A
·
Color 4#3D7F7F
·
Color 5#7DAAAA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.3:1Fail
3.1:1AA18
5.7:1AA
2
1.4:1Fail
1.6:1Fail
2.3:1Fail
4.1:1AA18
3
2.3:1Fail
1.6:1Fail
1.4:1Fail
2.5:1Fail
4
3.1:1AA18
2.3:1Fail
1.4:1Fail
1.8:1Fail
5
5.7:1AA
4.1:1AA18
2.5:1Fail
1.8:1Fail

Similar palettes

More like Misty Spruce Grove

View all dark
Winter Evergreen Chill
Deep Forest Solace
Dusky Forest Whispers
Velvet Grove Dusk
Whispering Forest Haze
Whispering Pines Shade