Palette

Azure Lagoon Shimmer

A lively array of blues, greens, and golden sands mimicking the shimmering, clear waters of a tropical lagoon.

vibrantenergetic5 colors

More vibrant 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

#005F73#0A9396#94D2BD#E9D8A6#EE9B00

Palette guide

How to use Azure Lagoon Shimmer

Overview

The Azure Lagoon Shimmer palette (ID: azure-lagoon-shimmer-2) presents a lively array of blues, greens, and golden sands, mimicking the shimmering, clear waters of a tropical lagoon. It features the deep, grounding teal of #005F73, the vibrant aqua of #0A9396, the soft mint of #94D2BD, the sandy beige of #E9D8A6, and a striking golden orange in #EE9B00. Designers and developers will find this palette excellent for creating energetic, inviting, and visually rich digital experiences. The harmonious blend of cool and warm tones evokes feelings of tropical escape and playful vibrancy, ideal for projects that aim for a lively and memorable aesthetic.

Best used for

Tropical travel agencies
Beach resort branding
Summer fashion collections
Food and beverage (fruity/tropical)
Children's entertainment platforms
Event marketing (outdoor/festive)

Suggested color roles

primary

#005F73 serves as a deep, anchoring primary color, ideal for strong branding, main navigation, or important headers.

secondary

#0A9396 provides a vibrant, balanced secondary, suitable for subheadings, content sections, or supportive graphics.

accent

#EE9B00 delivers a bold, warm accent, perfect for calls to action, interactive elements, or eye-catching details.

background

#E9D8A6 creates a soft, sandy backdrop, providing warmth and ensuring content clarity.

text

Use #005F73 or a deep charcoal for body text on #E9D8A6 or #94D2BD backgrounds for optimal legibility.

Accessibility notes

Ensure #005F73 text on #E9D8A6 backgrounds meets WCAG AA contrast standards.
Avoid using #E9D8A6 or #94D2BD for small text on light backgrounds due to insufficient contrast.
Use #005F73 or #0A9396 for critical interactive elements, and #EE9B00 for high-impact calls to action.
Exercise caution with #EE9B00 for text on #E9D8A6; verify contrast carefully.

Recommended combinations

Tropical Sunset

Creates a vibrant, warm sunset effect over cool waters, ideal for evocative hero sections.

#E9D8A6 · #EE9B00 · #0A9396

Lagoon Depth

Forms a harmonious gradient from deep teal to light mint, suitable for backgrounds or layered elements.

#005F73 · #0A9396 · #94D2BD

Shimmering Sands

A striking trio for clear visual hierarchy, combining a deep primary with a sandy background and vibrant accent.

#005F73 · #E9D8A6 · #EE9B00

CSS variables

:root {
  --azure-lagoon-shimmer-2-1: #005F73;
  --azure-lagoon-shimmer-2-2: #0A9396;
  --azure-lagoon-shimmer-2-3: #94D2BD;
  --azure-lagoon-shimmer-2-4: #E9D8A6;
  --azure-lagoon-shimmer-2-5: #EE9B00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-lagoon-shimmer-2": {
        1: "#005F73",
        2: "#0A9396",
        3: "#94D2BD",
        4: "#E9D8A6",
        5: "#EE9B00",
      }
    }
  }
}

Hex values

Color 1#005F73

Color 2#0A9396

Color 3#94D2BD

Color 4#E9D8A6

Color 5#EE9B00

Accessibility

Contrast checker

2:1Fail

4.2:1AA18

5.1:1AA

3.2:1AA18

2:1Fail

2.2:1Fail

2.6:1Fail

1.7:1Fail

4.2:1AA18

2.2:1Fail

1.2:1Fail

1.3:1Fail

5.1:1AA

2.6:1Fail

1.2:1Fail

1.6:1Fail

3.2:1AA18

1.7:1Fail

1.3:1Fail

1.6:1Fail

Similar palettes

More like Azure Lagoon Shimmer