Back to palettes

Palette

Glacial Sky Hues

Pale to deep blues mirroring the expansive, tranquil beauty of an arctic sky.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Glacial Sky Hues 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 Sky Hues.

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

Data visualization

#ADD8E6#87CEEB#4682B4#B0C4DE#E0FFFF

Palette guide

How to use Glacial Sky Hues

Overview

The "Glacial Sky Hues" palette captures the expansive, tranquil beauty of an arctic sky, presenting a harmonious spectrum of cool blues and a pristine white. This collection is perfect for designs that aim to evoke calmness, clarity, and a sense of boundless space. From the ethereal #E0FFFF, representing clear skies or snow, to the deep, grounding #4682B4, it offers excellent depth. Mid-tones like #ADD8E6, #87CEEB, and #B0C4DE provide subtle variations, allowing for sophisticated gradients and layered designs. This palette is highly versatile for creating serene and professional visual experiences.

Best used for

  • Travel and tourism websites (arctic destinations)
  • Weather forecasting applications
  • Cloud computing or data storage branding
  • Home decor or textile design
  • Medical or scientific research presentations
  • Educational content about climate or geography

Suggested color roles

primary

#4682B4 - A strong, reliable blue, ideal for main headings, calls-to-action, or primary brand elements.

secondary

#87CEEB - A clear, medium blue for supporting content, sub-sections, or background panels.

accent

#ADD8E6 - A light, refreshing blue, perfect for subtle highlights, hover states, or decorative lines.

background

#E0FFFF - An almost pure white, providing a clean, bright, and expansive canvas.

text

#B0C4DE - A soft, cool gray-blue for secondary text or captions on light backgrounds. For primary text, use a dark charcoal or black for maximum contrast.

Accessibility notes

  • Ensure strong contrast for text on #E0FFFF; a dark text (e.g., black or #4682B4) is highly recommended.
  • Avoid using #ADD8E6 or #E0FFFF for text on any of the other colors, as contrast will be too low.
  • When using #4682B4 for text, verify WCAG AA compliance against its background.
  • Check contrast ratios for all interactive elements, especially if using lighter shades for their states.

Recommended combinations

Sky Layers

Classic web layout: #E0FFFF as background, #87CEEB for content blocks, and #4682B4 for prominent headings or buttons.

#E0FFFF · #87CEEB · #4682B4

Arctic Gradient

Create a smooth, ethereal gradient for backgrounds or large graphic elements, mimicking a changing sky.

#ADD8E6 · #B0C4DE · #87CEEB

Deep Horizon

#4682B4 for strong elements, #ADD8E6 for secondary information, and #E0FFFF for a crisp, clean base.

#4682B4 · #ADD8E6 · #E0FFFF

CSS variables

:root {
  --glacial-sky-hues-1: #ADD8E6;
  --glacial-sky-hues-2: #87CEEB;
  --glacial-sky-hues-3: #4682B4;
  --glacial-sky-hues-4: #B0C4DE;
  --glacial-sky-hues-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "glacial-sky-hues": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#4682B4",
        4: "#B0C4DE",
        5: "#E0FFFF",
      }
    }
  }
}

Related searches

arctic blue color paletteserene sky huescool blue white schemecalm winter colorsminimalist blue design

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#87CEEB
·
Color 3#4682B4
·
Color 4#B0C4DE
·
Color 5#E0FFFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
2.7:1Fail
1.2:1Fail
1.4:1Fail
2
1.1:1Fail
2.4:1Fail
1:1Fail
1.7:1Fail
3
2.7:1Fail
2.4:1Fail
2.3:1Fail
3.9:1AA18
4
1.2:1Fail
1:1Fail
2.3:1Fail
1.7:1Fail
5
1.4:1Fail
1.7:1Fail
3.9:1AA18
1.7:1Fail

Similar palettes

More like Glacial Sky Hues

View all cool