Back to palettes

Palette

Nordic Spruce Forest

Cool, muted blues and greens, inspired by the tranquil, deep evergreen forests of Scandinavia.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#4F687D#2C3942#6D879B#425C70

Palette guide

How to use Nordic Spruce Forest

Overview

The Nordic Spruce Forest palette captures the tranquil, deep evergreen forests of Scandinavia with its cool, muted blues and greens. This collection features a grounding forest blue-grey, #36454F, alongside a slightly lighter, muted blue, #4F687D. The darkest shade, #2C3942, provides significant depth, while the serene #6D879B offers a refreshing contrast. A versatile mid-tone, #425C70, bridges the darker and lighter elements. Designers can leverage these colors for projects requiring a sense of nature, calm, and understated strength, perfect for outdoor brands or tranquil digital experiences.

Best used for

  • Outdoor and nature-themed branding
  • Environmental and conservation websites
  • Sustainable product design
  • User interfaces for meditation or wellness apps
  • Photography portfolios of landscapes
  • Editorial design for travel or natural history content

Suggested color roles

primary

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

secondary

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

accent

Reserve #6D879B for interactive elements, highlights, or small graphic details where a touch of cool brightness is needed to draw attention.

background

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

text

For general body text, use #2C3942 on lighter backgrounds like #6D879B, or white/near-white on darker shades like #36454F for optimal readability.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using #6D879B with lighter text or other light elements.
  • Test combinations like #2C3942 text on #36454F background for WCAG AA compliance, as they are close in value.
  • Avoid using #4F687D and #425C70 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 Canopy

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

#2C3942 · #36454F · #4F687D

Forest Mist

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

#36454F · #425C70 · #6D879B

Spruce Silhouette

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

#2C3942 · #6D879B · #4F687D

CSS variables

:root {
  --nordic-spruce-forest-1: #36454F;
  --nordic-spruce-forest-2: #4F687D;
  --nordic-spruce-forest-3: #2C3942;
  --nordic-spruce-forest-4: #6D879B;
  --nordic-spruce-forest-5: #425C70;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nordic-spruce-forest": {
        1: "#36454F",
        2: "#4F687D",
        3: "#2C3942",
        4: "#6D879B",
        5: "#425C70",
      }
    }
  }
}

Related searches

deep forest color schemenordic nature palettecalm blue green colorsnatural ui designoutdoor brand identity colors

Palette colors

Hex values

Color 1#36454F
·
Color 2#4F687D
·
Color 3#2C3942
·
Color 4#6D879B
·
Color 5#425C70
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.2:1Fail
2.6:1Fail
1.4:1Fail
2
1.7:1Fail
2:1Fail
1.5:1Fail
1.2:1Fail
3
1.2:1Fail
2:1Fail
3.2:1AA18
1.7:1Fail
4
2.6:1Fail
1.5:1Fail
3.2:1AA18
1.9:1Fail
5
1.4:1Fail
1.2:1Fail
1.7:1Fail
1.9:1Fail

Similar palettes

More like Nordic Spruce Forest

View all cool
Evergreen Snowfall Chill
Arctic Northern Bloom
Deep Forest Lull
Enchanted Forest Stream
Frost Kissed Pine
Frosted Evergreen Haze