Palette

Azure Lagoon Serene

A breathtaking dive into crystal-clear blues and teals, like a tranquil, sunlit lagoon.

VibrantCalm5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#008D93#00A693#00C6B8#00E0D1#00FFFF

Palette guide

How to use Azure Lagoon Serene

Overview

The Azure Lagoon Serene palette offers a breathtaking dive into crystal-clear blues and teals, like a tranquil, sunlit lagoon. This vibrant collection features a progressive gradient from the deep teal of #008D93, through the balanced shades of #00A693 and #00C6B8, to the bright, energetic #00E0D1 and #00FFFF. Designers and developers will find these hues exceptionally versatile for creating dynamic yet profoundly calming digital experiences. The palette's pure, saturated tones evoke feelings of clarity, vitality, and a strong connection to pristine aquatic environments, ideal for applications requiring a fresh and engaging aesthetic.

Best used for

Tropical travel agencies
Eco-friendly lifestyle brands
Marine conservation websites
Digital art and illustration
Health and wellness apps (energizing)
Vibrant event promotions

Suggested color roles

primary

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

secondary

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

accent

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

background

#00FFFF (though bright, can be used as a vibrant background for specific sections or as a very light overlay) or a near-white for general content.

text

Use #008D93 or a deep charcoal for body text on #00FFFF or #00E0D1 backgrounds for optimal legibility.

Accessibility notes

Ensure #008D93 text on #00FFFF backgrounds meets WCAG AA contrast standards.
Exercise caution with #00FFFF for text; it is extremely bright and may have insufficient contrast with other palette colors.
Use #008D93 or #00A693 for critical interactive elements to ensure clear visibility.
For large text, #00C6B8 on a very light background can work, but always verify contrast ratios.

Recommended combinations

Lagoon Gradient

Creates a smooth, deep gradient, ideal for immersive backgrounds or sophisticated data displays.

#008D93 · #00A693 · #00C6B8

Vibrant Shimmer

Excellent for energetic sections, providing a bright, shimmering effect for headers or interactive elements.

#00C6B8 · #00E0D1 · #00FFFF

Serene Contrast

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

#008D93 · #00FFFF · #00A693

CSS variables

:root {
  --azure-lagoon-serene-1: #008D93;
  --azure-lagoon-serene-2: #00A693;
  --azure-lagoon-serene-3: #00C6B8;
  --azure-lagoon-serene-4: #00E0D1;
  --azure-lagoon-serene-5: #00FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-lagoon-serene": {
        1: "#008D93",
        2: "#00A693",
        3: "#00C6B8",
        4: "#00E0D1",
        5: "#00FFFF",
      }
    }
  }
}

Hex values

Color 1#008D93

Color 2#00A693

Color 3#00C6B8

Color 4#00E0D1

Color 5#00FFFF

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

2.4:1Fail

3.2:1AA18

1.3:1Fail

1.4:1Fail

1.8:1Fail

2.4:1Fail

1.9:1Fail

1.4:1Fail

1.3:1Fail

1.7:1Fail

2.4:1Fail

1.8:1Fail

1.3:1Fail

3.2:1AA18

2.4:1Fail

1.7:1Fail

1.3:1Fail

Similar palettes

More like Azure Lagoon Serene

Azure Lagoon Serene

See it in context.

Ready when you are.

Built with Azure Lagoon Serene.

How to use Azure Lagoon Serene

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Lagoon Gradient

Vibrant Shimmer

Serene Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Azure Lagoon Serene