Palette

Glacial Melt Stream

Refreshing blues and aquas, mirroring the crystal-clear waters flowing from melting glaciers.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Glacial Melt Stream 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 Glacial Melt Stream.

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

Data visualization

#008B8B#4682B4#87CEFA#AFEEEE#E0FFFF

Palette guide

How to use Glacial Melt Stream

Overview

The Glacial Melt Stream palette captures the essence of crystal-clear waters with its refreshing blend of blues and aquas. Featuring the bold #008B8B, the reliable #4682B4, and the airy #87CEFA, this palette transitions smoothly to the light #AFEEEE and the almost pure white #E0FFFF. It's an excellent choice for designers and developers aiming to convey purity, freshness, and a vibrant connection to nature. This collection is versatile for creating interfaces that feel invigorating and clean, from interactive data visualizations to serene background elements, mirroring the untouched beauty of a glacial stream.

Best used for

Outdoor adventure and eco-tourism brands
Hydration and beverage product marketing
Nature and wildlife documentary websites
Summer resort and travel promotions
Health and wellness apps (water focus)
Aquatic sports apparel branding

Suggested color roles

primary

Designate #008B8B as the strong primary color for main headers, branding, or key calls-to-action, conveying freshness and vitality.

secondary

Use #4682B4 for supporting content, subheadings, or secondary navigation, providing a stable and cool presence.

accent

Apply #87CEFA for bright highlights, interactive elements, or illustrations that need a clear, energetic pop.

background

The very light #E0FFFF serves as an ideal background, offering a clean canvas that enhances readability and spaciousness.

text

For primary body text, use #008B8B on #E0FFFF to ensure strong readability, or a dark charcoal for general content.

Accessibility notes

Ensure #008B8B text on #E0FFFF background meets WCAG AA contrast standards for good readability.
Avoid using #AFEEEE for small text on #E0FFFF, as the contrast will be insufficient for legibility.
Utilize #4682B4 for interactive elements and form fields to ensure clear visibility and usability.
Consider #87CEFA for large headings or graphical elements on #E0FFFF, checking contrast for impact.

Recommended combinations

Vibrant Header

A strong teal header (#008B8B) on a very light background (#E0FFFF), with a bright sky blue accent (#87CEFA) for visual appeal.

#008B8B · #E0FFFF · #87CEFA

Clean Interface

A cool blue (#4682B4) for main content, an airy aqua panel (#AFEEEE), and the lightest background (#E0FFFF) for a pristine look.

#4682B4 · #AFEEEE · #E0FFFF

Refreshing Contrast

Pair the deep aqua (#008B8B) with pure white (#E0FFFF) for high contrast, using the cool blue (#4682B4) for supporting content.

#008B8B · #E0FFFF · #4682B4

CSS variables

:root {
  --glacial-melt-stream-1: #008B8B;
  --glacial-melt-stream-2: #4682B4;
  --glacial-melt-stream-3: #87CEFA;
  --glacial-melt-stream-4: #AFEEEE;
  --glacial-melt-stream-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "glacial-melt-stream": {
        1: "#008B8B",
        2: "#4682B4",
        3: "#87CEFA",
        4: "#AFEEEE",
        5: "#E0FFFF",
      }
    }
  }
}

Hex values

Color 1#008B8B

Color 2#4682B4

Color 3#87CEFA

Color 4#AFEEEE

Color 5#E0FFFF

Accessibility

Contrast checker

1:1Fail

2.4:1Fail

3.2:1AA18

3.9:1AA18

1:1Fail

2.4:1Fail

3.2:1AA18

3.9:1AA18

2.4:1Fail

1.3:1Fail

1.6:1Fail

3.2:1AA18

1.3:1Fail

1.2:1Fail

3.9:1AA18

1.6:1Fail

1.2:1Fail

Similar palettes

More like Glacial Melt Stream

Glacial Melt Stream

See it in context.

Ready when you are.

Built with Glacial Melt Stream.

How to use Glacial Melt Stream

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Vibrant Header

Clean Interface

Refreshing Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Glacial Melt Stream