Back to palettes

Palette

Tranquil Lagoon Hues

Gentle gradients of deep to pale blue, capturing the peaceful essence of a secluded tropical 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

#0B4F6C#206A8B#4192B4#73BFE3#A5DDEC

Palette guide

How to use Tranquil Lagoon Hues

Overview

The Tranquil Lagoon Hues palette offers a refreshing gradient of blues, from the deep and grounding #0B4F6C to the light and airy #A5DDEC, including #206A8B, #4192B4, and #73BFE3. This collection perfectly captures the essence of a serene tropical lagoon, making it ideal for designs that aim to evoke clarity, peace, and natural beauty. Developers and designers can utilize these versatile cool tones to build interfaces that feel expansive and inviting, or create branding that communicates trust and tranquility. The progression of shades allows for dynamic visual hierarchies and engaging user experiences.

Best used for

  • Travel and tourism websites (tropical destinations)
  • Water conservation and environmental initiatives
  • Children's educational apps focusing on nature
  • Spa and wellness brand identity
  • Digital art and illustration with aquatic themes
  • Mobile application interfaces requiring a clean, calm aesthetic

Suggested color roles

primary

Assign #0B4F6C as the dominant color for robust headers, footers, or key brand elements. It provides a solid, trustworthy foundation.

secondary

Employ #206A8B for supportive sections, subheadings, or background panels. It maintains depth while offering a softer visual.

accent

Introduce #4192B4 or #73BFE3 for calls-to-action, interactive elements, or graphic highlights. These mid-tones draw attention effectively.

background

Utilize #A5DDEC for clean, bright backgrounds. Its light quality ensures excellent readability for darker text and an open feel.

text

For optimal legibility on lighter backgrounds like #A5DDEC, use #0B4F6C or #206A8B. For light text on darker backgrounds, #A5DDEC provides clear contrast.

Accessibility notes

  • Ensure sufficient contrast when using #73BFE3 or #A5DDEC for text on other light palette colors.
  • Text in #0B4F6C or #206A8B on #A5DDEC background should offer good readability.
  • Avoid pairing #A5DDEC text directly with #73BFE3 background without checking WCAG AA contrast ratios.
  • For critical information, always test the contrast of your chosen text and background combinations.

Recommended combinations

Lagoon Depth

Strong contrast for headers and primary content: dark blue for text, light blue background, with a clear accent.

#0B4F6C · #A5DDEC · #4192B4

Mid-Water Gradient

Excellent for serene background gradients or illustrative elements, moving from deeper to lighter blues.

#206A8B · #73BFE3 · #A5DDEC

Clear Water Accent

Use the lighter blues for UI elements and the darkest for impactful, readable text or icon details.

#4192B4 · #73BFE3 · #0B4F6C

CSS variables

:root {
  --tranquil-lagoon-hues-1: #0B4F6C;
  --tranquil-lagoon-hues-2: #206A8B;
  --tranquil-lagoon-hues-3: #4192B4;
  --tranquil-lagoon-hues-4: #73BFE3;
  --tranquil-lagoon-hues-5: #A5DDEC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tranquil-lagoon-hues": {
        1: "#0B4F6C",
        2: "#206A8B",
        3: "#4192B4",
        4: "#73BFE3",
        5: "#A5DDEC",
      }
    }
  }
}

Related searches

tropical blue color schemecalm water paletteserene blue brand colorslagoon web colorsaquatic ui design

Palette colors

Hex values

Color 1#0B4F6C
·
Color 2#206A8B
·
Color 3#4192B4
·
Color 4#73BFE3
·
Color 5#A5DDEC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.6:1Fail
4.4:1AA18
6:1AA
2
1.5:1Fail
1.7:1Fail
2.9:1Fail
4:1AA18
3
2.6:1Fail
1.7:1Fail
1.7:1Fail
2.4:1Fail
4
4.4:1AA18
2.9:1Fail
1.7:1Fail
1.4:1Fail
5
6:1AA
4:1AA18
2.4:1Fail
1.4:1Fail

Similar palettes

More like Tranquil Lagoon Hues

View all cool
Calm Ocean Swell
Glacial Lagoon Calm
Glacial Lake Mirror
Glacial Lake Serenity
Koi Water Garden
Lake Mist Reflection