Palette

Glacial Flow

A crisp and chilling array of blues, reflecting the stark, beautiful purity of a glacial ice landscape.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0E0E6#87CEEB#6495ED#4682B4#2F4F4F

Palette guide

How to use Glacial Flow

Overview

The Glacial Flow palette offers a crisp and chilling array of blues, reflecting the stark, beautiful purity of a glacial ice landscape. Ranging from the light, airy #B0E0E6 to the deep, grounding #2F4F4F, and including the vibrant #87CEEB, steadfast #6495ED, and strong #4682B4, this palette provides dynamic depth. Designers can create visually engaging interfaces that evoke a sense of movement and cool clarity, while developers will appreciate the distinct shades for robust UI design. It's an excellent choice for projects that demand a clean, modern, and impactful aesthetic, reminiscent of flowing ice and deep waters.

Best used for

Environmental awareness campaigns
Modern tech startup branding
Winter sports and outdoor equipment sites
Data visualization and analytics dashboards
Educational platforms focusing on science
Clean and minimalist corporate identities

Suggested color roles

primary

Designate #4682B4 as the primary color for core brand elements, main headings, or key interactive components, offering stability and trust.

secondary

Use #6495ED for subheadings, active states, or to emphasize secondary information with a vibrant, energetic touch.

accent

Apply #87CEEB for dynamic highlights, call-to-action buttons, or small icon details to add a refreshing pop and guide user attention.

background

Utilize #B0E0E6 as the main background color, providing a light, fresh, and expansive canvas that enhances readability and a sense of calm.

text

For optimal readability, use #2F4F4F (dark slate gray) or pure black for all body text, ensuring strong contrast against lighter backgrounds.

Accessibility notes

Use #2F4F4F or black for all body text on lighter backgrounds like #B0E0E6 and #87CEEB to meet WCAG AA standards.
Ensure sufficient contrast for interactive elements against their backgrounds, especially when using lighter blues.
Avoid using #B0E0E6 or #87CEEB for text on white or very light backgrounds, as contrast will be too low.
The progression of blues from #6495ED to #4682B4 offers good contrast for layered elements.

Recommended combinations

Deep Flow

Creates a strong, legible layout with a light background, a dominant blue, and grounding dark text.

#B0E0E6 · #4682B4 · #2F4F4F

Dynamic Current

Excellent for gradients or layered elements, reflecting movement and depth in a cool palette.

#87CEEB · #6495ED · #4682B4

Icy Contrast

Ideal for a clean, modern theme where a vibrant blue accent stands out against a light background and dark text.

#B0E0E6 · #6495ED · #2F4F4F

CSS variables

:root {
  --glacial-flow-1: #B0E0E6;
  --glacial-flow-2: #87CEEB;
  --glacial-flow-3: #6495ED;
  --glacial-flow-4: #4682B4;
  --glacial-flow-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "glacial-flow": {
        1: "#B0E0E6",
        2: "#87CEEB",
        3: "#6495ED",
        4: "#4682B4",
        5: "#2F4F4F",
      }
    }
  }
}

Hex values

Color 1#B0E0E6

Color 2#87CEEB

Color 3#6495ED

Color 4#4682B4

Color 5#2F4F4F

Accessibility

Contrast checker

1.2:1Fail

2.1:1Fail

2.9:1Fail

6.2:1AA

1.2:1Fail

1.7:1Fail

2.4:1Fail

5.1:1AA

2.1:1Fail

1.7:1Fail

1.4:1Fail

3:1AA18