Back to palettes

Palette

Calm Lagoon

Tranquil aqua and teal shades reflect the crystalline, shallow waters of a serene tropical lagoon.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

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

Palette guide

How to use Calm Lagoon

Overview

The Calm Lagoon palette features tranquil aqua and teal shades, reflecting the crystalline, shallow waters of a serene tropical lagoon. This refreshing collection includes a very light aqua, #AEEEEE, and a slightly deeper #AFEEEE, alongside a vibrant aquamarine, #7FFFD4, a clear turquoise, #40E0D0, and a deep teal, #20B2AA. Designers will find this palette excellent for creating fresh, peaceful, and invigorating visuals. Developers can leverage these colors to build clean and inviting user interfaces for brands focused on travel, wellness, eco-friendly products, or any application seeking a calm, vibrant, and natural aesthetic, evoking serenity and clarity.

Best used for

  • Tropical resort and travel branding
  • Eco-friendly product packaging
  • Spa and wellness retreat websites
  • Marine conservation initiatives
  • Clean beauty brands
  • Digital art with water themes

Suggested color roles

primary

Utilize #AEEEEE as a light, airy primary background, providing a refreshing and expansive canvas.

secondary

Apply #AFEEEE for supporting elements, offering a subtle variation of light aqua that complements the primary.

accent

Introduce #7FFFD4 as a vibrant aquamarine accent for calls to action or key features, adding a lively pop.

background

Employ #AEEEEE for clean, light backgrounds, allowing other colors to truly pop.

text

Use #20B2AA for main body text and headings, ensuring strong readability and a sophisticated, grounded feel against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast when pairing #20B2AA text with #AEEEEE or #AFEEEE backgrounds for optimal readability.
  • Avoid using lighter aquas like #AEEEEE or #AFEEEE for small text against similar light backgrounds due to low contrast.
  • For interactive elements, use #20B2AA or #40E0D0 to ensure clear affordance and meet WCAG contrast guidelines.
  • Test color combinations across different screen types to verify visual clarity for all users.

Recommended combinations

Shallow Waters

Creates a soft, harmonious blend of light aquas, ideal for subtle gradients, backgrounds, or layered effects.

#AEEEEE · #AFEEEE · #7FFFD4

Lagoon Depth

Offers a grounded and refreshing feel, combining deep teal with turquoise and light aqua for text or important elements.

#20B2AA · #40E0D0 · #AEEEEE

Aqua Breeze

Provides a vibrant yet calm feel, blending aquamarine with turquoise and light aqua, suitable for headers or distinct sections.

#7FFFD4 · #40E0D0 · #AFEEEE

CSS variables

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

Tailwind config

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

Related searches

calm aqua color paletteteal lagoon colorstropical water schemepeaceful blue green paletteserene ocean colors

Palette colors

Hex values

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

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.1:1Fail
1.3:1Fail
2:1Fail
2
1:1Fail
1.1:1Fail
1.3:1Fail
2:1Fail
3
1.1:1Fail
1.1:1Fail
1.3:1Fail
2.1:1Fail
4
1.3:1Fail
1.3:1Fail
1.3:1Fail
1.6:1Fail
5
2:1Fail
2:1Fail
2.1:1Fail
1.6:1Fail

Similar palettes

More like Calm Lagoon

View all cool
Emerald Lagoon Depths
Aqua Dream Shimmer
Aquatic Flora Bloom
Coastal Reef Haven
Teal Oasis Deep
Aqua Dream Glow