Palette

Arctic Sapphire Glimmer

A tranquil blend of icy blues and deep sapphire, reflecting the crisp, clear light of an arctic morning.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ADD8E6#87CEEB#4682B4#191970#00BFFF

Palette guide

How to use Arctic Sapphire Glimmer

Overview

The Arctic Sapphire Glimmer palette presents a captivating range of blues, from ethereal light tones to profound, deep sapphires, echoing the crisp, clear light of an arctic morning. It begins with the gentle sky blue of #ADD8E6, moving through the classic #87CEEB, to the robust steel blue #4682B4. The depth is anchored by the almost black #191970, while a striking #00BFFF adds a vibrant, icy accent. This palette is exceptionally versatile for designers and developers seeking to convey professionalism, trust, and a touch of serene sophistication. Its strong contrast capabilities make it suitable for a wide array of digital and print applications.

Best used for

Corporate branding and websites
Tech and software interfaces
Luxury product packaging
Environmental non-profit materials
Educational platforms
Financial services design

Suggested color roles

primary

The deep #191970 serves as a powerful primary color for branding, main navigation, or dominant text elements.

secondary

Utilize the strong #4682B4 for subheadings, active states, or secondary calls-to-action, providing excellent readability.

accent

The vibrant #00BFFF is perfect for calls-to-action, highlights, or interactive elements that need to pop with an icy brilliance.

background

The light #ADD8E6 or #87CEEB can be used for clean, expansive backgrounds, offering a calm and open feel.

text

Primary text can be #191970 on light backgrounds. For dark backgrounds, a crisp white or a very light blue like #ADD8E6 ensures readability.

Accessibility notes

Ensure high contrast between #191970 text and light backgrounds like #ADD8E6 or #87CEEB for WCAG compliance.
The vibrant #00BFFF should have sufficient contrast when used for text against #191970 or #4682B4 backgrounds.
Avoid using #ADD8E6 as text on #87CEEB, as their proximity in lightness might cause readability issues.
Provide clear focus states for interactive elements, especially those using the lighter blues.

Recommended combinations

Deep Ocean

Excellent for professional interfaces, using deep blue for structure and light blue for content areas.

#191970 · #4682B4 · #ADD8E6

Icy Sparkle

Ideal for highlighting key features or calls-to-action, with the vibrant blue contrasting against the deep base.

#00BFFF · #87CEEB · #191970

Sapphire Gradient

Perfect for backgrounds, hero images, or abstract graphics that need a smooth, cool blue transition.

#4682B4 · #87CEEB · #ADD8E6

CSS variables

:root {
  --arctic-sapphire-glimmer-1: #ADD8E6;
  --arctic-sapphire-glimmer-2: #87CEEB;
  --arctic-sapphire-glimmer-3: #4682B4;
  --arctic-sapphire-glimmer-4: #191970;
  --arctic-sapphire-glimmer-5: #00BFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-sapphire-glimmer": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#4682B4",
        4: "#191970",
        5: "#00BFFF",
      }
    }
  }
}

Hex values

Color 1#ADD8E6

Color 2#87CEEB

Color 3#4682B4

Color 4#191970

Color 5#00BFFF

Accessibility

Contrast checker

1.1:1Fail

2.7:1Fail

9.7:1AAA

1.4:1Fail

1.1:1Fail

2.4:1Fail

8.5:1AAA

1.2:1Fail

2.7:1Fail

2.4:1Fail

3.6:1AA18

1.9:1Fail

9.7:1AAA

8.5:1AAA

3.6:1AA18

7:1AA

1.4:1Fail

1.2:1Fail

1.9:1Fail

7:1AA

Similar palettes

More like Arctic Sapphire Glimmer

View all cool

Arctic Frostbite

Glacial Lagoon Calm

Glacier Lake Serenity

Winter Ice Bloom

Aqua Marine Vista

Arctic Frost Jewel