Palette

Glacial Ice Grotto

The ethereal glow of light reflecting through ancient, deep blue glacial ice caves.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Glacial Ice Grotto 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 Glacial Ice Grotto.

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

Data visualization

#002244#1E90FF#87CEFA#ADD8E6#DDEEFF

Palette guide

How to use Glacial Ice Grotto

Overview

The Glacial Ice Grotto palette evokes the serene, deep blues of ancient ice caves, offering a sophisticated and calming aesthetic. Ideal for projects requiring a sense of depth and tranquility, this collection moves from the profound darkness of #002244 to the ethereal lightness of #DDEEFF. Designers can leverage the vibrant #1E90FF as a striking primary or accent, complemented by the softer #87CEFA and #ADD8E6. It's a versatile cool-toned palette perfect for creating immersive digital experiences or tranquil branding. Developers will find these distinct shades easy to implement for UI states, backgrounds, and interactive elements, ensuring visual harmony across diverse applications.

Best used for

Nature-themed websites and applications
Spa and wellness branding
Educational content on arctic environments
Winter sports apparel design
High-tech product interfaces
Serene interior design concepts

Suggested color roles

primary

#002244 - Use this deep, dark blue for foundational elements like headers, footers, or main navigation. It provides a strong, stable anchor.

secondary

#1E90FF - A vibrant, energetic blue perfect for calls-to-action, active states, or prominent graphical elements that need to stand out against lighter tones.

accent

#87CEFA - This soft sky blue works well for subtle highlights, interactive elements' hover states, or small decorative details, adding a touch of lightness.

background

#DDEEFF - An almost-white, very light blue, ideal for clean main content areas, providing a fresh and airy canvas that allows darker colors to pop.

text

#002244 - Use the darkest blue for primary body text on light backgrounds like #DDEEFF for excellent readability, or a crisp white for text on #002244.

Accessibility notes

Ensure sufficient contrast when pairing #002244 text on #DDEEFF backgrounds for optimal readability (WCAG AA compliant).
Avoid using lighter blues like #87CEFA or #ADD8E6 for small text against #DDEEFF, as contrast may be insufficient.
Use #1E90FF for interactive elements, but confirm it has enough contrast against its immediate background.
Consider a very dark grey or black for text on #ADD8E6 if #002244 feels too stark.

Recommended combinations

Deep Contrast

Excellent for high-contrast text and background, primary UI elements, or distinct sections.

#002244 · #DDEEFF · #1E90FF

Vibrant Highlight

Use the vibrant blue for CTAs or key information against a light background, anchored by the deep blue.

#1E90FF · #DDEEFF · #002244

Icy Transition

Create subtle gradients or layered elements, conveying a smooth, frosty aesthetic.

#87CEFA · #ADD8E6 · #DDEEFF

CSS variables

:root {
  --glacial-ice-grotto-1: #002244;
  --glacial-ice-grotto-2: #1E90FF;
  --glacial-ice-grotto-3: #87CEFA;
  --glacial-ice-grotto-4: #ADD8E6;
  --glacial-ice-grotto-5: #DDEEFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "glacial-ice-grotto": {
        1: "#002244",
        2: "#1E90FF",
        3: "#87CEFA",
        4: "#ADD8E6",
        5: "#DDEEFF",
      }
    }
  }
}

Hex values

Color 1#002244

Color 2#1E90FF

Color 3#87CEFA

Color 4#ADD8E6

Color 5#DDEEFF

Accessibility

Contrast checker

4.9:1AA

9.3:1AAA

10.5:1AAA

13.5:1AAA

4.9:1AA

1.9:1Fail

2.1:1Fail

2.7:1Fail

9.3:1AAA

1.9:1Fail

1.1:1Fail

1.5:1Fail

10.5:1AAA

2.1:1Fail

1.1:1Fail

1.3:1Fail

13.5:1AAA

2.7:1Fail

1.5:1Fail

1.3:1Fail

Similar palettes

More like Glacial Ice Grotto