Palette

Dreamy Lagoon Secret

Shades of serene blue and turquoise that reveal the tranquil secrets of a hidden lagoon.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#003F5E#006D8A#009CB7#3ACCDC#7CF0FF

Palette guide

How to use Dreamy Lagoon Secret

Overview

The Dreamy Lagoon Secret palette unveils serene blues and vibrant turquoises, from the deep #003F5E to the luminous #7CF0FF, embodying the tranquil secrets of a hidden lagoon. This collection offers designers a compelling blend of depth and vibrancy, ideal for projects needing a cool, refreshing, and mysterious aesthetic. Developers will find these hex codes perfect for creating immersive digital environments, engaging UI elements, and captivating visual content. The striking contrast between the darker hues like #006D8A and the brighter #3ACCDC allows for dynamic yet harmonious designs, ensuring a visually stimulating and cohesive user experience across all applications.

Best used for

Ocean-themed branding and websites
Adventure and travel agency promotions
Underwater photography portfolios
Gaming interfaces (fantasy, aquatic)
Eco-tourism marketing materials
Marine conservation initiatives

Suggested color roles

primary

#003F5E (Deep Ocean Blue): Establishes a strong, mysterious foundation, ideal for main navigation or hero sections.

secondary

#006D8A (Rich Teal): A balanced and versatile shade for subheadings, buttons, or accent panels, adding depth.

accent

#7CF0FF (Vibrant Cyan): Provides a luminous, energetic pop, perfect for calls-to-action, interactive elements, or focal points.

background

#009CB7 (Bright Teal): A vibrant yet calming background for main content areas, allowing darker elements to stand out.

text

White (#FFFFFF) text offers excellent contrast and readability against the darker blues in this palette.

Accessibility notes

Ensure white text on #003F5E, #006D8A, and #009CB7 provides sufficient contrast (WCAG AA usually met).
Avoid using #7CF0FF for small text on very light backgrounds as contrast may be insufficient.
Check contrast for interactive elements using #3ACCDC to ensure they are clearly discernible.
For optimal readability, use a dark neutral (e.g., black) for text on #7CF0FF or other very light backgrounds outside the palette.

Recommended combinations

Deep Lagoon

Ideal for creating deep, immersive backgrounds, strong branding elements, or visual narratives of exploration.

#003F5E · #006D8A · #009CB7

Coral Reef Glow

Perfect for vibrant accents, interactive elements, or gradients that simulate light filtering through water.

#006D8A · #3ACCDC · #7CF0FF

Mystic Waters

Use #003F5E for headings, #009CB7 for subheadings, and #7CF0FF for highlights to create a dynamic, readable layout.

#003F5E · #009CB7 · #7CF0FF

CSS variables

:root {
  --dreamy-lagoon-secret-1: #003F5E;
  --dreamy-lagoon-secret-2: #006D8A;
  --dreamy-lagoon-secret-3: #009CB7;
  --dreamy-lagoon-secret-4: #3ACCDC;
  --dreamy-lagoon-secret-5: #7CF0FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dreamy-lagoon-secret": {
        1: "#003F5E",
        2: "#006D8A",
        3: "#009CB7",
        4: "#3ACCDC",
        5: "#7CF0FF",
      }
    }
  }
}

Hex values

Color 1#003F5E

Color 2#006D8A

Color 3#009CB7

Color 4#3ACCDC

Color 5#7CF0FF

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

5.8:1AA

8.4:1AAA

1.9:1Fail

1.8:1Fail

3.1:1AA18

4.4:1AA18

3.4:1AA18

1.8:1Fail

1.7:1Fail

2.4:1Fail

5.8:1AA

3.1:1AA18

1.7:1Fail

1.5:1Fail

8.4:1AAA

4.4:1AA18

2.4:1Fail

1.5:1Fail

Similar palettes

More like Dreamy Lagoon Secret