Back to palettes

Palette

Azure Lagoon Drift

A serene blend of blues and teals, like drifting through the crystal-clear waters of a peaceful azure lagoon.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#008B8B#40E0D0#87CEEB#ADD8E6#B0E0E6

Palette guide

How to use Azure Lagoon Drift

Overview

The Azure Lagoon Drift palette offers a serene blend of blues and teals, like drifting through the crystal-clear waters of a peaceful azure lagoon. It features the deep dark cyan of #008B8B, the vibrant turquoise of #40E0D0, and the airy sky blues of #87CEEB, #ADD8E6, and #B0E0E6. Designers and developers will find these hues exceptionally versatile for creating calm, refreshing, and spacious digital experiences. The harmonious combination of cool tones evokes clarity, tranquility, and a connection to pristine nature, making it ideal for applications that aim for a soothing yet engaging aesthetic.

Best used for

  • Wellness and spa branding
  • Coastal lifestyle blogs
  • Children's educational apps (nature)
  • Eco-conscious product designs
  • Travel agencies for tranquil destinations
  • Meditation and mindfulness platforms

Suggested color roles

primary

#008B8B serves as a deep and stable primary, ideal for strong branding, main navigation, or important headers.

secondary

#40E0D0 provides a vibrant, refreshing secondary, suitable for subheadings, content sections, or supportive graphics.

accent

#87CEEB delivers a lighter, inviting accent, perfect for interactive elements, hover states, or subtle highlights.

background

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

text

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

Accessibility notes

  • Ensure #008B8B text on #B0E0E6 backgrounds meets WCAG AA contrast standards.
  • Avoid using #B0E0E6 or #ADD8E6 for small text on light backgrounds due to insufficient contrast.
  • Use #008B8B or #40E0D0 for critical interactive elements to ensure clear visibility.
  • For large text, #87CEEB on #B0E0E6 can work, but always verify contrast ratios.

Recommended combinations

Lagoon Depths

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

#008B8B · #40E0D0 · #87CEEB

Clear Waters

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

#B0E0E6 · #ADD8E6 · #87CEEB

Drift Contrast

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

#008B8B · #B0E0E6 · #40E0D0

CSS variables

:root {
  --azure-lagoon-drift-1: #008B8B;
  --azure-lagoon-drift-2: #40E0D0;
  --azure-lagoon-drift-3: #87CEEB;
  --azure-lagoon-drift-4: #ADD8E6;
  --azure-lagoon-drift-5: #B0E0E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-lagoon-drift": {
        1: "#008B8B",
        2: "#40E0D0",
        3: "#87CEEB",
        4: "#ADD8E6",
        5: "#B0E0E6",
      }
    }
  }
}

Related searches

tranquil teal blue palettelagoon drift colorsserene aqua web designcrystal clear blue schemepeaceful ocean branding

Palette colors

Hex values

Color 1#008B8B
·
Color 2#40E0D0
·
Color 3#87CEEB
·
Color 4#ADD8E6
·
Color 5#B0E0E6
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
2.4:1Fail
2.7:1Fail
2.9:1Fail
2
2.5:1Fail
1.1:1Fail
1.1:1Fail
1.1:1Fail
3
2.4:1Fail
1.1:1Fail
1.1:1Fail
1.2:1Fail
4
2.7:1Fail
1.1:1Fail
1.1:1Fail
1.1:1Fail
5
2.9:1Fail
1.1:1Fail
1.2:1Fail
1.1:1Fail

Similar palettes

More like Azure Lagoon Drift

View all cool
Quiet Bay Ripple
Azure Abyss Calm
Azure Reef Currents
Calm Ocean Swell
Cerulean Shore Breeze
Coastal Breeze