Palette

Arctic Shoreline Frost

Reflects the icy blues and crisp whites of an arctic coastline, where frozen water meets glacial landscapes.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arctic Shoreline Frost 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 Shoreline Frost.

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

Data visualization

#5F9EA0#87CEEB#B0E0E6#E0FFFF#F0F8FF

Palette guide

How to use Arctic Shoreline Frost

Overview

The Arctic Shoreline Frost palette reflects the icy blues and crisp whites of an arctic coastline, where frozen water meets glacial landscapes. It features a grounding teal-grey #5F9EA0, balanced by the classic sky blue #87CEEB and light #B0E0E6. The palette brightens significantly with the ethereal #E0FFFF and the pure, almost-white #F0F8FF. 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
Clean, minimalist UI designs
Eco-friendly product branding
Winter-themed digital content
Cloud service platforms
Nature photography portfolios

Suggested color roles

primary

The deep teal-grey #5F9EA0 serves as a robust primary for headings, navigation, or important calls-to-action, providing necessary depth.

secondary

Use #87CEEB for secondary information, subheadings, or interactive elements, offering a clear yet gentle 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 #5F9EA0 or a dark charcoal for primary text on light backgrounds. For dark backgrounds, #F0F8FF works best.

Accessibility notes

Ensure strong contrast between #5F9EA0 text and light backgrounds like #E0FFFF or #F0F8FF to meet WCAG AA standards.
Avoid using #B0E0E6 for text against #E0FFFF due to insufficient contrast for readability.
Verify that all interactive elements have clear visual indicators for focus and hover states beyond color alone.
Consider using a slightly darker grey for body text than #5F9EA0 to ensure maximum legibility across diverse viewing conditions.

Recommended combinations

Frosted Coast

Excellent for clean layouts, using the teal-grey for headings/buttons and the lightest for content areas.

#5F9EA0 · #87CEEB · #F0F8FF

Icy Gradient

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

#87CEEB · #B0E0E6 · #E0FFFF

Shoreline Accent

Use for branding elements or calls-to-action, leveraging the depth of teal against the lightness of frost.

#5F9EA0 · #E0FFFF · #B0E0E6

CSS variables

:root {
  --arctic-shoreline-frost-1: #5F9EA0;
  --arctic-shoreline-frost-2: #87CEEB;
  --arctic-shoreline-frost-3: #B0E0E6;
  --arctic-shoreline-frost-4: #E0FFFF;
  --arctic-shoreline-frost-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-shoreline-frost": {
        1: "#5F9EA0",
        2: "#87CEEB",
        3: "#B0E0E6",
        4: "#E0FFFF",
        5: "#F0F8FF",
      }
    }
  }
}

Hex values

Color 1#5F9EA0

Color 2#87CEEB

Color 3#B0E0E6

Color 4#E0FFFF

Color 5#F0F8FF

Accessibility

Contrast checker

1.8:1Fail

2.1:1Fail

2.9:1Fail

2.8:1Fail

1.8:1Fail

1.2:1Fail

1.7:1Fail

1.6:1Fail

2.1:1Fail

1.2:1Fail

1.4:1Fail

1.3:1Fail

2.9:1Fail

1.7:1Fail

1.4:1Fail

1:1Fail

2.8:1Fail

1.6:1Fail

1.3:1Fail

1:1Fail

Similar palettes

More like Arctic Shoreline Frost

View all cool

Arctic Shoreline Chill