Palette

Glacier Lagoon Crystal

Sparkling blues and greens inspired by the crystalline depths of a pristine glacier lagoon.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F4C5C#2C6B7C#5AA4B8#8CD9E9#BFEDF5

Palette guide

How to use Glacier Lagoon Crystal

Overview

The "Glacier Lagoon Crystal" palette captures the sparkling blues and greens of a pristine glacier lagoon, offering a sophisticated and calming collection. From the deep, anchoring #0F4C5C to the shimmering #BFEDF5, these colors evoke clarity, depth, and natural beauty. Designers and developers can utilize this palette to create serene digital experiences, elegant branding, or interfaces that convey trust and tranquility. The harmonious transition through #2C6B7C, #5AA4B8, and #8CD9E9 provides versatility for crafting rich gradients, distinct sections, and visually engaging layouts that reflect the crystal-clear depths of arctic waters.

Best used for

Environmental non-profit websites
Luxury travel branding (arctic destinations)
Water purification product design
Spa and relaxation apps
Marine biology educational content
Modern corporate branding

Suggested color roles

primary

#2C6B7C - A solid, dependable teal-blue that works well for main navigation, key headings, or primary call-to-action buttons, providing a sense of stability.

secondary

#5AA4B8 - A brighter, more open blue, excellent for supporting elements, subheadings, or background sections that need to feel lighter than the primary.

accent

#8CD9E9 - A vibrant, light aqua that can be used sparingly for interactive states, small icons, or highlights that need to pop and draw attention.

background

#BFEDF5 - The lightest color, an almost white aqua, perfect for expansive, clean backgrounds that allow content to breathe and maintain a light, fresh feel.

text

For text on light backgrounds like #BFEDF5, use #0F4C5C or #2C6B7C for excellent contrast. For text over darker shades, pure white is the recommended choice for readability.

Accessibility notes

The darkest color, #0F4C5C, provides good contrast for white text, suitable for WCAG AA.
Ensure lighter colors like #8CD9E9 and #BFEDF5 are paired with sufficiently dark text.
Avoid using #5AA4B8 as text on #2C6B7C due to insufficient contrast; maintain stronger value differences.
Always test text and interactive element colors for contrast compliance, especially for smaller font sizes.

Recommended combinations

Deep Lagoon

Craft a sophisticated, deep-sea gradient or define distinct, layered sections with increasing lightness.

#0F4C5C · #2C6B7C · #5AA4B8

Clear Water

Use the lightest for backgrounds, the mid-aqua for sub-elements, and the deeper blue for strong headings or calls-to-action.

#BFEDF5 · #8CD9E9 · #2C6B7C

Crystal Accents

Apply the mid-blue as a base, with the lightest for vibrant highlights, and the darkest for impactful, grounding details.

#5AA4B8 · #8CD9E9 · #0F4C5C

CSS variables

:root {
  --glacier-lagoon-crystal-1: #0F4C5C;
  --glacier-lagoon-crystal-2: #2C6B7C;
  --glacier-lagoon-crystal-3: #5AA4B8;
  --glacier-lagoon-crystal-4: #8CD9E9;
  --glacier-lagoon-crystal-5: #BFEDF5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "glacier-lagoon-crystal": {
        1: "#0F4C5C",
        2: "#2C6B7C",
        3: "#5AA4B8",
        4: "#8CD9E9",
        5: "#BFEDF5",
      }
    }
  }
}

Hex values

Color 1#0F4C5C

Color 2#2C6B7C

Color 3#5AA4B8

Color 4#8CD9E9

Color 5#BFEDF5

Accessibility

Contrast checker

1.6:1Fail

3.4:1AA18

6:1AA

7.5:1AAA

1.6:1Fail

2.1:1Fail

3.8:1AA18

4.8:1AA

3.4:1AA18

2.1:1Fail

1.8:1Fail

2.2:1Fail

6:1AA

3.8:1AA18

1.8:1Fail

1.3:1Fail

7.5:1AAA

4.8:1AA

2.2:1Fail

1.3:1Fail

Similar palettes

More like Glacier Lagoon Crystal

View all cool

Frosty Glacier Lagoon

Arctic Explorer's Dream

Arctic Frost Jewel

Arctic Frostbite

Arctic Glacier Lagoon

Arctic Glacier Melt