Back to palettes

Palette

Arctic Ice Shard

A cool and refreshing gradient of blues and whites, reminiscent of shimmering ice shards and vast glacial landscapes.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ADD8E6#87CEEB#6495ED#4682B4#E0FFFF

Palette guide

How to use Arctic Ice Shard

Overview

The Arctic Ice Shard palette offers a cool and refreshing gradient of blues and whites, reminiscent of shimmering ice shards and vast glacial landscapes. Ranging from the pristine #E0FFFF to the profound #4682B4, this collection offers designers and developers a cool, invigorating aesthetic perfect for conveying clarity, freshness, and a strong connection to nature. The prominent #ADD8E6 and #87CEEB provide a clear progression of icy 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, precision, and an understated, natural elegance.

Best used for

  • Environmental conservation websites
  • Hydration product branding
  • Outdoor adventure gear websites
  • Modern corporate identity
  • Data visualization dashboards
  • Winter tourism promotions

Suggested color roles

primary

#4682B4 (A robust steel blue, excellent for main headings, crucial call-to-action buttons, or key UI elements that command attention.)

secondary

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

accent

#6495ED (A medium cornflower blue, perfect for striking accents, hover states, or small but impactful elements that demand attention.)

background

#E0FFFF (A pristine, almost-white blue, serving as a luminous backdrop that enhances readability and provides an expansive, fresh feel.)

text

#4682B4 (The steel blue provides good contrast for body text on lighter backgrounds, ensuring comfortable reading.)

Accessibility notes

  • Ensure #4682B4 text on #E0FFFF background meets WCAG AA standards; for AAA, verify contrast, especially for smaller text.
  • Avoid using #ADD8E6 or #87CEEB for text on similar light backgrounds, as contrast will be insufficient.
  • The vibrant #6495ED should be tested for contrast when used with text or interactive elements on lighter blues.
  • Always check contrast ratios for critical information and interactive components to ensure optimal readability for all users.

Recommended combinations

Deep Refreshment

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

#E0FFFF · #4682B4 · #6495ED

Water Progression

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

#ADD8E6 · #87CEEB · #6495ED

Cornflower Accent

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

#6495ED · #E0FFFF · #ADD8E6

CSS variables

:root {
  --arctic-ice-shard-1: #ADD8E6;
  --arctic-ice-shard-2: #87CEEB;
  --arctic-ice-shard-3: #6495ED;
  --arctic-ice-shard-4: #4682B4;
  --arctic-ice-shard-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-ice-shard": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#6495ED",
        4: "#4682B4",
        5: "#E0FFFF",
      }
    }
  }
}

Related searches

glacier blue white paletterefreshing cool color schemewater themed UI designnatural blue brandingicy fresh web colors

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#87CEEB
·
Color 3#6495ED
·
Color 4#4682B4
·
Color 5#E0FFFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.9:1Fail
2.7:1Fail
1.4:1Fail
2
1.1:1Fail
1.7:1Fail
2.4:1Fail
1.7:1Fail
3
1.9:1Fail
1.7:1Fail
1.4:1Fail
2.8:1Fail
4
2.7:1Fail
2.4:1Fail
1.4:1Fail
3.9:1AA18
5
1.4:1Fail
1.7:1Fail
2.8:1Fail
3.9:1AA18

Similar palettes

More like Arctic Ice Shard

View all cool
Alpine Ice Glimmer
Arctic Frost Jewel
Arctic Glacier Edge
Arctic Glacier Lagoon
Arctic Glacier Melt
Arctic Glacier Melt