Back to palettes

Palette

Lagoon Glow

Shimmering teals and aquamarines reveal the inviting, luminous depths of a secluded tropical lagoon.

CoolCalm5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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 Lagoon Glow

Overview

The Lagoon Glow palette evokes the serene and luminous depths of a tropical lagoon, featuring a captivating array of teals and aquamarines. This refreshing collection includes vibrant hues like #008080 and #20B2AA, alongside lighter, shimmering tones such as #40E0D0, #7FFFD4, and #AFEEEE. It's an excellent choice for designers aiming to convey tranquility, natural beauty, and a sense of escape. Ideal for wellness brands, travel agencies, or any digital product seeking a calm yet inviting aesthetic, Lagoon Glow offers a harmonious blend that promotes relaxation and visual interest. Its versatility allows for both bold statements and subtle background textures.

Best used for

  • Spa and wellness branding
  • Travel and tourism websites
  • Eco-friendly product packaging
  • Coastal-themed interior design inspiration
  • Mobile app interfaces for relaxation or meditation
  • Nature-focused educational materials

Suggested color roles

primary

Use #008080 as a grounding primary color for headers or main navigation, providing a deep, stable teal foundation.

secondary

Apply #20B2AA for subheadings, secondary content blocks, or feature highlights, maintaining a cohesive aquatic feel.

accent

Employ #40E0D0 or #7FFFD4 as a bright, shimmering accent for calls-to-action, icons, or interactive elements to catch the eye.

background

Utilize #AFEEEE for clean, airy backgrounds, allowing the deeper teals to stand out without overwhelming the user.

text

For body text, a dark charcoal or black provides excellent contrast on #AFEEEE. For darker backgrounds like #008080, white or a very light grey is recommended.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter shades like #7FFFD4 on #AFEEEE.
  • Use #008080 or #20B2AA for text on #AFEEEE backgrounds to maintain WCAG AA compliance.
  • Avoid placing light text (#7FFFD4) on similar tones like #40E0D0 without careful contrast checking.
  • Test interactive elements to ensure they are discernible for users with varying visual abilities.

Recommended combinations

Tropical Depths

Creates a rich, immersive feel; perfect for hero sections or captivating visual storytelling.

#008080 · #20B2AA · #40E0D0

Shimmering Surface

Delivers a light, ethereal aesthetic; excellent for clean layouts, subtle gradients, or background elements.

#40E0D0 · #7FFFD4 · #AFEEEE

Vibrant Contrast

Offers a striking yet harmonious balance; suitable for headlines against a light background with a pop of color.

#008080 · #AFEEEE · #7FFFD4

CSS variables

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

Tailwind config

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

Related searches

tropical lagoon color schemeteal and aqua palettescalm water colorsrefreshing brand colorsserene web design palette

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 Lagoon Glow

View all Cool
Misty Lagoon Serene
Alpine Lake Dawn
Aqua Marine Dream
Aqua Shore Breeze
Arctic Glacier Lagoon
Arctic Glacier Melt