Back to palettes

Palette

Tropical Lagoon Oasis

Lush blues and greens evoke the clear, refreshing waters of a secluded tropical lagoon oasis.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#008080#00CED1#20B2AA#40E0D0#AFEEEE

Palette guide

How to use Tropical Lagoon Oasis

Overview

The Tropical Lagoon Oasis palette offers a deeply calming and refreshing journey into the serene depths of a secluded tropical haven. Dominated by lush blues and greens, it transitions from a rich Teal (#008080) and a vibrant Dark Turquoise (#00CED1) to a softer Light Sea Green (#20B2AA) and a bright Turquoise (#40E0D0). The collection culminates with a delicate Pale Turquoise (#AFEEEE), evoking clear, shallow waters. This harmonious progression of cool tones is perfect for designs aiming to inspire tranquility, natural beauty, and a sense of escape. Developers and designers can use this palette to create soothing interfaces, wellness branding, or peaceful digital environments.

Best used for

  • Spa and relaxation services
  • Coastal resort branding
  • Environmental awareness campaigns
  • Yoga and meditation apps
  • Nautical-themed products
  • Sustainable fashion lines

Suggested color roles

primary

Use #008080 as a deep, grounding teal that conveys stability and natural elegance.

secondary

Employ #00CED1 as a vibrant and refreshing support, ideal for drawing attention to key features.

accent

Apply #40E0D0 for highlights or interactive elements that need a bright, sparkling touch.

background

A very light, airy blue like #AFEEEE provides a sense of spaciousness and calm, perfect for a tranquil backdrop.

text

A dark navy or charcoal (#0A2A3A or #333333) works excellently on lighter backgrounds. White text is highly legible on #008080 and #00CED1.

Accessibility notes

  • Ensure sufficient contrast, especially when placing text on lighter shades like #AFEEEE.
  • #AFEEEE will require dark text (e.g., black or dark blue) to meet WCAG AA standards.
  • The deeper colors (#008080, #00CED1) are suitable for white or very light text.
  • Be mindful of colorblind users when using similar adjacent shades; ensure there's enough luminance difference.

Recommended combinations

Deep Calm

Main content blocks, formal branding, or to establish a sense of depth and tranquility.

#008080 · #20B2AA · #AFEEEE

Shimmering Surface

Backgrounds, headers, or elements that need to feel light, expansive, and refreshing.

#AFEEEE · #40E0D0 · #00CED1

Oasis Flow

Gradients, visual hierarchies, or to emphasize a natural, flowing transition between elements.

#00CED1 · #20B2AA · #008080

CSS variables

:root {
  --tropical-lagoon-oasis-1: #008080;
  --tropical-lagoon-oasis-2: #00CED1;
  --tropical-lagoon-oasis-3: #20B2AA;
  --tropical-lagoon-oasis-4: #40E0D0;
  --tropical-lagoon-oasis-5: #AFEEEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropical-lagoon-oasis": {
        1: "#008080",
        2: "#00CED1",
        3: "#20B2AA",
        4: "#40E0D0",
        5: "#AFEEEE",
      }
    }
  }
}

Related searches

calm aqua blue paletteserene ocean colorstropical teal brandingcool lagoon designpeaceful web interface

Palette colors

Hex values

Color 1#008080
·
Color 2#00CED1
·
Color 3#20B2AA
·
Color 4#40E0D0
·
Color 5#AFEEEE
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
1.8:1Fail
2.9:1Fail
3.7:1AA18
2
2.4:1Fail
1.3:1Fail
1.2:1Fail
1.5:1Fail
3
1.8:1Fail
1.3:1Fail
1.6:1Fail
2:1Fail
4
2.9:1Fail
1.2:1Fail
1.6:1Fail
1.3:1Fail
5
3.7:1AA18
1.5:1Fail
2:1Fail
1.3:1Fail

Similar palettes

More like Tropical Lagoon Oasis

View all cool