Back to palettes

Palette

Gentle Lagoon Breeze

Soft, refreshing aquas and teals that evoke the calming presence of a gentle lagoon.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gentle Lagoon Breeze 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 Gentle Lagoon Breeze.

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

Data visualization

#AFEEEE#7FFFD4#40E0D0#20B2AA#008080

Palette guide

How to use Gentle Lagoon Breeze

Overview

The "Gentle Lagoon Breeze" palette offers a refreshing and serene collection of aquas and teals, perfectly capturing the tranquil spirit of a calm lagoon. Ranging from the very light aqua "#AFEEEE" to the deep, grounding teal "#008080", this palette provides a harmonious blend that is both soothing and invigorating. The vibrant "#7FFFD4" and "#40E0D0" add a lively yet gentle energy, while "#20B2AA" bridges the lighter and darker tones. This scheme is exceptionally well-suited for designs that aim to convey freshness, calm, and a touch of exotic natural beauty, making it versatile for wellness, travel, or modern digital interfaces.

Best used for

  • Spa and relaxation websites
  • Tropical travel agency branding
  • Eco-friendly product packaging
  • Aquatic-themed mobile apps
  • Wellness and mindfulness content
  • Clean, modern website interfaces

Suggested color roles

primary

"#008080" grounds the palette, ideal for strong calls to action, main headings, or brand logos, providing depth.

secondary

"#20B2AA" offers a balanced, sophisticated teal for subheadings, navigation, or important content blocks.

accent

Use "#40E0D0" for interactive elements, highlights, or to introduce a vibrant, refreshing touch.

background

"#AFEEEE" provides an extremely light, airy canvas that enhances readability and maintains a soft, open feel.

text

Dark charcoal or black is recommended for text on lighter backgrounds; "#008080" works well on "#AFEEEE".

Accessibility notes

  • "#AFEEEE" is very light; ensure dark text (e.g., black) has sufficient contrast on it.
  • "#7FFFD4" and "#AFEEEE" will require very dark text for readability, especially for small font sizes.
  • The darkest color, "#008080", provides excellent contrast with the lightest shades.
  • Always check contrast ratios for all text and interactive elements to meet WCAG standards.

Recommended combinations

Lagoon Depths

For robust branding, clear visual hierarchy, and impactful content sections.

#008080 · #20B2AA · #40E0D0

Shimmering Surface

Ideal for light backgrounds, subtle gradients, or decorative elements that need a fresh touch.

#7FFFD4 · #AFEEEE · #20B2AA

Tropical Breeze

A vibrant yet balanced trio for accents, infographics, or interactive states, providing visual interest.

#40E0D0 · #AFEEEE · #008080

CSS variables

:root {
  --gentle-lagoon-breeze-1: #AFEEEE;
  --gentle-lagoon-breeze-2: #7FFFD4;
  --gentle-lagoon-breeze-3: #40E0D0;
  --gentle-lagoon-breeze-4: #20B2AA;
  --gentle-lagoon-breeze-5: #008080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gentle-lagoon-breeze": {
        1: "#AFEEEE",
        2: "#7FFFD4",
        3: "#40E0D0",
        4: "#20B2AA",
        5: "#008080",
      }
    }
  }
}

Related searches

aqua teal color schemeserene lagoon palettetropical calm colorsrefreshing web design palettewellness brand colors

Palette colors

Hex values

Color 1#AFEEEE
·
Color 2#7FFFD4
·
Color 3#40E0D0
·
Color 4#20B2AA
·
Color 5#008080
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
2:1Fail
3.7:1AA18
2
1.1:1Fail
1.3:1Fail
2.1:1Fail
3.9:1AA18
3
1.3:1Fail
1.3:1Fail
1.6:1Fail
2.9:1Fail
4
2:1Fail
2.1:1Fail
1.6:1Fail
1.8:1Fail
5
3.7:1AA18
3.9:1AA18
2.9:1Fail
1.8:1Fail

Similar palettes

More like Gentle Lagoon Breeze

View all cool
Monsoon Lagoon Shimmer
Tropical Lagoon Oasis
Alpine Lake Shimmer
Aqua Dream Glow
Aqua Dream Shimmer
Aqua Marine Reef