Palette

Solstice Forest Grey

Quiet, muted tones reflecting the serene stillness of a snow-dusted forest during the winter solstice.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Solstice Forest Grey 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 Solstice Forest Grey.

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

Data visualization

#2F4F4F#708090#D3D3D3#A9A9A9#B0C4DE

Palette guide

How to use Solstice Forest Grey

Overview

The Solstice Forest Grey palette evokes the serene stillness of a snow-dusted forest during winter. This cool, muted collection features deep forest green-grey (#2F4F4F), a calm steel grey (#708090), a light silver (#D3D3D3), a medium slate grey (#A9A9A9), and a gentle light steel blue (#B0C4DE). Designers will find this palette excellent for creating sophisticated, tranquil, and minimalist designs. It's particularly effective for projects that require a sense of calm, professionalism, or a natural, understated elegance. Developers can apply these colors for clean UI designs, subtle branding, or backgrounds where content takes center stage, ensuring a smooth, visually quiet user experience that is both modern and timeless.

Best used for

Minimalist website design
Luxury product packaging (winter collections)
Corporate branding and professional presentations
Nature-inspired digital art and photography sites
Interior design mood boards
Applications requiring a calm, focused user experience

Suggested color roles

primary

Use #2F4F4F for strong foundational elements like footers or main navigation, providing depth and gravitas.

secondary

Apply #708090 for headers or secondary content areas, offering a softer yet substantial presence.

accent

Utilize #B0C4DE for subtle accents, interactive states, or to introduce a touch of cool serenity.

background

Employ #D3D3D3 as a light, airy background, or #A9A9A9 for a slightly darker, more grounded canvas.

text

A deep charcoal or black is ideal for text on lighter backgrounds like #D3D3D3. Conversely, white text works well on #2F4F4F.

Accessibility notes

Ensure sufficient contrast for dark text on #D3D3D3 and #A9A9A9; black or #2F4F4F is recommended.
White or very light text will likely be needed for legibility on #2F4F4F and #708090.
Be cautious with #A9A9A9 text on #708090 backgrounds, as contrast may be insufficient.
Always test all text and interactive element color pairs with a WCAG contrast checker.

Recommended combinations

Forest Depths

A strong, elegant combination: #2F4F4F for main sections, #D3D3D3 for content areas, and #B0C4DE for subtle highlights or links.

#2F4F4F · #D3D3D3 · #B0C4DE

Muted Harmony

Ideal for clean, minimalist layouts. #708090 for primary text, #A9A9A9 for secondary elements, and #D3D3D3 as a soft background.

#708090 · #A9A9A9 · #D3D3D3

Winter Sky

Creates a cool, refreshing feel. #B0C4DE as a background, with #2F4F4F for bold headings and #A9A9A9 for body text.

#B0C4DE · #2F4F4F · #A9A9A9

CSS variables

:root {
  --solstice-forest-grey-1: #2F4F4F;
  --solstice-forest-grey-2: #708090;
  --solstice-forest-grey-3: #D3D3D3;
  --solstice-forest-grey-4: #A9A9A9;
  --solstice-forest-grey-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "solstice-forest-grey": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#D3D3D3",
        4: "#A9A9A9",
        5: "#B0C4DE",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#708090

Color 3#D3D3D3

Color 4#A9A9A9

Color 5#B0C4DE

Accessibility

Contrast checker

2.2:1Fail

6:1AA

3.8:1AA18

5:1AA

2.2:1Fail

2.7:1Fail

1.7:1Fail

2.3:1Fail

6:1AA

2.7:1Fail

1.6:1Fail

1.2:1Fail

3.8:1AA18

1.7:1Fail

1.6:1Fail

1.3:1Fail

5:1AA

2.3:1Fail

1.2:1Fail

1.3:1Fail

Similar palettes

More like Solstice Forest Grey

Frosted Woodland Serene