Palette

Glacial River Flow

Cool, crisp blues and grays evoke the clear, flowing waters of a river fed by melting glaciers.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#C1D8DE#A8C2CA#7FA7B4#5D8893#2D5860

Palette guide

How to use Glacial River Flow

Overview

The "Glacial River Flow" palette beautifully captures the cool, clear essence of a river fed by melting glaciers. This collection features a harmonious progression of cool blues and muted grays, creating a sense of calm, clarity, and continuous movement. From the light, almost ethereal #C1D8DE to the deep, grounding #2D5860, each shade contributes to a cohesive, sophisticated aesthetic. The mid-tones #A8C2CA, #7FA7B4, and #5D8893 offer excellent versatility for layering and creating visual depth, making this palette ideal for designs that aim for a natural, refreshing, and composed feel.

Best used for

Environmental conservation websites
Water purification or beverage branding
Outdoor and nature-focused content
Spa and relaxation applications
Sustainable fashion brands
Calm and minimalist user interfaces

Suggested color roles

primary

#5D8893 - A strong, muted blue-gray, perfect for main headings, calls-to-action, or primary brand identity.

secondary

#7FA7B4 - A slightly lighter, refreshing blue-gray for supporting content, sub-sections, or background panels.

accent

#A8C2CA - A soft, cool gray-blue, ideal for subtle highlights, hover states, or decorative elements.

background

#C1D8DE - A light, airy blue-gray, providing a clean and serene canvas for content.

text

#2D5860 - A deep, cool blue-gray, offering excellent contrast and readability for primary body text on light backgrounds.

Accessibility notes

Ensure #2D5860 text on #C1D8DE provides sufficient contrast.
Use a lighter text color (e.g., white or a very light gray) when placing text on #5D8893 or #2D5860.
Avoid using #C1D8DE for text on #A8C2CA or #7FA7B4, as contrast will be insufficient.
Always check contrast ratios for interactive elements, especially if they use the lighter shades.

Recommended combinations

River Depths

For a clean website, use #C1D8DE as background, #7FA7B4 for content blocks, and #2D5860 for strong headings.

#C1D8DE · #7FA7B4 · #2D5860

Flowing Layers

Create a smooth, flowing visual effect for backgrounds or large graphic elements, moving from light to deep.

#A8C2CA · #5D8893 · #7FA7B4

Subtle Contrast

#2D5860 for strong elements, #A8C2CA for supporting details, and #C1D8DE for spacious backgrounds.

#2D5860 · #A8C2CA · #C1D8DE

CSS variables

:root {
  --glacial-river-flow-1: #C1D8DE;
  --glacial-river-flow-2: #A8C2CA;
  --glacial-river-flow-3: #7FA7B4;
  --glacial-river-flow-4: #5D8893;
  --glacial-river-flow-5: #2D5860;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "glacial-river-flow": {
        1: "#C1D8DE",
        2: "#A8C2CA",
        3: "#7FA7B4",
        4: "#5D8893",
        5: "#2D5860",
      }
    }
  }
}

Hex values

Color 1#C1D8DE

Color 2#A8C2CA

Color 3#7FA7B4

Color 4#5D8893

Color 5#2D5860

Accessibility

Contrast checker

1.3:1Fail

1.7:1Fail

2.6:1Fail

5.3:1AA

1.3:1Fail

1.4:1Fail

2.1:1Fail

4.2:1AA18

1.7:1Fail

1.4:1Fail

1.5:1Fail

3:1AA18

2.6:1Fail

2.1:1Fail

1.5:1Fail

2:1Fail

5.3:1AA

4.2:1AA18

3:1AA18

2:1Fail

Similar palettes

More like Glacial River Flow

Arctic Sapphire Glimmer