Palette

Arctic Shoreline Chill

Icy blues and misty grays that evoke a frosty arctic coastline.

coolminimal5 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

#36454F#708090#A9BCCF#D6E4EF#EAF2F7

Palette guide

How to use Arctic Shoreline Chill

Overview

The Arctic Shoreline Chill palette offers a sophisticated range of icy blues and misty grays that evoke a frosty arctic coastline. It features a deep, grounding charcoal blue #36454F, balanced mid-tones like #708090 and #A9BCCF, and soft, ethereal light blues such as #D6E4EF and #EAF2F7. This palette is exceptionally versatile for designers and developers seeking a clean, modern, and understated aesthetic. It’s perfect for creating professional interfaces, calm branding, or any project that benefits from a cool, serene, and highly readable color scheme, allowing content to shine with clarity and elegance.

Best used for

Professional corporate websites
Cloud computing dashboards
Sustainable fashion brands
Architectural design portfolios
Clean, minimalist app UI
Environmental agency reports

Suggested color roles

primary

The deep #36454F serves as a strong primary for foundational elements, headings, or important calls-to-action, ensuring gravitas.

secondary

Use #708090 for subheadings, secondary information, or to provide subtle visual breaks in content.

accent

The lightest shade, #EAF2F7, can act as a clean accent for interactive elements or delicate highlights, maintaining luminosity.

background

Employ #EAF2F7 or #D6E4EF as a pristine, neutral background, providing a clean canvas and enhancing readability.

text

For optimal readability, use #36454F or black for primary text on light backgrounds. For dark backgrounds, #EAF2F7 is ideal.

Accessibility notes

Ensure strong contrast between the darker shades (#36454F, #708090) and the lighter shades (#D6E4EF, #EAF2F7) for all text.
Avoid using #A9BCCF for text against #D6E4EF 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 a slightly darker grey for body text than #708090 to ensure maximum legibility across all screen types.

Recommended combinations

Coastal Fog

Excellent for crisp layouts, using the dark blue-grey for headings/buttons and the light for content areas.

#36454F · #708090 · #EAF2F7

Misty Layers

Ideal for subtle background textures, layered cards, or soft gradients that need to feel clean and airy.

#A9BCCF · #D6E4EF · #EAF2F7

Chill Contrast

Use for professional reports or dashboards, where clarity and a calm, authoritative tone are important.

#708090 · #36454F · #D6E4EF

CSS variables

:root {
  --arctic-shoreline-chill-2-1: #36454F;
  --arctic-shoreline-chill-2-2: #708090;
  --arctic-shoreline-chill-2-3: #A9BCCF;
  --arctic-shoreline-chill-2-4: #D6E4EF;
  --arctic-shoreline-chill-2-5: #EAF2F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-shoreline-chill-2": {
        1: "#36454F",
        2: "#708090",
        3: "#A9BCCF",
        4: "#D6E4EF",
        5: "#EAF2F7",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#708090

Color 3#A9BCCF

Color 4#D6E4EF

Color 5#EAF2F7

Accessibility

Contrast checker

2.4:1Fail

5.1:1AA

7.6:1AAA

8.7:1AAA

2.4:1Fail

2.1:1Fail

3.1:1AA18

3.6:1AA18

5.1:1AA

2.1:1Fail

1.5:1Fail

1.7:1Fail