Palette

Azure Lagoon Shimmer

Reflects the pristine, crystal-clear waters of a calm azure lagoon, inviting and tranquil.

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

#191970#4169E1#6495ED#B0C4DE#ADD8E6

Palette guide

How to use Azure Lagoon Shimmer

Overview

The Azure Lagoon Shimmer palette (ID: azure-lagoon-shimmer) reflects the pristine, crystal-clear waters of a calm azure lagoon, inviting and tranquil. It features the deep navy of #191970, the vibrant royal blue of #4169E1, the balanced cornflower blue of #6495ED, and the soft, cool greys of #B0C4DE and #ADD8E6. Designers and developers will find these hues exceptionally versatile for creating serene, sophisticated, and immersive digital experiences. The harmonious blend of deep blues and airy cool greys evokes clarity, peace, and a sense of depth, ideal for applications requiring a calm yet elegant aesthetic.

Best used for

Luxury lifestyle brands
Corporate identity (trustworthy)
Meditation and wellness apps
High-end technology interfaces
Marine conservation organizations
Financial planning services

Suggested color roles

primary

#191970 serves as a deep, authoritative primary, ideal for strong branding, main navigation, or important headers.

secondary

#4169E1 provides a vibrant, engaging secondary, suitable for subheadings, content sections, or supportive graphics.

accent

#6495ED delivers a balanced, inviting accent, perfect for interactive elements, hover states, or subtle highlights.

background

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

text

Use #191970 or a deep charcoal for body text on #ADD8E6 or #B0C4DE backgrounds for optimal legibility.

Accessibility notes

Ensure #191970 text on #ADD8E6 backgrounds meets WCAG AA contrast standards.
Avoid using #ADD8E6 or #B0C4DE for small text on light backgrounds due to insufficient contrast.
Use #191970 or #4169E1 for critical interactive elements to ensure clear visibility.
For large text, #6495ED on #ADD8E6 can work, but always verify contrast ratios.

Recommended combinations

Deep Lagoon

Creates a profound, immersive gradient, ideal for dark mode themes or impactful hero sections.

#191970 · #4169E1 · #6495ED

Clear Shimmer

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

#ADD8E6 · #B0C4DE · #6495ED

Sophisticated Contrast

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

#191970 · #ADD8E6 · #4169E1

CSS variables

:root {
  --azure-lagoon-shimmer-1: #191970;
  --azure-lagoon-shimmer-2: #4169E1;
  --azure-lagoon-shimmer-3: #6495ED;
  --azure-lagoon-shimmer-4: #B0C4DE;
  --azure-lagoon-shimmer-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-lagoon-shimmer": {
        1: "#191970",
        2: "#4169E1",
        3: "#6495ED",
        4: "#B0C4DE",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#191970

Color 2#4169E1

Color 3#6495ED

Color 4#B0C4DE

Color 5#ADD8E6

Accessibility

Contrast checker

3.1:1AA18

5:1AA

8.3:1AAA

9.7:1AAA

3.1:1AA18

1.6:1Fail

2.7:1Fail

3.2:1AA18

5:1AA

1.6:1Fail

1.7:1Fail

1.9:1Fail

8.3:1AAA

2.7:1Fail

1.7:1Fail

1.2:1Fail

9.7:1AAA

3.2:1AA18

1.9:1Fail

1.2:1Fail

Similar palettes

More like Azure Lagoon Shimmer

View all cool

Crystal Clear Lagoon

Glacial Water Reflection