Palette

Iceberg Crystal Edge

Sharp, clear blues of varying intensity, like light playing on the edges of an iceberg.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Iceberg Crystal Edge 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 Iceberg Crystal Edge.

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

Data visualization

#F0F8FF#C4E2F1#9BD1E4#72BBD6#49A6C8

Palette guide

How to use Iceberg Crystal Edge

Overview

The Iceberg Crystal Edge palette captures the sharp, clear blues of varying intensity, reminiscent of light playing on the facets of an iceberg. Ranging from the pristine #F0F8FF (Alice Blue) and #C4E2F1 (Light Blue) to the more saturated #9BD1E4 (Light Sky Blue), #72BBD6 (lighter Steel Blue), and #49A6C8 (Cerulean), this palette offers a crisp, refreshing, and minimalist aesthetic. It's an excellent choice for designers and developers seeking to convey purity, innovation, or a clean, invigorating digital experience. The harmonious progression allows for dynamic layering and clear visual hierarchy, evoking the cool, stark beauty of arctic formations.

Best used for

Health and wellness technology interfaces
Clean, modern corporate branding
Winter sports apparel or gear websites
Scientific illustration and educational platforms
Refreshing beverage or snack packaging
Minimalist portfolio sites for creatives

Suggested color roles

primary

#72BBD6 functions as a strong primary, ideal for headings, important buttons, or main content areas that need clear definition.

secondary

#9BD1E4 provides a softer secondary, suitable for subheadings, background sections, or subtle UI elements.

accent

#49A6C8 serves as a vibrant accent, perfect for calls-to-action, interactive highlights, or key graphical elements requiring emphasis.

background

#F0F8FF creates a pristine, airy background, mimicking ice and providing an expansive canvas for content.

text

For optimal readability, use a dark charcoal or #49A6C8 for headings, and #72BBD6 or charcoal for body text on lighter backgrounds like #F0F8FF.

Accessibility notes

Ensure sufficient contrast for all text, especially when using lighter blues on #F0F8FF.
Dark text (e.g., #49A6C8 or black) is crucial for readability on #F0F8FF and #C4E2F1.
Avoid using #F0F8FF or #C4E2F1 as text colors, as they lack contrast on most backgrounds.
When creating gradients, ensure text placed over them maintains adequate contrast throughout the range.

Recommended combinations

Crisp Readability

Use #F0F8FF as a clean background, #49A6C8 for prominent headings, and #72BBD6 for body text, ensuring high contrast.

#F0F8FF · #49A6C8 · #72BBD6

Layered Clarity

Create subtle depth in UI cards or sections by layering these three, from lightest to darkest for a receding effect.

#C4E2F1 · #9BD1E4 · #72BBD6

Accent Focus

Apply #F0F8FF as the primary background, #72BBD6 for general content, and #49A6C8 to highlight interactive elements or key information.

#F0F8FF · #72BBD6 · #49A6C8

CSS variables

:root {
  --iceberg-crystal-edge-1: #F0F8FF;
  --iceberg-crystal-edge-2: #C4E2F1;
  --iceberg-crystal-edge-3: #9BD1E4;
  --iceberg-crystal-edge-4: #72BBD6;
  --iceberg-crystal-edge-5: #49A6C8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "iceberg-crystal-edge": {
        1: "#F0F8FF",
        2: "#C4E2F1",
        3: "#9BD1E4",
        4: "#72BBD6",
        5: "#49A6C8",
      }
    }
  }
}

Hex values

Color 1#F0F8FF

Color 2#C4E2F1

Color 3#9BD1E4

Color 4#72BBD6

Color 5#49A6C8

Accessibility

Contrast checker

1.3:1Fail

1.5:1Fail

2:1Fail

2.6:1Fail

1.3:1Fail

1.2:1Fail

1.6:1Fail

2:1Fail

1.5:1Fail

1.2:1Fail

1.3:1Fail

1.7:1Fail

2:1Fail

1.6:1Fail

1.3:1Fail

2.6:1Fail

2:1Fail

1.7:1Fail

1.3:1Fail

Similar palettes

More like Iceberg Crystal Edge

Iceberg Crystal Edge

See it in context.

Ready when you are.

Built with Iceberg Crystal Edge.

How to use Iceberg Crystal Edge

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Crisp Readability

Layered Clarity

Accent Focus

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Iceberg Crystal Edge