Palette

Tranquil Lagoon Shore

Soothing greens and blues reflecting the serene and clear waters of a peaceful lagoon.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tranquil Lagoon Shore 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 Tranquil Lagoon Shore.

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

Data visualization

#006D6B#2A9D8F#4CCBB0#73E3CC#004D4A

Palette guide

How to use Tranquil Lagoon Shore

Overview

The Tranquil Lagoon Shore palette offers a refreshing blend of deep greens and vibrant teals, capturing the essence of calm, clear waters meeting lush tropical foliage. Featuring a rich base of #006D6B and a grounding #004D4A, complemented by the lively #2A9D8F, #4CCBB0, and #73E3CC, this palette is perfect for designers and developers seeking to convey natural harmony, freshness, and vitality. Its cool, invigorating tones are highly versatile for creating engaging digital experiences or attractive print materials that feel both serene and energetic, making it an excellent choice for nature-inspired themes.

Best used for

Eco-tourism and travel branding
Gardening and outdoor living product websites
Healthy food and beverage packaging
Environmental non-profit organization materials
Wellness apps with a natural theme
Sustainable and organic product lines

Suggested color roles

primary

Utilize #006D6B as the main brand color for strong headlines, navigation, or key graphical elements. It provides a deep, calming foundation.

secondary

Employ #2A9D8F for supporting content, subheadings, or secondary calls-to-action. It offers a vibrant yet balanced complement.

accent

Apply #4CCBB0 or #73E3CC for highlights, interactive elements, or illustrations. These bright teals add energy and draw the eye.

background

While no extremely light background is present, #73E3CC can serve as a very light background for dark text, or use a near-white for broad areas.

text

For dark text on light backgrounds (like a recommended near-white), use #004D4A or #006D6B for excellent readability. For light text on darker backgrounds, a crisp white or a very pale green from the palette (e.g., #73E3CC) can work.

Accessibility notes

The darkest color, #004D4A, provides excellent contrast for text on lighter shades like #4CCBB0 and #73E3CC.
Avoid using #73E3CC as text on #4CCBB0 as their proximity might lead to poor readability.
When using #2A9D8F as a background, ensure text in #004D4A is used for primary content, or white for headings.
Always test color combinations for WCAG AA compliance, especially with mid-tone pairings.

Recommended combinations

Deep Forest & Clear Water

Strong contrast: darkest green for text, lightest teal for background, with a vibrant mid-tone for accents.

#004D4A · #73E3CC · #2A9D8F

Tropical Gradient

Ideal for background washes or illustrative elements, showing a smooth transition from deep to bright teal.

#006D6B · #4CCBB0 · #73E3CC

Lush Accents

Use the vibrant teal as a primary element, grounded by the deep green text, with a brighter highlight.

#2A9D8F · #004D4A · #4CCBB0

CSS variables

:root {
  --tranquil-lagoon-shore-1: #006D6B;
  --tranquil-lagoon-shore-2: #2A9D8F;
  --tranquil-lagoon-shore-3: #4CCBB0;
  --tranquil-lagoon-shore-4: #73E3CC;
  --tranquil-lagoon-shore-5: #004D4A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tranquil-lagoon-shore": {
        1: "#006D6B",
        2: "#2A9D8F",
        3: "#4CCBB0",
        4: "#73E3CC",
        5: "#004D4A",
      }
    }
  }
}

Hex values

Color 1#006D6B

Color 2#2A9D8F

Color 3#4CCBB0

Color 4#73E3CC

Color 5#004D4A

Accessibility

Contrast checker

1.9:1Fail

3.1:1AA18

4:1AA18

1.6:1Fail

1.9:1Fail

1.7:1Fail

2.2:1Fail

2.9:1Fail

3.1:1AA18

1.7:1Fail

1.3:1Fail

4.8:1AA

4:1AA18

2.2:1Fail

1.3:1Fail

6.3:1AA

1.6:1Fail

2.9:1Fail

4.8:1AA

6.3:1AA

Similar palettes

More like Tranquil Lagoon Shore

View all cool

Alpine Lake Serene

Coastal Seafoam Whisper

Coastal Seaglass Shimmer

Hushed Alpine Lake

Koi Water Garden

Mint Glacial Stream