Palette

Arctic Fox Shadow

Icy blues, crisp whites, and cool greys capture the pristine, stark beauty of an arctic landscape with subtle shadows.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arctic Fox Shadow 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 Fox Shadow.

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

Data visualization

#E6F3F9#C8DCEF#AECBE0#809BB0#5B7A8C

Palette guide

How to use Arctic Fox Shadow

Overview

The Arctic Fox Shadow palette captures the pristine, stark beauty of an arctic landscape with subtle shadows, blending icy blues, crisp whites, and cool grays. This minimalist collection features the very light, almost white blue of #E6F3F9 (Light Sky Blue) and the slightly deeper, cool blue of #C8DCEF (Light Steel Blue). Further along, we find the clear, muted blue of #AECBE0 (Light Blue) and the more pronounced steel blue of #809BB0 (Slate Gray). The palette culminates in the richer, deeper blue-gray of #5B7A8C (Dark Slate Gray), providing a strong, grounding anchor. Designers can leverage these hues for projects needing a minimalist, elegant, and subtly natural aesthetic, while developers will find them ideal for clean, professional, and intuitive interfaces.

Best used for

Minimalist website and app designs
Corporate and professional branding
Technical documentation or software interfaces
Luxury product showcases
Photography portfolios with a stark, modern aesthetic
Architectural or interior design visualization

Suggested color roles

primary

Use #E6F3F9 (Light Sky Blue) as the dominant background color to create an open, clean, and expansive feel.

secondary

#C8DCEF (Light Steel Blue) or #AECBE0 (Light Blue) can be used for content cards, sidebars, or subtle dividers, adding gentle visual hierarchy.

accent

#5B7A8C (Dark Slate Gray) is an excellent choice for primary text, important links, or calls-to-action, offering strong contrast and clarity.

background

#E6F3F9 provides a serene, cool base, allowing for easy readability with darker text.

text

For text on light backgrounds, use #5B7A8C or black. For text on dark backgrounds like #5B7A8C, use white.

Accessibility notes

Ensure #5B7A8C or black text has sufficient contrast against light backgrounds like #E6F3F9, #C8DCEF, and #AECBE0.
Avoid using adjacent light blues/grays (e.g., #E6F3F9 and #C8DCEF) for small text or critical UI elements due to very low contrast.
Ensure interactive elements have clear visual states (hover, focus) that provide adequate contrast.
Always verify contrast ratios for all text and interactive elements using accessibility tools.

Recommended combinations

Icy Shadows

A strong, professional combination for main content and primary actions.

#E6F3F9 · #AECBE0 · #5B7A8C

Winter Light

Creates a subtle layered effect, suitable for informational panels or secondary elements.

#C8DCEF · #809BB0 · #E6F3F9

Deep Chill

Provides depth and a modern aesthetic, good for headers or bold typography.

#5B7A8C · #E6F3F9 · #AECBE0

CSS variables

:root {
  --arctic-fox-shadow-1: #E6F3F9;
  --arctic-fox-shadow-2: #C8DCEF;
  --arctic-fox-shadow-3: #AECBE0;
  --arctic-fox-shadow-4: #809BB0;
  --arctic-fox-shadow-5: #5B7A8C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-fox-shadow": {
        1: "#E6F3F9",
        2: "#C8DCEF",
        3: "#AECBE0",
        4: "#809BB0",
        5: "#5B7A8C",
      }
    }
  }
}

Hex values

Color 1#E6F3F9

Color 2#C8DCEF

Color 3#AECBE0

Color 4#809BB0

Color 5#5B7A8C

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

2.6:1Fail

4:1AA18

1.2:1Fail

2.1:1Fail

3.2:1AA18

1.5:1Fail

1.2:1Fail

1.7:1Fail

2.7:1Fail

2.6:1Fail

2.1:1Fail

1.7:1Fail

1.6:1Fail

4:1AA18

3.2:1AA18

2.7:1Fail

1.6:1Fail

Similar palettes

More like Arctic Fox Shadow

Arctic Fox Shadow

See it in context.

Ready when you are.

Built with Arctic Fox Shadow.

How to use Arctic Fox Shadow

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Icy Shadows

Winter Light

Deep Chill

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Arctic Fox Shadow