Back to palettes

Palette

Azure Lagoon Dream

Dive into a tranquil aquatic paradise with soothing blues and refreshing teals.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#48D1CC#20B2AA#008B8B#B0E0E6#6495ED

Palette guide

How to use Azure Lagoon Dream

Overview

The Azure Lagoon Dream palette invites users to dive into a tranquil aquatic paradise with its soothing blues and refreshing teals. This collection features the vibrant turquoise of #48D1CC, the balanced teal of #20B2AA, the deep dark cyan of #008B8B, the airy aqua of #B0E0E6, and a classic cornflower blue in #6495ED. Designers and developers will find these hues exceptionally versatile for creating serene, inviting, and visually refreshing digital experiences. The harmonious blend of blues and teals evokes clarity, peace, and a connection to pristine waters, ideal for applications requiring a calm yet engaging aesthetic.

Best used for

  • Spa and wellness websites
  • Tropical resort branding
  • Marine life educational apps
  • Eco-tourism marketing
  • Children's bath product packaging
  • Relaxation and meditation platforms

Suggested color roles

primary

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

secondary

#008B8B provides a deep, stable secondary, suitable for subheadings, navigation, or foundational elements.

accent

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

background

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

text

Use #008B8B or a deep charcoal for body text on #B0E0E6 or #48D1CC backgrounds for optimal legibility.

Accessibility notes

  • Ensure #008B8B text on #B0E0E6 backgrounds meets WCAG AA contrast standards.
  • Avoid using #B0E0E6 for small text on any other palette color due to insufficient contrast.
  • Use #20B2AA or #008B8B for critical interactive elements to ensure clear visibility.
  • For large text, #6495ED on #B0E0E6 can work, but always verify contrast ratios.

Recommended combinations

Lagoon Gradient

Creates a gentle gradient from light aqua to balanced teal, ideal for serene backgrounds or headers.

#B0E0E6 · #48D1CC · #20B2AA

Aqua Contrast

A strong contrasting trio for clear visual hierarchy, combining deep primary with light background and mid-tone blue.

#008B8B · #B0E0E6 · #6495ED

Dreamy Flow

Effective for creating a sense of movement or progression in UI elements or data visualization.

#48D1CC · #20B2AA · #6495ED

CSS variables

:root {
  --azure-lagoon-dream-1: #48D1CC;
  --azure-lagoon-dream-2: #20B2AA;
  --azure-lagoon-dream-3: #008B8B;
  --azure-lagoon-dream-4: #B0E0E6;
  --azure-lagoon-dream-5: #6495ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-lagoon-dream": {
        1: "#48D1CC",
        2: "#20B2AA",
        3: "#008B8B",
        4: "#B0E0E6",
        5: "#6495ED",
      }
    }
  }
}

Related searches

tranquil aqua blue palettelagoon dream colorsserene teal web designrefreshing blue green schemeaquatic paradise branding

Palette colors

Hex values

Color 1#48D1CC
·
Color 2#20B2AA
·
Color 3#008B8B
·
Color 4#B0E0E6
·
Color 5#6495ED
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.2:1Fail
1.3:1Fail
1.6:1Fail
2
1.4:1Fail
1.6:1Fail
1.8:1Fail
1.1:1Fail
3
2.2:1Fail
1.6:1Fail
2.9:1Fail
1.4:1Fail
4
1.3:1Fail
1.8:1Fail
2.9:1Fail
2.1:1Fail
5
1.6:1Fail
1.1:1Fail
1.4:1Fail
2.1:1Fail

Similar palettes

More like Azure Lagoon Dream

View all cool
Aegean Coast Whisper
Azure Canopy Light
Azure Reef Currents
Calm Ocean Swell
Cerulean Coast Dream
Cerulean Coastline Calm