Palette

Arctic Ice Crystal

Sparkling shades of frozen water, reflecting the crisp beauty of arctic crystals.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A2E0E7#66BED4#3B8DA0#205A6F#0E364A

Palette guide

How to use Arctic Ice Crystal

Overview

The Arctic Ice Crystal palette offers sparkling shades of frozen water, reflecting the crisp beauty of arctic crystals. Ranging from the light #A2E0E7 to the deep #0E364A, this collection offers designers and developers a cool, refreshing aesthetic perfect for conveying clarity, precision, and modern elegance. The prominent #66BED4 and #3B8DA0 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 company interfaces
Environmental conservation websites
Luxury product branding (e.g., skincare)
Scientific research platforms
Winter sports equipment websites
Minimalist architectural renderings

Suggested color roles

primary

#3B8DA0 (A deep, muted teal-blue, excellent for main headings, crucial call-to-action buttons, or key UI elements that command attention.)

secondary

#66BED4 (A vibrant yet serene blue, ideal for subheadings, secondary interactive elements, or supporting graphical features, providing gentle contrast.)

accent

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

background

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

text

#0E364A (The darkest color in the palette, a very deep navy, providing excellent contrast for body text on lighter backgrounds, ensuring high readability.)

Accessibility notes

Ensure #0E364A text on #A2E0E7 background meets WCAG AAA standards for optimal readability.
Avoid using #66BED4 or #A2E0E7 for text on similar light backgrounds, as contrast will be insufficient.
When using #3B8DA0 for interactive elements, verify its contrast with surrounding colors for clear user feedback.
For critical information, always pair the darkest available color, #0E364A, with the lightest background, #A2E0E7.

Recommended combinations

Deep Crystal

Ideal for a clean background with strong primary text and a deep teal for headings or key actions.

#A2E0E7 · #0E364A · #3B8DA0

Icy Progression

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

#66BED4 · #3B8DA0 · #205A6F

Aqua Accent

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

#3B8DA0 · #A2E0E7 · #66BED4

CSS variables

:root {
  --arctic-ice-crystal-1: #A2E0E7;
  --arctic-ice-crystal-2: #66BED4;
  --arctic-ice-crystal-3: #3B8DA0;
  --arctic-ice-crystal-4: #205A6F;
  --arctic-ice-crystal-5: #0E364A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-ice-crystal": {
        1: "#A2E0E7",
        2: "#66BED4",
        3: "#3B8DA0",
        4: "#205A6F",
        5: "#0E364A",
      }
    }
  }
}

Hex values

Color 1#A2E0E7

Color 2#66BED4

Color 3#3B8DA0

Color 4#205A6F

Color 5#0E364A

Accessibility

Contrast checker

1.5:1Fail

2.6:1Fail

5.2:1AA

8.7:1AAA

1.5:1Fail

1.8:1Fail

3.6:1AA18

6:1AA

2.6:1Fail

1.8:1Fail

2:1Fail

3.3:1AA18