Palette

Arctic Glacier Spire

A crisp, serene palette capturing the towering majesty of a glacier under a pale sky.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A3CED9#DBEEF4#6D9EAE#EDF7F9#3A6675

Palette guide

How to use Arctic Glacier Spire

Overview

The Arctic Glacier Spire palette presents a crisp, serene collection capturing the towering majesty of a glacier under a pale sky. Ranging from the pristine #EDF7F9 to the deep #3A6675, this collection offers designers and developers a cool, minimalist aesthetic perfect for conveying strength, tranquility, and modern elegance. The prominent #A3CED9 and #6D9EAE 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 purity, calm, and an understated, natural sophistication.

Best used for

Environmental conservation websites
Architectural firms' portfolios
Minimalist tech interfaces
Outdoor adventure gear branding
Luxury real estate websites
Corporate presentations with a serene feel

Suggested color roles

primary

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

secondary

#6D9EAE (A versatile mid-tone blue-grey, ideal for subheadings, secondary interactive elements, or supporting graphical features, providing gentle contrast.)

accent

#A3CED9 (A lighter, cool blue-grey, perfect for delicate highlights, hover states, or subtle design accents that need to glimmer.)

background

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

text

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

Accessibility notes

Ensure #3A6675 text on #EDF7F9 background meets WCAG AAA standards for optimal readability.
Avoid using #A3CED9 or #DBEEF4 for text on similar light backgrounds, as contrast will be insufficient.
When using #6D9EAE for interactive elements, verify its contrast with surrounding colors for clear user feedback.
For critical information, always pair the darkest available color, #3A6675, with the lightest background, #EDF7F9.

Recommended combinations

Spire Contrast

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

#EDF7F9 · #3A6675 · #6D9EAE

Glacial Layers

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

#DBEEF4 · #A3CED9 · #6D9EAE

Clean Accent

Apply the darkest blue-grey for focal points, with lighter tones providing a serene context.

#3A6675 · #EDF7F9 · #DBEEF4

CSS variables

:root {
  --arctic-glacier-spire-1: #A3CED9;
  --arctic-glacier-spire-2: #DBEEF4;
  --arctic-glacier-spire-3: #6D9EAE;
  --arctic-glacier-spire-4: #EDF7F9;
  --arctic-glacier-spire-5: #3A6675;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-glacier-spire": {
        1: "#A3CED9",
        2: "#DBEEF4",
        3: "#6D9EAE",
        4: "#EDF7F9",
        5: "#3A6675",
      }
    }
  }
}

Hex values

Color 1#A3CED9

Color 2#DBEEF4

Color 3#6D9EAE

Color 4#EDF7F9

Color 5#3A6675

Accessibility

Contrast checker

1.4:1Fail

1.7:1Fail

1.6:1Fail

3.7:1AA18

1.4:1Fail

2.5:1Fail

1.1:1Fail

5.3:1AA

1.7:1Fail

2.5:1Fail

2.7:1Fail

2.1:1Fail