Back to palettes

Palette

Winter Pine Grove

The crisp, deep greens and muted tones of a peaceful pine forest covered in a gentle winter frost.

coolnatural5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Winter Pine 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 Winter Pine Grove.

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

Data visualization

#34493F#5D796F#8BB0A1#C7DED1#21352B

Palette guide

How to use Winter Pine Grove

Overview

The Winter Pine Grove palette captures the crisp, deep greens and muted tones of a peaceful pine forest covered in a gentle winter frost. Ranging from the profound #21352B to the airy #C7DED1, with harmonious mid-tones like #34493F and #8BB0A1, this palette offers a grounding yet refreshing aesthetic. Designers can leverage the darker greens for strong, natural foundations and typography, while the lighter shades provide a sense of openness and tranquility. This palette is ideal for projects that aim to evoke nature, sustainability, and a calm, organic feel, perfect for eco-friendly branding or serene digital experiences. Developers will find clear visual cues for hierarchy and interactive states.

Best used for

  • Eco-friendly and sustainable brand identities
  • Outdoor apparel and adventure-themed websites
  • Nature-focused apps and environmental organizations
  • Serene architectural and landscape design presentations
  • Organic product packaging and marketing
  • Wellness and mindfulness platforms seeking a natural feel

Suggested color roles

primary

Use #21352B for strong headings, primary calls to action, or deep backgrounds, providing a solid, natural anchor.

secondary

Apply #34493F for subheadings, secondary buttons, or larger graphical elements, offering a rich, earthy depth.

accent

Highlight with #8BB0A1 for active states, subtle borders, or informational icons, adding a refreshing, natural pop.

background

Choose #C7DED1 for light, airy backgrounds, creating a clean and tranquil canvas.

text

For body text, use #21352B or a deep charcoal like #333333 to ensure optimal readability against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast when using mid-tones like #8BB0A1 for text on lighter backgrounds; always test.
  • Pair #21352B or #34493F with white or #C7DED1 text for excellent readability on darker elements.
  • Avoid using #C7DED1 for small text on very light backgrounds due to low contrast; reserve for backgrounds or large accents.
  • Consider using a slightly desaturated white text on the darkest greens (#21352B) for a softer, more natural appearance.

Recommended combinations

Forest Header

For a bold header: #21352B for the title, #C7DED1 for the background, and #34493F for a prominent subtitle.

#21352B · #C7DED1 · #34493F

Grove Card

Design a natural card: #8BB0A1 for the card background, #21352B for the text, and #5D796F for an accent icon.

#8BB0A1 · #21352B · #5D796F

Pine Button

Create an organic button: #5D796F for the button background, #C7DED1 for the text, and #21352B for the hover state.

#5D796F · #C7DED1 · #21352B

CSS variables

:root {
  --winter-pine-grove-1: #34493F;
  --winter-pine-grove-2: #5D796F;
  --winter-pine-grove-3: #8BB0A1;
  --winter-pine-grove-4: #C7DED1;
  --winter-pine-grove-5: #21352B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-pine-grove": {
        1: "#34493F",
        2: "#5D796F",
        3: "#8BB0A1",
        4: "#C7DED1",
        5: "#21352B",
      }
    }
  }
}

Related searches

pine green palettewinter forest colorsnatural cool greenserene woodland aestheticeco-friendly UI

Palette colors

Hex values

Color 1#34493F
·
Color 2#5D796F
·
Color 3#8BB0A1
·
Color 4#C7DED1
·
Color 5#21352B
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
4.1:1AA18
6.8:1AA
1.3:1Fail
2
2:1Fail
2:1Fail
3.3:1AA18
2.8:1Fail
3
4.1:1AA18
2:1Fail
1.7:1Fail
5.5:1AA
4
6.8:1AA
3.3:1AA18
1.7:1Fail
9.2:1AAA
5
1.3:1Fail
2.8:1Fail
5.5:1AA
9.2:1AAA

Similar palettes

More like Winter Pine Grove

View all cool
Deep Mossy Glen
Enchanted Forest Bloom
Forest Canopy Glimmer
Gentle Forest Stream
Mystic Woods Veil
Nordic Spruce Woods