Palette

Azure Lagoon Shimmer

Sparkling blues and vibrant teals capture the pristine beauty of a tropical lagoon.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0F7FA#A7DBD8#61C9C7#3CA7A8#2F7C7C

Palette guide

How to use Azure Lagoon Shimmer

Overview

The Azure Lagoon Shimmer palette (ID: azure-lagoon-shimmer-3) captures the pristine beauty of a tropical lagoon with sparkling blues and vibrant teals. It transitions from the airy near-white of #E0F7FA, through the gentle aquas of #A7DBD8 and #61C9C7, to the deeper, more grounded teals of #3CA7A8 and #2F7C7C. Designers and developers will find these hues exceptionally versatile for creating calm, refreshing, and sophisticated digital experiences. The harmonious blend of light to deep cool tones evokes clarity, tranquility, and a strong connection to pristine waters, ideal for applications requiring a soothing yet engaging aesthetic.

Best used for

Spa and wellness resorts
Coastal real estate marketing
Eco-friendly product packaging
Wedding planning websites (beach theme)
Children's educational apps (nature)
Minimalist UI designs with a touch of color

Suggested color roles

primary

#3CA7A8 serves as a balanced and inviting primary, ideal for main calls to action, brand logos, or important headers.

secondary

#2F7C7C provides a deep, stable secondary, suitable for subheadings, navigation, or foundational elements.

accent

#61C9C7 delivers a vibrant, refreshing accent, perfect for interactive elements, hover states, or eye-catching details.

background

#E0F7FA creates a very light, expansive backdrop, ensuring content clarity and an airy, tranquil feel.

text

Use #2F7C7C or a deep charcoal for body text on #E0F7FA or #A7DBD8 backgrounds for optimal legibility.

Accessibility notes

Ensure #2F7C7C text on #E0F7FA backgrounds meets WCAG AA contrast standards.
Avoid using #E0F7FA or #A7DBD8 for small text on light backgrounds due to insufficient contrast.
Use #3CA7A8 or #2F7C7C for critical interactive elements to ensure clear visibility.
For large text, #61C9C7 on #E0F7FA can work, but always verify contrast ratios.

Recommended combinations

Lagoon Depths

Creates a beautiful gradient from deep teal to vibrant aqua, ideal for immersive backgrounds or headers.

#2F7C7C · #3CA7A8 · #61C9C7

Clear Shimmer

Excellent for light, airy layouts, using lighter tones for backgrounds and mid-blue for structure.

#E0F7FA · #A7DBD8 · #61C9C7

Tropical Contrast

A strong contrasting trio for clear visual hierarchy, combining deep primary with light background and vibrant accent.

#2F7C7C · #E0F7FA · #3CA7A8

CSS variables

:root {
  --azure-lagoon-shimmer-3-1: #E0F7FA;
  --azure-lagoon-shimmer-3-2: #A7DBD8;
  --azure-lagoon-shimmer-3-3: #61C9C7;
  --azure-lagoon-shimmer-3-4: #3CA7A8;
  --azure-lagoon-shimmer-3-5: #2F7C7C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-lagoon-shimmer-3": {
        1: "#E0F7FA",
        2: "#A7DBD8",
        3: "#61C9C7",
        4: "#3CA7A8",
        5: "#2F7C7C",
      }
    }
  }
}

Hex values

Color 1#E0F7FA

Color 2#A7DBD8

Color 3#61C9C7

Color 4#3CA7A8

Color 5#2F7C7C

Accessibility

Contrast checker

1.4:1Fail

1.8:1Fail

2.6:1Fail

4.4:1AA18

1.4:1Fail

1.3:1Fail

1.9:1Fail

3.2:1AA18

1.8:1Fail

1.3:1Fail

1.5:1Fail

2.5:1Fail

2.6:1Fail

1.9:1Fail

1.5:1Fail

1.7:1Fail

4.4:1AA18

3.2:1AA18

2.5:1Fail

1.7:1Fail

Similar palettes

More like Azure Lagoon Shimmer

View all cool

Coastal Seaglass Shimmer

Ocean Shore Treasure

Tranquil Lagoon Shore

Tropical Lagoon Oasis

Alpine Lake Serene

Aquatic Coral Garden