Back to palettes

Palette

Tropical Lagoon Bloom

Vibrant turquoises and deep teals reflecting the clear waters and lush life of a tropical lagoon.

vibrantnatural5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#20B2AA#00CED1#40E0D0#87CEEB#2F4F4F

Palette guide

How to use Tropical Lagoon Bloom

Overview

The Tropical Lagoon Bloom palette immerses you in the serene yet vibrant depths of an exotic aquatic paradise. This collection features a harmonious blend of cool, refreshing tones, starting with a calming Light Sea Green (#20B2AA) and deepening into a rich Dark Turquoise (#00CED1). A brighter Turquoise (#40E0D0) and a soft Sky Blue (#87CEEB) evoke clear, sparkling waters, while a sophisticated Dark Slate Gray (#2F4F4F) provides grounding contrast, reminiscent of deep ocean floors or shadowed rocks. Ideal for designs seeking tranquility, natural elegance, and a touch of the mysterious, this palette is perfect for high-end resorts, eco-friendly brands, or calming digital experiences.

Best used for

  • Luxury spa and wellness branding
  • Eco-tourism websites
  • Coastal living interior design
  • Nature documentary graphics
  • High-end jewelry displays
  • Serene meditation apps

Suggested color roles

primary

Use #00CED1 as a strong, captivating turquoise, perfect for branding and key visual elements.

secondary

Employ #20B2AA to provide a softer, supportive green-blue tone, ideal for secondary information.

accent

Apply #40E0D0 for highlights, interactive elements, or to add a shimmering, vibrant touch.

background

A light, airy blue like #87CEEB creates a refreshing and open backdrop, enhancing the serene mood.

text

Dark Slate Gray (#2F4F4F) offers excellent contrast and sophistication on lighter backgrounds. White text is highly legible on #00CED1 and #2F4F4F.

Accessibility notes

  • Ensure adequate contrast between lighter blues and text, especially for #87CEEB.
  • Dark Slate Gray (#2F4F4F) on #87CEEB or #40E0D0 should meet WCAG AA for text.
  • Avoid using #87CEEB directly for small text on a white or very light background due to low contrast.
  • Test all color combinations, especially for links or interactive elements, to ensure visibility.

Recommended combinations

Deep Waters

Corporate branding, sophisticated websites, or designs needing depth and professionalism.

#2F4F4F · #00CED1 · #40E0D0

Clear Shallows

Backgrounds, informational graphics, or elements to convey lightness and serenity.

#87CEEB · #40E0D0 · #20B2AA

Reef Life

Accents, calls to action, or illustrations that require a balanced blend of vibrancy and grounding.

#00CED1 · #20B2AA · #2F4F4F

CSS variables

:root {
  --tropical-lagoon-bloom-1: #20B2AA;
  --tropical-lagoon-bloom-2: #00CED1;
  --tropical-lagoon-bloom-3: #40E0D0;
  --tropical-lagoon-bloom-4: #87CEEB;
  --tropical-lagoon-bloom-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropical-lagoon-bloom": {
        1: "#20B2AA",
        2: "#00CED1",
        3: "#40E0D0",
        4: "#87CEEB",
        5: "#2F4F4F",
      }
    }
  }
}

Related searches

tropical blue green paletteserene lagoon colorselegant aqua schemedeep turquoise brandingnatural cool tones

Palette colors

Hex values

Color 1#20B2AA
·
Color 2#00CED1
·
Color 3#40E0D0
·
Color 4#87CEEB
·
Color 5#2F4F4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.6:1Fail
1.5:1Fail
3.4:1AA18
2
1.3:1Fail
1.2:1Fail
1.1:1Fail
4.6:1AA
3
1.6:1Fail
1.2:1Fail
1.1:1Fail
5.4:1AA
4
1.5:1Fail
1.1:1Fail
1.1:1Fail
5.1:1AA
5
3.4:1AA18
4.6:1AA
5.4:1AA
5.1:1AA

Similar palettes

More like Tropical Lagoon Bloom

View all vibrant