Back to palettes

Palette

Deep Lagoon Jewel

A sparkling range of teals and aqua, evoking the clear, inviting waters of a hidden lagoon.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#004D40#00796B#00A38B#4DB6AC#80CBC4

Palette guide

How to use Deep Lagoon Jewel

Overview

The Deep Lagoon Jewel palette offers a serene and sophisticated gradient of teals and aquas, perfect for evoking a sense of calm and natural beauty. Anchored by the deep, rich #004D40, it transitions through the vibrant #00796B and refreshing #00A38B, culminating in the airy #4DB6AC and light #80CBC4. This monochromatic scheme provides inherent harmony, making it easy for designers to create cohesive visual experiences. Developers will appreciate the consistent mood across these shades, ideal for UI elements where subtle color shifts enhance user flow without visual clutter. It's a versatile choice for projects seeking an elegant, aquatic-inspired aesthetic.

Best used for

  • Eco-friendly brand identities
  • Wellness and spa websites
  • Aquatic-themed product packaging
  • High-end tech interfaces
  • Serene interior design concepts
  • Nature conservation initiatives

Suggested color roles

primary

#004D40 - Ideal for brand logos, main navigation, or strong headers, providing a deep, stable foundation.

secondary

#00796B - Excellent for subheadings, active states in UI, or key graphical elements, adding vibrancy without overwhelming.

accent

#00A38B - Perfect for calls-to-action, interactive elements, or small illustrative details to draw attention.

background

#80CBC4 - A light and airy choice for main content areas or subtle page backgrounds, ensuring a clean, spacious feel.

text

#004D40 - Use this deep teal for primary body text on light backgrounds like #80CBC4 to ensure excellent readability and maintain palette cohesion. For very light backgrounds, a near-black or charcoal could also be considered for optimal contrast.

Accessibility notes

  • Ensure #004D40 (dark primary) has sufficient contrast against #80CBC4 (light background) for all text sizes (aim for WCAG AA or AAA).
  • Verify interactive elements using #00A38B (accent) meet contrast requirements against their surrounding backgrounds.
  • Avoid placing light shades like #4DB6AC or #80CBC4 directly on each other for important text or UI elements.
  • Always test color combinations with accessibility tools, especially for users with color vision deficiencies.

Recommended combinations

Deep Contrast

A classic, high-contrast pairing for professional websites, using the darkest for text and lightest for background, with the accent for buttons.

#004D40 · #80CBC4 · #00A38B

Vibrant Flow

Suited for dynamic user interfaces or data visualizations where a harmonious gradient progression is desired, with the darkest providing grounding.

#00796B · #4DB6AC · #004D40

Subtle Aqua

Great for creating a soft, airy feel in background elements, card designs, or illustrations where a gentle shift in tone is preferred.

#80CBC4 · #4DB6AC · #00796B

CSS variables

:root {
  --deep-lagoon-jewel-1: #004D40;
  --deep-lagoon-jewel-2: #00796B;
  --deep-lagoon-jewel-3: #00A38B;
  --deep-lagoon-jewel-4: #4DB6AC;
  --deep-lagoon-jewel-5: #80CBC4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-lagoon-jewel": {
        1: "#004D40",
        2: "#00796B",
        3: "#00A38B",
        4: "#4DB6AC",
        5: "#80CBC4",
      }
    }
  }
}

Related searches

teal color palette for web designaquatic branding colorsserene jewel tone palettemonochromatic teal UIcalm green blue color scheme

Palette colors

Hex values

Color 1#004D40
·
Color 2#00796B
·
Color 3#00A38B
·
Color 4#4DB6AC
·
Color 5#80CBC4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.1:1AA18
4:1AA18
5.3:1AA
2
1.8:1Fail
1.7:1Fail
2.2:1Fail
2.9:1Fail
3
3.1:1AA18
1.7:1Fail
1.3:1Fail
1.7:1Fail
4
4:1AA18
2.2:1Fail
1.3:1Fail
1.3:1Fail
5
5.3:1AA
2.9:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Deep Lagoon Jewel

View all monochrome
Azure Depths Gradient
Azure Ripple Effect
Azure Sky Grayscale
Emerald River Flow
Foggy Shore Serene
Frosted Lake