Palette

Crystal Clear Lagoon

Immerse yourself in the serene, translucent blues of a pristine and untouched water sanctuary.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00BFFF#87CEFA#ADD8E6#AFEEEE#E0FFFF

Palette guide

How to use Crystal Clear Lagoon

Overview

The Crystal Clear Lagoon palette immerses designers and developers in the serene, translucent blues of a pristine and untouched water sanctuary. This refreshing collection features a brilliant Deep Sky Blue (#00BFFF), a vibrant Light Sky Blue (#87CEFA), and a gentle Light Blue (#ADD8E6). Further enhanced by Pale Turquoise (#AFEEEE) and Light Cyan (#E0FFFF), it creates an incredibly clean and calming visual experience. These hues are ideal for projects requiring a sense of purity, tranquility, and spaciousness, such as wellness apps, eco-friendly branding, or any digital interface that benefits from a light, airy, and refreshing aesthetic, evoking calm and clarity.

Best used for

Eco-tourism websites
Spa and wellness branding
Marine conservation initiatives
Summer fashion collections
Clean and modern UI designs
Refreshing beverage packaging

Suggested color roles

primary

A vibrant, refreshing blue (#00BFFF) for main content areas, hero sections, or significant calls to action, conveying clarity.

secondary

Use Light Sky Blue (#87CEFA) for supporting content, subheadings, or secondary interactive elements, providing a pleasant mid-tone.

accent

The brightest shade (#E0FFFF), perfect for subtle highlights, interactive states, or delicate graphic elements, adding a shimmering effect.

background

A very light, airy blue (#AFEEEE) that serves as an excellent, spacious backdrop, enhancing the pristine feel.

text

Use a deep navy like #000080 or a dark charcoal like #333333 for dark text on lighter palette colors. White text (#FFFFFF) works well on #00BFFF.

Accessibility notes

The lightest colors (#E0FFFF, #AFEEEE, #ADD8E6) require very dark text for readability.
#87CEFA may have insufficient contrast with #ADD8E6 for text.
Avoid using light text on #00BFFF without verifying contrast ratios; a pure white is often best.
Always check contrast ratios for interactive elements and critical information.

Recommended combinations

Lagoon Surface

Ideal for clean website headers, ethereal digital art, or serene app interfaces.

#E0FFFF · #AFEEEE · #ADD8E6

Deep Water

Excellent for robust branding, deep background elements, or sophisticated data visualizations.

#00BFFF · #87CEFA · #ADD8E6

Ocean Breeze

Suitable for refreshing lifestyle content, eco-conscious product designs, or tranquil digital spaces.

#AFEEEE · #87CEFA · #00BFFF

CSS variables

:root {
  --crystal-clear-lagoon-1: #00BFFF;
  --crystal-clear-lagoon-2: #87CEFA;
  --crystal-clear-lagoon-3: #ADD8E6;
  --crystal-clear-lagoon-4: #AFEEEE;
  --crystal-clear-lagoon-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "crystal-clear-lagoon": {
        1: "#00BFFF",
        2: "#87CEFA",
        3: "#ADD8E6",
        4: "#AFEEEE",
        5: "#E0FFFF",
      }
    }
  }
}

Hex values

Color 1#00BFFF

Color 2#87CEFA

Color 3#ADD8E6

Color 4#AFEEEE

Color 5#E0FFFF

Accessibility

Contrast checker

1.2:1Fail

1.4:1Fail

1.6:1Fail

2:1Fail

1.2:1Fail

1.1:1Fail

1.3:1Fail

1.6:1Fail

1.4:1Fail

1.1:1Fail

1.2:1Fail

1.4:1Fail

1.6:1Fail

1.3:1Fail

1.2:1Fail

2:1Fail

1.6:1Fail

1.4:1Fail

1.2:1Fail

Similar palettes

More like Crystal Clear Lagoon

Crystal Clear Lagoon

See it in context.

Ready when you are.

Built with Crystal Clear Lagoon.

How to use Crystal Clear Lagoon

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Lagoon Surface

Deep Water

Ocean Breeze

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Crystal Clear Lagoon