Palette

Arctic Sky Drift

A palette mimicking the ethereal, icy blues and whites of a vast arctic sky, serene and stark.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arctic Sky Drift 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 Drift.

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

Data visualization

#E8F3F7#C9DFEA#A8C3DC#86A8CC#618CBF

Palette guide

How to use Arctic Sky Drift

Overview

The Arctic Sky Drift palette mimics the ethereal, icy blues and whites of a vast arctic sky, offering a serene and stark visual experience. It features a range of light to mid-tone blues, starting with the almost-white #E8F3F7 and moving through #C9DFEA, #A8C3DC, and #86A8CC, culminating in the more grounded #618CBF. This predominantly monochromatic cool palette is perfect for designers and developers seeking to create minimalist, clean, and calming interfaces or branding. It excels at conveying spaciousness, purity, and a sophisticated understated elegance, ideal for projects where a gentle, airy feel is paramount.

Best used for

Minimalist web and app interfaces
Spa and wellness digital presence
Luxury lifestyle branding
Cloud storage service dashboards
Winter-themed event invitations
Environmental non-profit materials

Suggested color roles

primary

The deepest tone, #618CBF, serves as a subtle primary for foundational elements, headings, or important calls-to-action, providing necessary anchor.

secondary

Use #86A8CC for secondary information, subheadings, or inactive states, maintaining a harmonious flow.

accent

The lightest shades, #E8F3F7 or #C9DFEA, can act as clean accents for interactive elements or delicate highlights, maintaining luminosity.

background

Employ #E8F3F7 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. #618CBF can be used for secondary text against the lightest backgrounds.

Accessibility notes

Strong contrast is crucial: use black or very dark grey for all text against any of these light blue backgrounds to meet WCAG AA standards.
Avoid using lighter blues like #C9DFEA for text on #E8F3F7 due to insufficient contrast.
Ensure interactive elements have clear visual indicators for focus and hover states beyond color alone, given the subtle differences.
This palette is challenging for accessibility; consider providing an alternative, higher-contrast version for critical content.

Recommended combinations

Sky Layers

Excellent for subtle, layered backgrounds, soft gradients, or UI cards that require an airy, minimalist feel.

#E8F3F7 · #C9DFEA · #A8C3DC

Horizon Depth

Ideal for clean layouts, using the deepest blue for titles/buttons and the lightest for expansive content areas.

#618CBF · #86A8CC · #E8F3F7

Gentle Flow

Use for infographics or data visualization where subtle shifts in cool tones are desired to represent different categories, with clear labels.

#A8C3DC · #C9DFEA · #618CBF

CSS variables

:root {
  --arctic-sky-drift-1: #E8F3F7;
  --arctic-sky-drift-2: #C9DFEA;
  --arctic-sky-drift-3: #A8C3DC;
  --arctic-sky-drift-4: #86A8CC;
  --arctic-sky-drift-5: #618CBF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-sky-drift": {
        1: "#E8F3F7",
        2: "#C9DFEA",
        3: "#A8C3DC",
        4: "#86A8CC",
        5: "#618CBF",
      }
    }
  }
}

Hex values

Color 1#E8F3F7

Color 2#C9DFEA

Color 3#A8C3DC

Color 4#86A8CC

Color 5#618CBF

Accessibility

Contrast checker

1.2:1Fail

1.6:1Fail

2.2:1Fail

3.1:1AA18

1.2:1Fail

1.3:1Fail

1.8:1Fail

2.5:1Fail

1.6:1Fail

1.3:1Fail

1.4:1Fail

1.9:1Fail

2.2:1Fail

1.8:1Fail

1.4:1Fail

3.1:1AA18

2.5:1Fail

1.9:1Fail

1.4:1Fail

Similar palettes

More like Arctic Sky Drift

Arctic Sky Drift

See it in context.

Ready when you are.

Built with Arctic Sky Drift.

How to use Arctic Sky Drift

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sky Layers

Horizon Depth

Gentle Flow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Arctic Sky Drift