Back to palettes

Palette

Tropical Lagoon Shimmer

Bright turquoise, vivid aquamarine, and clear cerulean hues reflect the sparkling, inviting waters of a hidden lagoon.

vibrantplayful5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tropical 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 Tropical Lagoon Shimmer.

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

Data visualization

#008080#20B2AA#40E0D0#7FFFD4#AFEEEE

Palette guide

How to use Tropical Lagoon Shimmer

Overview

The Tropical Lagoon Shimmer palette captures the breathtaking sparkle and clarity of untouched tropical waters, from deep lagoons to shimmering shallows. It gracefully transitions from a rich Teal (#008080) and a soothing Light Sea Green (#20B2AA) to a vibrant Turquoise (#40E0D0). The lighter tones, a luminous Aquamarine (#7FFFD4) and a delicate Pale Turquoise (#AFEEEE), evoke the sun glinting off crystal-clear surfaces. This playful yet elegant palette is perfect for designs seeking to convey freshness, natural beauty, and a sense of open, inviting spaces. Designers and developers can use it to create airy interfaces, inspiring travel content, or serene product branding.

Best used for

  • Beachwear and resort fashion
  • Water sports and adventure tourism
  • Coastal home decor
  • Digital art with aquatic themes
  • Environmental non-profit branding
  • Refreshing beverage packaging

Suggested color roles

primary

Use #20B2AA as a balanced and inviting primary, representing the heart of the lagoon.

secondary

Employ #008080 to provide depth and sophistication, ideal for grounding elements or bold statements.

accent

Apply #40E0D0 as a bright, shimmering accent for interactive elements or to draw the eye.

background

A very light, airy base like #AFEEEE creates a spacious and ethereal feel, perfect for a serene backdrop.

text

A dark charcoal (#333333) or deep navy (#001F3F) ensures readability on lighter backgrounds. White text is effective on #008080 and #20B2AA.

Accessibility notes

  • Crucial to check contrast for text on lighter shades like #7FFFD4 and #AFEEEE.
  • These very light colors will require dark text (e.g., black or dark blue) to pass WCAG AA.
  • The darker colors (#008080, #20B2AA) offer good contrast for white or light-colored text.
  • Avoid using #7FFFD4 or #AFEEEE for essential text elements without very strong contrast.

Recommended combinations

Ocean Depths

Corporate elements, sophisticated backgrounds, or to convey depth and stability.

#008080 · #20B2AA · #AFEEEE

Shimmering Shores

Light and airy layouts, header areas, or elements that need a bright, expansive feel.

#AFEEEE · #7FFFD4 · #40E0D0

Reef Harmony

Accents, calls to action, or illustrations that require a balanced and natural vibrancy.

#20B2AA · #40E0D0 · #008080

CSS variables

:root {
  --tropical-lagoon-shimmer-1: #008080;
  --tropical-lagoon-shimmer-2: #20B2AA;
  --tropical-lagoon-shimmer-3: #40E0D0;
  --tropical-lagoon-shimmer-4: #7FFFD4;
  --tropical-lagoon-shimmer-5: #AFEEEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropical-lagoon-shimmer": {
        1: "#008080",
        2: "#20B2AA",
        3: "#40E0D0",
        4: "#7FFFD4",
        5: "#AFEEEE",
      }
    }
  }
}

Related searches

sparkling water palettetropical beach colorsaqua green design schemeserene aquatic brandinglight turquoise web design

Palette colors

Hex values

Color 1#008080
·
Color 2#20B2AA
·
Color 3#40E0D0
·
Color 4#7FFFD4
·
Color 5#AFEEEE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.9:1Fail
3.9:1AA18
3.7:1AA18
2
1.8:1Fail
1.6:1Fail
2.1:1Fail
2:1Fail
3
2.9:1Fail
1.6:1Fail
1.3:1Fail
1.3:1Fail
4
3.9:1AA18
2.1:1Fail
1.3:1Fail
1.1:1Fail
5
3.7:1AA18
2:1Fail
1.3:1Fail
1.1:1Fail

Similar palettes

More like Tropical Lagoon Shimmer

View all vibrant