Back to palettes

Palette

Blue Lagoon

Shades of vivid blues mirroring the clear, inviting waters of a serene tropical lagoon.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ADD8E6#87CEEB#6495ED#4682B4#1E90FF

Palette guide

How to use Blue Lagoon

Overview

The Blue Lagoon palette features shades of vivid blues mirroring the clear, inviting waters of a serene tropical lagoon. Ranging from light #ADD8E6 (LightBlue) to deep #1E90FF (DodgerBlue), with intermediate hues like #87CEEB (SkyBlue), #6495ED (CornflowerBlue), and #4682B4 (SteelBlue), this palette creates a calm, refreshing, and vibrant aesthetic. It's an excellent choice for designers aiming to evoke a sense of tranquility, natural beauty, and inviting escape. The harmonious progression of blue tones makes it ideal for projects that require a serene, aquatic, and effortlessly beautiful visual language, reminiscent of a pristine tropical paradise.

Best used for

  • Travel and tourism branding
  • Resort and spa websites
  • Aquatic sports promotions
  • Serene app interfaces and digital art
  • Tropical event themes and decor
  • Calm meditation or wellness applications

Suggested color roles

primary

Use #1E90FF as the deepest, vibrant blue for main structural elements, symbolizing depth and stability.

secondary

Employ #6495ED for prominent headings or key visual components, representing the inviting clarity of the lagoon.

accent

Apply #ADD8E6 for light, airy highlights, interactive elements, or decorative touches, adding a refreshing sparkle.

background

Choose #ADD8E6 for a light, expansive water feel, creating an open and inviting user experience.

text

Dark blue or charcoal provides excellent readability on light backgrounds. White text works well on #1E90FF.

Accessibility notes

  • Crucially, ensure text has sufficient contrast against these light and mid-tone blues; darker blues or charcoals are essential.
  • Check readability of #6495ED on #4682B4 if used together; ensure sufficient color difference for clarity.
  • Avoid using light text on light backgrounds; always test contrast ratios for all text sizes.
  • Clearly define interactive elements with distinct color changes or outlines, as subtle differences may be hard to discern.

Recommended combinations

Clear Waters

Creates a light to mid-tone gradient, ideal for gentle backgrounds or calming UI elements.

#ADD8E6 · #87CEEB · #6495ED

Deep Lagoon

Offers vibrant depth, perfect for simulating water layers or providing visual structure.

#1E90FF · #4682B4 · #6495ED

Tropical Serenity

Provides a calm contrast for content, combining light and deeper blues for an elegant feel.

#ADD8E6 · #1E90FF · #87CEEB

CSS variables

:root {
  --blue-lagoon-1: #ADD8E6;
  --blue-lagoon-2: #87CEEB;
  --blue-lagoon-3: #6495ED;
  --blue-lagoon-4: #4682B4;
  --blue-lagoon-5: #1E90FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "blue-lagoon": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#6495ED",
        4: "#4682B4",
        5: "#1E90FF",
      }
    }
  }
}

Related searches

blue lagoon colorstropical water paletteserene blue themevibrant ocean designcalm aquatic tones

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#87CEEB
·
Color 3#6495ED
·
Color 4#4682B4
·
Color 5#1E90FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.9:1Fail
2.7:1Fail
2.1:1Fail
2
1.1:1Fail
1.7:1Fail
2.4:1Fail
1.9:1Fail
3
1.9:1Fail
1.7:1Fail
1.4:1Fail
1.1:1Fail
4
2.7:1Fail
2.4:1Fail
1.4:1Fail
1.3:1Fail
5
2.1:1Fail
1.9:1Fail
1.1:1Fail
1.3:1Fail

Similar palettes

More like Blue Lagoon

View all cool
Azure Reef Sanctuary
Aegean Coast Whisper
Aqua Tidal Pool
Aquatic Moss Garden
Arctic Glacier Lagoon
Azure Lagoon Dream