Back to palettes

Palette

Coastal Pine Solace

The serene blend of deep greens and muted grays, reminiscent of pine trees by a cool, calm coast.

earthcalm5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Pine Solace 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 Coastal Pine Solace.

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

Data visualization

#3CB371#6B8E23#A9A9A9#D3D3D3#4682B4

Palette guide

How to use Coastal Pine Solace

Overview

The Coastal Pine Solace palette offers a serene blend of deep greens and muted grays, reminiscent of pine trees by a cool, calm coast. Featuring vibrant greens like #3CB371 and #6B8E23, balanced by the neutral #A9A9A9 and #D3D3D3, and accented by the soothing #4682B4. This palette is perfect for designs that aim for a natural, calming, and grounded aesthetic. Developers will find these colors excellent for crafting outdoor brand identities, environmental content, and tranquil digital experiences that evoke the peaceful harmony of forest and sea.

Best used for

  • Outdoor and adventure brands
  • Nature conservation and environmental websites
  • Sustainable living content
  • Rustic lodge aesthetics and interior design
  • Serene digital landscapes and art
  • Calm and professional web applications

Suggested color roles

primary

Utilize #3CB371 as a prominent, fresh green for main sections, headers, or significant UI elements.

secondary

Employ #A9A9A9 for secondary information, card backgrounds, or to provide a neutral, balancing tone.

accent

Apply #4682B4 sparingly for calls-to-action, important icons, or as a refreshing blue highlight.

background

The lightest shade, #D3D3D3, is ideal for primary backgrounds, offering a clean, neutral, and expansive canvas.

text

For optimal readability on light backgrounds, use #3CB371 or a dark forest green like #2B6E45 to ensure clear text presentation.

Accessibility notes

  • Ensure #3CB371 text has sufficient contrast against #D3D3D3 or #A9A9A9 backgrounds.
  • Check contrast for #A9A9A9 text on #D3D3D3; it should be sufficient for large text but verify WCAG compliance for small text.
  • Avoid using #D3D3D3 for small text on #A9A9A9, as contrast may be too low.
  • Use a WCAG contrast checker for all text and interactive elements to ensure compliance.

Recommended combinations

Forest Calm

Excellent for layered content blocks or a soft background with complementary neutral and earthy green tones.

#D3D3D3 · #A9A9A9 · #6B8E23

Pine and Sky

Create a vibrant and refreshing combination for hero sections, pairing natural greens with a clear sky blue on a light background.

#3CB371 · #4682B4 · #D3D3D3

Grounded Balance

Ideal for UI elements that require a balanced mix of neutral, green, and blue for visual interest and hierarchy.

#A9A9A9 · #3CB371 · #4682B4

CSS variables

:root {
  --coastal-pine-solace-1: #3CB371;
  --coastal-pine-solace-2: #6B8E23;
  --coastal-pine-solace-3: #A9A9A9;
  --coastal-pine-solace-4: #D3D3D3;
  --coastal-pine-solace-5: #4682B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-pine-solace": {
        1: "#3CB371",
        2: "#6B8E23",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#4682B4",
      }
    }
  }
}

Related searches

coastal pine palettenatural green blueserene forest colorsearthy calm schemeoutdoor inspired hues

Palette colors

Hex values

Color 1#3CB371
·
Color 2#6B8E23
·
Color 3#A9A9A9
·
Color 4#D3D3D3
·
Color 5#4682B4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.1:1Fail
1.8:1Fail
1.5:1Fail
2
1.4:1Fail
1.6:1Fail
2.5:1Fail
1.1:1Fail
3
1.1:1Fail
1.6:1Fail
1.6:1Fail
1.7:1Fail
4
1.8:1Fail
2.5:1Fail
1.6:1Fail
2.7:1Fail
5
1.5:1Fail
1.1:1Fail
1.7:1Fail
2.7:1Fail

Similar palettes

More like Coastal Pine Solace

View all earth
Whispering Pine Needles
Dune Seagrass Drift
Enchanted Grove Hush
Forest Fern Whisper
Forest Whisper Green
Verdant Moss Whisper