Back to palettes

Palette

Glacial Blue Serenity

Pristine and calming shades of a glacial lake, reflecting a clear winter sky, utterly peaceful.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Glacial Blue Serenity 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 Blue Serenity.

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

Data visualization

#F0F8FF#ADD8E6#87CEEB#4682B4#20B2AA

Palette guide

How to use Glacial Blue Serenity

Overview

The Glacial Blue Serenity palette offers a pristine and calming collection of cool tones, perfect for designs aiming to evoke tranquility and clarity. Featuring airy light blue (#F0F8FF), serene sky blue (#ADD8E6), vivid cerulean (#87CEEB), deep steel blue (#4682B4), and a refreshing teal accent (#20B2AA), this palette guides users through a peaceful visual experience. Designers can leverage its harmonious progression from light to dark to create depth, while developers will appreciate the distinct shades for differentiating UI elements without overwhelming the user. It's ideal for projects that require a clean, sophisticated, and soothing aesthetic, reminiscent of clear winter skies and calm waters.

Best used for

  • Spa and wellness branding
  • Modern tech interfaces
  • Environmental awareness campaigns
  • Winter-themed digital art
  • Corporate communication materials
  • Minimalist web design

Suggested color roles

primary

Use #4682B4 as a dominant color for main headings, primary buttons, or core brand elements to establish a strong, trustworthy presence.

secondary

Employ #87CEEB for subheadings, secondary navigation, or larger graphic areas where a lighter, supportive blue is needed.

accent

Apply #20B2AA for call-to-action buttons, interactive highlights, or small icon details to add a refreshing pop and guide user attention.

background

Utilize #F0F8FF for main backgrounds, providing an airy, clean, and spacious canvas that enhances readability and a sense of calm.

text

For body text, use a dark charcoal or black to ensure maximum legibility against the lighter blues, reserving lighter palette colors for headings or accents.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter blues like #ADD8E6 for text.
  • Use #4682B4 or #20B2AA for text on #F0F8FF background to meet WCAG AA standards.
  • Avoid placing #ADD8E6 directly on #F0F8FF for critical information due to low contrast.
  • Verify that interactive elements colored with #20B2AA have adequate contrast against their surrounding background.

Recommended combinations

Deep Tranquility

Ideal for a clean layout with a prominent main color and a vibrant call-to-action.

#F0F8FF · #4682B4 · #20B2AA

Sky & Water

Excellent for gradients or layered elements, reflecting natural water and sky tones.

#87CEEB · #ADD8E6 · #4682B4

Fresh Accents

Perfect for a light theme where the teal acts as a subtle, invigorating highlight.

#F0F8FF · #ADD8E6 · #20B2AA

CSS variables

:root {
  --glacial-blue-serenity-1: #F0F8FF;
  --glacial-blue-serenity-2: #ADD8E6;
  --glacial-blue-serenity-3: #87CEEB;
  --glacial-blue-serenity-4: #4682B4;
  --glacial-blue-serenity-5: #20B2AA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "glacial-blue-serenity": {
        1: "#F0F8FF",
        2: "#ADD8E6",
        3: "#87CEEB",
        4: "#4682B4",
        5: "#20B2AA",
      }
    }
  }
}

Related searches

calm blue color schemewinter web design paletteserene brand colorscool toned UI kitblue green aesthetic

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#ADD8E6
·
Color 3#87CEEB
·
Color 4#4682B4
·
Color 5#20B2AA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.6:1Fail
3.8:1AA18
2.4:1Fail
2
1.4:1Fail
1.1:1Fail
2.7:1Fail
1.7:1Fail
3
1.6:1Fail
1.1:1Fail
2.4:1Fail
1.5:1Fail
4
3.8:1AA18
2.7:1Fail
2.4:1Fail
1.6:1Fail
5
2.4:1Fail
1.7:1Fail
1.5:1Fail
1.6:1Fail

Similar palettes

More like Glacial Blue Serenity

View all cool
Icy Reflective Surface
Alpine Frost Serenity
Arctic Lake Ice
Arctic Serenity
Fjord Ice Escape
Frosted Willow Pond