Palette

Arctic Shoreline Chill

A frigid yet beautiful palette reflecting the stark, icy blues and greys of a remote arctic coastline.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F1E2A#2F4D5F#5D879F#AEC0CE#E0EBF3

Palette guide

How to use Arctic Shoreline Chill

Overview

The Arctic Shoreline Chill palette reflects the stark, icy blues and greys of a remote arctic coastline, offering a frigid yet beautiful spectrum. It features a profound, almost black #0F1E2A, a deep #2F4D5F, and a balancing mid-tone #5D879F. Lighter, ethereal shades like #AEC0CE and the almost-white #E0EBF3 complete the collection. This palette is highly effective for designers and developers aiming to create sophisticated, calm, and professional experiences. Its strong contrast capabilities ensure excellent readability and adaptability, making it suitable for high-end branding, elegant user interfaces, and evocative digital storytelling.

Best used for

Luxury brand websites and apps
High-tech and enterprise software UI
Environmental and scientific reports
Winter sports and outdoor gear branding
Minimalist photography portfolios
Corporate annual reports

Suggested color roles

primary

The deep #0F1E2A serves as a powerful primary for foundational elements, navigation, and dominant text, providing gravitas.

secondary

Use #2F4D5F for subheadings, secondary calls-to-action, or important informational blocks, offering excellent readability.

accent

The lighter #5D879F can serve as a refreshing accent for interactive elements or highlights against darker backgrounds.

background

Employ #E0EBF3 as a pristine, neutral background, creating an open, airy canvas and enhancing readability.

text

For optimal readability, use #0F1E2A or black for primary text on light backgrounds. For dark backgrounds, #E0EBF3 works best.

Accessibility notes

Ensure strong contrast between the darkest shades (#0F1E2A, #2F4D5F) and the lightest (#E0EBF3) for all text and interactive elements.
Avoid using #AEC0CE for text against #E0EBF3 due to insufficient contrast for WCAG AA compliance.
Verify that all interactive elements have clear visual indicators for focus and hover states beyond color alone.
Consider using #0F1E2A or black for all critical information to ensure maximum legibility across diverse viewing conditions.

Recommended combinations

Coastal Depths

Excellent for dramatic hero sections, with deep blues for background and light for prominent text/elements.

#0F1E2A · #2F4D5F · #E0EBF3

Icy Gradient

Ideal for backgrounds, layered UI elements, or abstract graphics that require a smooth, cool transition.

#5D879F · #AEC0CE · #E0EBF3

Shoreline Contrast

Use for navigation elements or data visualization, creating clear distinctions within a cool, professional aesthetic.

#2F4D5F · #5D879F · #AEC0CE

CSS variables

:root {
  --arctic-shoreline-chill-1: #0F1E2A;
  --arctic-shoreline-chill-2: #2F4D5F;
  --arctic-shoreline-chill-3: #5D879F;
  --arctic-shoreline-chill-4: #AEC0CE;
  --arctic-shoreline-chill-5: #E0EBF3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-shoreline-chill": {
        1: "#0F1E2A",
        2: "#2F4D5F",
        3: "#5D879F",
        4: "#AEC0CE",
        5: "#E0EBF3",
      }
    }
  }
}

Hex values

Color 1#0F1E2A

Color 2#2F4D5F

Color 3#5D879F

Color 4#AEC0CE

Color 5#E0EBF3

Accessibility

Contrast checker

1.9:1Fail

4.4:1AA18

9.1:1AAA

14:1AAA

1.9:1Fail

2.3:1Fail

4.8:1AA

7.4:1AAA

4.4:1AA18

2.3:1Fail

2.1:1Fail

3.2:1AA18

9.1:1AAA

4.8:1AA

2.1:1Fail

1.5:1Fail

14:1AAA

7.4:1AAA

3.2:1AA18

1.5:1Fail

Similar palettes

More like Arctic Shoreline Chill

View all cool

Arctic Shoreline Frost