Palette

Arctic Sky Whisper

A delicate array of icy blues and whites, echoing the ethereal quietude 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 Arctic Sky Whisper 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 Arctic Sky Whisper.

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

Data visualization

#87CEEB#B0E0E6#ADD8E6#E0FFFF#F0F8FF

Palette guide

How to use Arctic Sky Whisper

Overview

The Arctic Sky Whisper palette offers a delicate array of icy blues and whites, echoing the ethereal quietude of an arctic sky. It features the classic #87CEEB (Sky Blue), the soft #B0E0E6 (Powder Blue), and the gentle #ADD8E6 (Light Blue). The palette brightens significantly with the ethereal #E0FFFF (Light Cyan) and the pure, almost-white #F0F8FF (Alice Blue). This collection is perfect for designers and developers aiming for a clean, calm, and refreshing aesthetic. Its natural progression from subtle depth to luminous lightness makes it ideal for creating serene interfaces, airy branding, or evocative content that conveys purity and openness.

Best used for

Spa and wellness websites
Minimalist UI designs
Baby product branding
Cloud service platforms
Winter-themed digital content
Nature photography portfolios

Suggested color roles

primary

The classic #87CEEB serves as the most prominent color, ideal for headings, navigation, or subtle calls-to-action, providing gentle focus.

secondary

Use #B0E0E6 for secondary information, subheadings, or interactive elements, offering a clear yet soft contrast.

accent

The luminous #E0FFFF or #F0F8FF can serve as brilliant accents for highlights, active states, or delicate graphic elements.

background

Employ #F0F8FF as a pristine, expansive background, creating an open, airy, and inviting canvas.

text

For optimal readability, use a dark charcoal or black for primary text on light backgrounds. #87CEEB can be used for secondary text against #F0F8FF.

Accessibility notes

Ensure strong contrast between text and background. Black or very dark grey is recommended for all text to meet WCAG AA standards.
Avoid using #B0E0E6 for text against #ADD8E6 or #E0FFFF due to insufficient contrast for readability.
Verify that all interactive elements have clear visual indicators for focus and hover states beyond color alone.
This palette is challenging for accessibility; consider providing an alternative, higher-contrast version for critical content.

Recommended combinations

Whisper Gradient

Excellent for backgrounds, hero images, or abstract graphics that require a smooth, cool, and light transition.

#87CEEB · #B0E0E6 · #E0FFFF

Sky Light

Ideal for soft, layered backgrounds or UI cards that require an airy, minimalist feel.

#F0F8FF · #E0FFFF · #ADD8E6

Clear Horizon

Use for branding elements or calls-to-action, leveraging the subtle depth of sky blue against the lightness of white.

#87CEEB · #ADD8E6 · #F0F8FF

CSS variables

:root {
  --arctic-sky-whisper-1: #87CEEB;
  --arctic-sky-whisper-2: #B0E0E6;
  --arctic-sky-whisper-3: #ADD8E6;
  --arctic-sky-whisper-4: #E0FFFF;
  --arctic-sky-whisper-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-sky-whisper": {
        1: "#87CEEB",
        2: "#B0E0E6",
        3: "#ADD8E6",
        4: "#E0FFFF",
        5: "#F0F8FF",
      }
    }
  }
}

Hex values

Color 1#87CEEB

Color 2#B0E0E6

Color 3#ADD8E6

Color 4#E0FFFF

Color 5#F0F8FF

Accessibility

Contrast checker

1.2:1Fail

1.1:1Fail

1.7:1Fail

1.6:1Fail

1.2:1Fail

1.1:1Fail

1.4:1Fail

1.3:1Fail

1.1:1Fail

1.4:1Fail

1.7:1Fail

1.4:1Fail

1:1Fail

1.6:1Fail

1.3:1Fail

1.4:1Fail

1:1Fail

Similar palettes

More like Arctic Sky Whisper

Arctic Sky Whisper

See it in context.

Ready when you are.

Built with Arctic Sky Whisper.

How to use Arctic Sky Whisper

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Whisper Gradient

Sky Light

Clear Horizon

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Arctic Sky Whisper