Back to palettes

Palette

Tranquil Lagoon Hues

Serene and clear hues reflecting the peaceful, glassy surface and hidden depths of a secluded lagoon.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1B4C5F#3C6E71#6DA5A5#A7CECF#DDEAEB

Palette guide

How to use Tranquil Lagoon Hues

Overview

The Tranquil Lagoon Hues palette (version 2) presents a harmonious collection of cool, muted teal and blue-greens, perfect for designs requiring a serene and sophisticated touch. With colors ranging from the deep #1B4C5F to the airy #DDEAEB, including #3C6E71, #6DA5A5, and #A7CECF, this palette evokes the peaceful depths and clear surfaces of a secluded lagoon. It's an excellent choice for designers and developers aiming to create interfaces and materials that feel balanced, natural, and inviting, offering a gentle visual experience. The subtle variations ensure versatility across various applications, maintaining a cohesive and calming aesthetic.

Best used for

  • Wellness and mindfulness application design
  • Eco-friendly product packaging and branding
  • Boutique hotel or resort websites
  • Interior design mood boards for tranquil spaces
  • Educational materials on nature or marine life
  • Sustainable fashion brand identity

Suggested color roles

primary

Designate #1B4C5F as the primary color for strong anchors, navigation, or headings. Its depth provides a solid, grounding presence.

secondary

Utilize #3C6E71 for supporting elements, sub-sections, or larger blocks of color. It bridges the deep primary and brighter accents gracefully.

accent

Apply #6DA5A5 for interactive elements, highlights, or subtle calls-to-action. Its balanced tone draws attention without being overpowering.

background

Employ #DDEAEB for clean, spacious backgrounds. This very light, almost white, shade provides excellent contrast for darker text.

text

For optimal readability on light backgrounds like #DDEAEB, use #1B4C5F or #3C6E71. For text on darker backgrounds, #DDEAEB offers clear legibility.

Accessibility notes

  • Ensure sufficient contrast when using #A7CECF or #DDEAEB for text on other light palette colors.
  • Text in #1B4C5F or #3C6E71 on #DDEAEB background will provide excellent readability.
  • Avoid using #DDEAEB text on #A7CECF backgrounds as contrast may be insufficient for standard text.
  • For larger text, #6DA5A5 can work on #1B4C5F, but check WCAG AA guidelines for smaller text sizes.

Recommended combinations

Deep Lagoon Base

Effective for primary UI: dark header, light content background, with a soft accent for interactive elements.

#1B4C5F · #DDEAEB · #6DA5A5

Misty Shore

Great for layering, where a mid-tone serves as a base, complemented by a lighter shade, with the darkest for text.

#3C6E71 · #A7CECF · #1B4C5F

Tranquil Flow

Use these lighter tones together for subtle gradients, illustrations, or soft, ethereal background patterns.

#6DA5A5 · #A7CECF · #DDEAEB

CSS variables

:root {
  --tranquil-lagoon-hues-2-1: #1B4C5F;
  --tranquil-lagoon-hues-2-2: #3C6E71;
  --tranquil-lagoon-hues-2-3: #6DA5A5;
  --tranquil-lagoon-hues-2-4: #A7CECF;
  --tranquil-lagoon-hues-2-5: #DDEAEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tranquil-lagoon-hues-2": {
        1: "#1B4C5F",
        2: "#3C6E71",
        3: "#6DA5A5",
        4: "#A7CECF",
        5: "#DDEAEB",
      }
    }
  }
}

Related searches

calm teal blue paletteserene lagoon colorsmuted aqua brand identitypeaceful web design paletteteal green ui theme

Palette colors

Hex values

Color 1#1B4C5F
·
Color 2#3C6E71
·
Color 3#6DA5A5
·
Color 4#A7CECF
·
Color 5#DDEAEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.4:1AA18
5.5:1AA
7.6:1AAA
2
1.6:1Fail
2.1:1Fail
3.4:1AA18
4.7:1AA
3
3.4:1AA18
2.1:1Fail
1.6:1Fail
2.2:1Fail
4
5.5:1AA
3.4:1AA18
1.6:1Fail
1.4:1Fail
5
7.6:1AAA
4.7:1AA
2.2:1Fail
1.4:1Fail

Similar palettes

More like Tranquil Lagoon Hues

View all cool
Serene Lagoon Mist
Tranquil Lagoon Hues
Aqua Dream Glow
Aqua Dream Shimmer
Aqua Stillness Mood
Aqua Tile Spa