Back to palettes

Palette

Teal Essence

Refreshing and sophisticated hues that evoke the tranquil depths and surface shimmer of tropical waters.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Teal Essence 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 Teal Essence.

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

Data visualization

#008B8B#20B2AA#48D1CC#66CDAA#40E0D0

Palette guide

How to use Teal Essence

Overview

The Teal Essence palette offers a refreshing and sophisticated collection of teal hues, evoking the tranquil depths and shimmering surface of tropical waters. It features the elegant #008B8B, a vibrant #20B2AA, and a dazzling #48D1CC, creating a harmonious gradient of cool tones. The addition of the softer #66CDAA and the bright #40E0D0 further enhances its serene yet lively appeal. Designers can utilize this palette to craft projects that exude calm, clarity, and natural elegance, making it perfect for wellness, luxury, or environmental themes that require a soothing yet impactful visual presence.

Best used for

  • Spa and wellness retreat branding
  • Eco-friendly product packaging
  • Coastal-themed interior design
  • Luxury travel websites
  • Health and beauty app interfaces
  • Nature photography portfolios

Suggested color roles

primary

Use #008B8B (Dark Cyan) for main headers, prominent brand elements, or as a grounding background color.

secondary

Apply #20B2AA (Light Sea Green) for secondary navigation, subheadings, or to create a calming visual flow.

accent

Reserve #48D1CC (Medium Turquoise) or #40E0D0 (Turquoise) for interactive elements, hover states, or to add a bright, refreshing highlight.

background

The lightest shade, #66CDAA (Medium Aquamarine), can be used for soft, airy backgrounds. Alternatively, white or a very light gray provides a clean base.

text

For text on lighter shades, use #008B8B or a dark charcoal like #333333. For text on darker backgrounds, white or a very light gray is recommended.

Accessibility notes

  • Ensure sufficient contrast for text when using medium shades like #66CDAA on light backgrounds; darker text is usually needed.
  • White text on #008B8B and #20B2AA provides good readability.
  • Avoid using light-colored text on #48D1CC or #40E0D0 without checking contrast ratios.
  • Use a dark teal like #008B8B for body text on the lightest background, or white for text on darker teals.

Recommended combinations

Tranquil Depths

Excellent for creating a serene, sophisticated atmosphere in wellness brochures, luxury brand websites, or calming digital interfaces.

#008B8B · #20B2AA · #66CDAA

Ocean Shimmer

Ideal for vibrant accents, call-to-action buttons, or elements that need to convey freshness and energy, like app features.

#40E0D0 · #48D1CC · #20B2AA

Aqua Gradient

Use for subtle gradients, background patterns, or visual elements that benefit from a smooth transition of refreshing teal tones.

#008B8B · #48D1CC · #66CDAA

CSS variables

:root {
  --teal-essence-1: #008B8B;
  --teal-essence-2: #20B2AA;
  --teal-essence-3: #48D1CC;
  --teal-essence-4: #66CDAA;
  --teal-essence-5: #40E0D0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "teal-essence": {
        1: "#008B8B",
        2: "#20B2AA",
        3: "#48D1CC",
        4: "#66CDAA",
        5: "#40E0D0",
      }
    }
  }
}

Related searches

elegant teal color paletterefreshing aqua tonessophisticated blue green schemewater inspired colors designcalming teal branding

Palette colors

Hex values

Color 1#008B8B
·
Color 2#20B2AA
·
Color 3#48D1CC
·
Color 4#66CDAA
·
Color 5#40E0D0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.2:1Fail
2.1:1Fail
2.5:1Fail
2
1.6:1Fail
1.4:1Fail
1.4:1Fail
1.6:1Fail
3
2.2:1Fail
1.4:1Fail
1:1Fail
1.1:1Fail
4
2.1:1Fail
1.4:1Fail
1:1Fail
1.2:1Fail
5
2.5:1Fail
1.6:1Fail
1.1:1Fail
1.2:1Fail

Similar palettes

More like Teal Essence

View all cool
Emerald Grotto Shimmer
Deep Sapphire Tide
Jade Cascade
Precious Jade Stream
Venetian Canal Mist
Aqua Jewel