Palette

Oceanic Lagoon Calm

Invigorating blues and greens that evoke the clear, tranquil waters of a secluded oceanic lagoon.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#005F60#008F8F#00BFAF#00E0E0#00FFFF

Palette guide

How to use Oceanic Lagoon Calm

Overview

The Oceanic Lagoon Calm palette offers a refreshing gradient of vibrant aqua and teal tones, reminiscent of clear, tranquil lagoon waters. Ranging from the deep #005F60 to the bright #00FFFF, and including the inviting #008F8F, #00BFAF, and #00E0E0, this collection is designed to infuse projects with a sense of clarity, freshness, and peaceful energy. It’s an excellent choice for designers and developers seeking to create engaging interfaces and branding that feel both invigorating and soothing, capturing the essence of pristine aquatic environments.

Best used for

Travel and tourism websites (especially tropical destinations)
Spa and relaxation app interfaces
Clean energy and sustainability brand identities
Health and wellness product packaging
Children's educational content on marine life
Summer fashion and accessory designs

Suggested color roles

primary

Utilize #005F60 as a grounding primary color for headers or footer sections, providing a sense of depth.

secondary

Employ #008F8F for larger content blocks or background elements, maintaining a consistent aquatic theme.

accent

Highlight calls to action or interactive elements with the bright #00E0E0 or #00FFFF to draw immediate attention.

background

The mid-tone #00BFAF can serve as a refreshing background for main content areas, promoting readability.

text

For dark backgrounds like #005F60, use white or light gray. For lighter colors such as #00E0E0 or #00FFFF, a dark charcoal or black provides optimal contrast.

Accessibility notes

White text has excellent contrast on #005F60 and #008F8F.
Exercise caution when placing text on #00BFAF, #00E0E0, or #00FFFF; dark text (e.g., black or charcoal) is usually necessary.
Ensure sufficient contrast for all text elements, especially against the lighter aqua tones.
Consider using larger font sizes for text on colors with marginal contrast to improve readability for all users.

Recommended combinations

Lagoon Depth

Creates a gradual, calming transition from deep to shallow, ideal for layered backgrounds or gradients.

#005F60 · #008F8F · #00BFAF

Aqua Burst

Delivers a vibrant, energetic, and modern feel, perfect for accents or dynamic UI elements.

#00E0E0 · #00FFFF · #005F60

Tranquil Shore

Offers a balanced and serene look, suitable for main content areas or minimalist designs.

#00BFAF · #008F8F · #00E0E0

CSS variables

:root {
  --oceanic-lagoon-calm-1: #005F60;
  --oceanic-lagoon-calm-2: #008F8F;
  --oceanic-lagoon-calm-3: #00BFAF;
  --oceanic-lagoon-calm-4: #00E0E0;
  --oceanic-lagoon-calm-5: #00FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-lagoon-calm": {
        1: "#005F60",
        2: "#008F8F",
        3: "#00BFAF",
        4: "#00E0E0",
        5: "#00FFFF",
      }
    }
  }
}

Hex values

Color 1#005F60

Color 2#008F8F

Color 3#00BFAF

Color 4#00E0E0

Color 5#00FFFF

Accessibility

Contrast checker

1.9:1Fail

3.2:1AA18

4.5:1AA

6:1AA

1.9:1Fail

1.7:1Fail

2.4:1Fail

3.1:1AA18

3.2:1AA18

1.7:1Fail

1.4:1Fail

1.8:1Fail

4.5:1AA

2.4:1Fail

1.4:1Fail

1.3:1Fail

6:1AA

3.1:1AA18

1.8:1Fail

1.3:1Fail

Similar palettes

More like Oceanic Lagoon Calm

View all cool

Submerged Garden Whisper

Aqua Dream Glow

Coastal Breeze Mist

Coastal Reef Haven

Coastal Seafoam Whisper

Kelp Forest Sway