Back to palettes

Palette

Serene Lagoon Depth

Tranquil blues and greens reflecting the serene, clear depths of a hidden lagoon.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Serene Lagoon Depth 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 Serene Lagoon Depth.

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

Data visualization

#006400#2E8B57#3CB371#66CDAA#7FFFD4

Palette guide

How to use Serene Lagoon Depth

Overview

The Serene Lagoon Depth palette captures the tranquil beauty of a hidden lagoon, presenting a vibrant yet calming spectrum of greens. From the deep, rich forest green of #006400 to the luminous aqua of #7FFFD4, with refreshing mid-tones like #2E8B57 and #3CB371, this palette evokes clarity and natural vitality. It's an excellent choice for designers aiming to convey freshness, growth, and a connection to nature. Developers can leverage these harmonious greens for eco-conscious applications, wellness platforms, or any digital space requiring a lively yet soothing interface that promotes relaxation and a sense of natural well-being.

Best used for

  • Environmental conservation websites
  • Health and wellness apps
  • Tropical resort branding
  • Organic food packaging
  • Nature-inspired digital art
  • Spa and beauty product lines

Suggested color roles

primary

#2E8B57 - A vibrant, balanced green, perfect for main design elements that need to feel fresh and alive.

secondary

#3CB371 - A slightly lighter, more luminous green for subheadings, active states, or supporting graphics.

accent

#7FFFD4 - A bright, almost iridescent aqua that provides a refreshing pop, ideal for calls-to-action or highlights.

background

#006400 - A deep, rich forest green for immersive, dramatic backgrounds or dark mode interfaces.

text

#66CDAA on #006400 for lighter text, or a crisp white for optimal readability on darker greens.

Accessibility notes

  • Ensure sufficient contrast when using #7FFFD4 for text against light backgrounds.
  • #006400 provides excellent contrast for text on #66CDAA or #7FFFD4.
  • Avoid placing #66CDAA on #7FFFD4 for small text due to potential low contrast.
  • For best readability on darker greens like #006400, use a bright white or a very light gray.

Recommended combinations

Deep Aqua Contrast

High-impact pairing for bold headlines or dark mode UI with a luminous, fresh accent.

#006400 · #7FFFD4 · #2E8B57

Lagoon Gradient

Smooth, transitional blend for backgrounds, charts, or progressive UI elements.

#2E8B57 · #3CB371 · #66CDAA

Fresh Depths

A bright highlight against a deep background, balanced by a vibrant mid-tone for content.

#7FFFD4 · #006400 · #3CB371

CSS variables

:root {
  --serene-lagoon-depth-1: #006400;
  --serene-lagoon-depth-2: #2E8B57;
  --serene-lagoon-depth-3: #3CB371;
  --serene-lagoon-depth-4: #66CDAA;
  --serene-lagoon-depth-5: #7FFFD4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "serene-lagoon-depth": {
        1: "#006400",
        2: "#2E8B57",
        3: "#3CB371",
        4: "#66CDAA",
        5: "#7FFFD4",
      }
    }
  }
}

Related searches

serene green color palettedeep lagoon colorstranquil aqua green schemenature inspired UIwellness app color palette

Palette colors

Hex values

Color 1#006400
·
Color 2#2E8B57
·
Color 3#3CB371
·
Color 4#66CDAA
·
Color 5#7FFFD4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.8:1Fail
3.9:1AA18
6.1:1AA
2
1.8:1Fail
1.6:1Fail
2.2:1Fail
3.5:1AA18
3
2.8:1Fail
1.6:1Fail
1.4:1Fail
2.2:1Fail
4
3.9:1AA18
2.2:1Fail
1.4:1Fail
1.6:1Fail
5
6.1:1AA
3.5:1AA18
2.2:1Fail
1.6:1Fail

Similar palettes

More like Serene Lagoon Depth

View all cool
Emerald Lagoon Gleam
Deep Ocean Current
Frozen Lake Depths
Hidden Cove Shimmer
Sapphire Glimmer Pond
Teal Sanctuary