Back to palettes

Palette

Nordic Spruce Woods

Deep, cool greens reminiscent of dense spruce forests in northern lands.

coolnatural5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Nordic Spruce Woods 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 Nordic Spruce Woods.

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

Data visualization

#0A3C2D#1B5E43#2D805A#4BA276#7BC99D

Palette guide

How to use Nordic Spruce Woods

Overview

The Nordic Spruce Woods palette features deep, cool greens reminiscent of dense spruce forests in northern lands. This vibrant yet sophisticated collection ranges from a profound forest green, #0A3C2D, to a lighter, refreshing #7BC99D. Intermediate shades like #1B5E43, #2D805A, and #4BA276 provide a smooth and natural progression. Designers can leverage these hues to evoke feelings of nature, growth, tranquility, and environmental consciousness, ideal for eco-friendly brands, outdoor adventure sites, or any project seeking a grounded, organic aesthetic.

Best used for

  • Eco-friendly and sustainable branding
  • Outdoor adventure and travel websites
  • Health and wellness applications
  • Educational content about nature or environment
  • Organic food and beverage packaging
  • User interfaces for gardening or nature journaling apps

Suggested color roles

primary

Use #0A3C2D as the dominant hue for main sections, headers, or large background areas to establish a deep, natural foundation.

secondary

Apply #1B5E43 for sub-sections, navigation elements, or as a supporting background color, adding subtle variation.

accent

Reserve #7BC99D for interactive elements, highlights, or small graphic details where a touch of refreshing brightness is needed to draw attention.

background

#0A3C2D works well for dark mode interfaces or as a striking background for hero sections, providing strong contrast.

text

For general body text, use a dark shade like #0A3C2D on lighter backgrounds like #7BC99D or #4BA276. On darker shades, use white or near-white for optimal readability.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using #7BC99D with lighter text or other light elements.
  • Test combinations like #0A3C2D text on #7BC99D background for WCAG AA compliance.
  • Avoid using #4BA276 and #2D805A for small text elements against similar mid-tones without checking contrast.
  • Clearly distinguish interactive elements from static content through adequate contrast or visual cues.

Recommended combinations

Deep Forest

Ideal for creating deep, immersive backgrounds with layered elements, perfect for corporate dashboards or serene landing pages.

#0A3C2D · #1B5E43 · #2D805A

Spruce Light

Excellent for header sections and sub-navigation, offering a balanced contrast that is both professional and inviting.

#2D805A · #4BA276 · #7BC99D

Verdant Path

Use the darkest shade for foundations, the lightest for accents, and the mid-tone for key information, conveying clarity and structure.

#0A3C2D · #7BC99D · #4BA276

CSS variables

:root {
  --nordic-spruce-woods-1: #0A3C2D;
  --nordic-spruce-woods-2: #1B5E43;
  --nordic-spruce-woods-3: #2D805A;
  --nordic-spruce-woods-4: #4BA276;
  --nordic-spruce-woods-5: #7BC99D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nordic-spruce-woods": {
        1: "#0A3C2D",
        2: "#1B5E43",
        3: "#2D805A",
        4: "#4BA276",
        5: "#7BC99D",
      }
    }
  }
}

Related searches

deep green color palettenordic forest colorsnatural growth color schemeeco friendly branding paletteoutdoor ui design colors

Palette colors

Hex values

Color 1#0A3C2D
·
Color 2#1B5E43
·
Color 3#2D805A
·
Color 4#4BA276
·
Color 5#7BC99D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
4:1AA18
6.3:1AA
2
1.6:1Fail
1.6:1Fail
2.5:1Fail
3.9:1AA18
3
2.6:1Fail
1.6:1Fail
1.5:1Fail
2.5:1Fail
4
4:1AA18
2.5:1Fail
1.5:1Fail
1.6:1Fail
5
6.3:1AA
3.9:1AA18
2.5:1Fail
1.6:1Fail

Similar palettes

More like Nordic Spruce Woods

View all cool
Crimson Holly Frost
Deep Marine Verdure
Deep Mossy Glen
Emerald Grove Sanctuary
Emerald Moss Stone
Enchanted Forest Bloom