Back to palettes

Palette

Arctic Mirage

Icy blues and crisp whites depicting the shimmering, illusory landscape of an arctic mirage.

coolminimal5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E8F4F8#C2E1ED#97CBE0#62AECB#3891B3

Palette guide

How to use Arctic Mirage

Overview

The Arctic Mirage palette depicts the shimmering, illusory landscape of an arctic mirage with icy blues and crisp whites. Ranging from the light #E8F4F8 to the deep #3891B3, this collection offers designers and developers a cool, refreshing aesthetic perfect for conveying clarity, precision, and modern elegance. The prominent #C2E1ED and #97CBE0 provide a clear progression of cool tones, allowing for elegant visual hierarchies in UI design, impactful branding, and serene digital experiences. It's an excellent choice for projects that aim to evoke trust, professionalism, and an understated, natural sophistication.

Best used for

  • Modern tech interfaces
  • Environmental conservation websites
  • Luxury product branding (e.g., skincare)
  • Scientific research platforms
  • Winter sports equipment websites
  • Minimalist architectural renderings

Suggested color roles

primary

#3891B3 (A deep, vibrant sky blue, excellent for main headings, crucial call-to-action buttons, or key UI elements that command attention.)

secondary

#62AECB (A bright, yet serene blue, ideal for subheadings, secondary interactive elements, or supporting graphical features, providing refreshing contrast.)

accent

#97CBE0 (A lighter, airy blue, perfect for subtle highlights, hover effects, or delicate design accents that need to shimmer.)

background

#E8F4F8 (A very light, cool blue-white, serving as a pristine backdrop that enhances readability and provides an expansive, fresh feel.)

text

#3891B3 (The darkest color in the palette, providing excellent contrast for body text on lighter backgrounds, ensuring high readability.)

Accessibility notes

  • Ensure #3891B3 text on #E8F4F8 background meets WCAG AA standards; for AAA, verify contrast, especially for smaller text.
  • Avoid using #97CBE0 or #C2E1ED for text on similar light backgrounds, as contrast will be insufficient.
  • When using #62AECB for interactive elements, verify its contrast with surrounding colors for clear user feedback.
  • For critical information, always pair the darkest available color, #3891B3, with the lightest background, #E8F4F8.

Recommended combinations

Deep Mirage

Ideal for a clean background with strong primary text and a vibrant blue for headings or key actions.

#E8F4F8 · #3891B3 · #62AECB

Blue Progression

Use for creating visual depth in layered UI components, card backgrounds, or subtle gradients.

#C2E1ED · #97CBE0 · #62AECB

Icy Accent

Apply the deep blue for focal points, with lighter blues providing a fresh context.

#3891B3 · #E8F4F8 · #C2E1ED

CSS variables

:root {
  --arctic-mirage-1: #E8F4F8;
  --arctic-mirage-2: #C2E1ED;
  --arctic-mirage-3: #97CBE0;
  --arctic-mirage-4: #62AECB;
  --arctic-mirage-5: #3891B3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-mirage": {
        1: "#E8F4F8",
        2: "#C2E1ED",
        3: "#97CBE0",
        4: "#62AECB",
        5: "#3891B3",
      }
    }
  }
}

Related searches

arctic blue white paletteice mirage color schememinimalist cool brandingserene UI design blueclean winter web colors

Palette colors

Hex values

Color 1#E8F4F8
·
Color 2#C2E1ED
·
Color 3#97CBE0
·
Color 4#62AECB
·
Color 5#3891B3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.2:1Fail
3.2:1AA18
2
1.2:1Fail
1.3:1Fail
1.8:1Fail
2.6:1Fail
3
1.6:1Fail
1.3:1Fail
1.4:1Fail
2:1Fail
4
2.2:1Fail
1.8:1Fail
1.4:1Fail
1.4:1Fail
5
3.2:1AA18
2.6:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Arctic Mirage

View all cool
Arctic Glacier Chill
Arctic Sky Drift
Arctic Sunset Ice
Glacial Arctic Shard
Iceberg Crystal Edge
Arctic Fox