Back to palettes

Palette

Arctic Fox

Pristine whites and soft blues mimic the pristine fur of an arctic fox in a snowy landscape.

coolminimal5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F8FF#E0FFFF#ADD8E6#B0E0E6#F5FFFA

Palette guide

How to use Arctic Fox

Overview

The Arctic Fox palette captures the pristine beauty of an arctic fox in a snowy landscape, blending crisp whites and soft blues. This cool, clean collection, featuring hues like the airy #F0F8FF and the gentle #B0E0E6, is perfect for designers and developers aiming to create fresh, minimalist, and tranquil digital experiences. The subtle variations, including the prominent #ADD8E6, provide ample opportunity for elegant visual hierarchy without overwhelming the user. It's an ideal choice for projects requiring a sense of purity, calm, and understated sophistication, from web interfaces to brand identities.

Best used for

  • Clean and minimalist web design
  • Spa and wellness branding
  • Winter event promotions
  • Medical or healthcare interfaces
  • Baby product design
  • Educational platforms with a calm aesthetic

Suggested color roles

primary

#ADD8E6 (A soft, clear blue, perfect for main navigation, prominent buttons, or hero section accents, providing a fresh focal point.)

secondary

#B0E0E6 (A slightly muted blue, ideal for subheadings, secondary interactive elements, or subtle graphical patterns, offering gentle contrast.)

accent

#E0FFFF (A very light, almost translucent blue, excellent for delicate highlights, hover states, or subtle UI flourishes that need to glimmer.)

background

#F0F8FF (A pristine, almost-white background that ensures maximum readability and a spacious, airy feel for any design.)

text

#ADD8E6 (While a light blue, it can be used for large headings on a white background, but a darker charcoal or black is recommended for body text for optimal readability.)

Accessibility notes

  • For body text, use a dark grey or black as the palette lacks a sufficiently dark option for contrast on #F0F8FF.
  • Ensure #ADD8E6 or #B0E0E6 used for interactive elements have a clear visual change on focus/hover for accessibility.
  • Avoid using lighter colors like #E0FFFF or #F5FFFA for text, as they will not meet contrast requirements on light backgrounds.
  • Always test text and background color combinations against WCAG guidelines for optimal user experience.

Recommended combinations

Pristine Clarity

Excellent for clean page backgrounds with clear blue headings and subheadings.

#F0F8FF · #ADD8E6 · #B0E0E6

Soft Layers

Ideal for creating subtle depth in UI cards, overlays, or delicate background patterns.

#E0FFFF · #F5FFFA · #ADD8E6

Highlight Focus

Use the main blue for key features, the lightest for backgrounds, and the accent for hover states.

#ADD8E6 · #F0F8FF · #E0FFFF

CSS variables

:root {
  --arctic-fox-1: #F0F8FF;
  --arctic-fox-2: #E0FFFF;
  --arctic-fox-3: #ADD8E6;
  --arctic-fox-4: #B0E0E6;
  --arctic-fox-5: #F5FFFA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-fox": {
        1: "#F0F8FF",
        2: "#E0FFFF",
        3: "#ADD8E6",
        4: "#B0E0E6",
        5: "#F5FFFA",
      }
    }
  }
}

Related searches

clean white blue paletteminimalist ice colorsarctic fur color schemeserene cool UI designfresh winter branding

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#E0FFFF
·
Color 3#ADD8E6
·
Color 4#B0E0E6
·
Color 5#F5FFFA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.4:1Fail
1.3:1Fail
1.1:1Fail
2
1:1Fail
1.4:1Fail
1.4:1Fail
1:1Fail
3
1.4:1Fail
1.4:1Fail
1.1:1Fail
1.5:1Fail
4
1.3:1Fail
1.4:1Fail
1.1:1Fail
1.4:1Fail
5
1.1:1Fail
1:1Fail
1.5:1Fail
1.4:1Fail

Similar palettes

More like Arctic Fox

View all cool