Palette

Glacial Ridge Mist

Icy blues and misty grays, reflecting the cool, ethereal atmosphere of a glacial mountain ridge.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2A4C5F#4A7A90#7EBAD1#B2E5F7#1B3542

Palette guide

How to use Glacial Ridge Mist

Overview

The "Glacial Ridge Mist" palette captures the cool, ethereal atmosphere of a misty mountain ridge with a sophisticated blend of deep blues and cool grays. This palette is robust yet serene, ranging from the very dark, grounding #1B3542 to the light, airy #B2E5F7. Mid-tones like #2A4C5F and #4A7A90 provide excellent depth and contrast, while #7EBAD1 introduces a clear, sky-like blue. This selection is ideal for designs that aim for a professional, stable, and slightly mysterious aesthetic, perfect for conveying strength and tranquility.

Best used for

Outdoor and adventure gear brands
Corporate and professional service websites
Luxury automotive or travel branding
Data visualization dashboards
Modern architecture firm portfolios
Winter-themed product launches

Suggested color roles

primary

#2A4C5F - A deep, muted blue, excellent for main branding, large text, or primary UI elements.

secondary

#4A7A90 - A lighter, yet still substantial blue-gray for supporting content, subheadings, or background sections.

accent

#7EBAD1 - A clear, bright blue, perfect for interactive elements, highlights, or a touch of visual crispness.

background

#B2E5F7 - A very light, cool blue that provides an expansive, fresh, and clean canvas.

text

#1B3542 - An extremely dark blue-gray, offering optimal contrast and readability for primary body text on light backgrounds.

Accessibility notes

Ensure #1B3542 text on #B2E5F7 provides excellent contrast.
Use a light text color (e.g., white or a very light gray) when placing text on #2A4C5F or #1B3542.
Verify contrast for interactive elements, especially when using #7EBAD1 on medium-toned backgrounds.
Avoid using #B2E5F7 for text on any of the darker colors without careful contrast checking.

Recommended combinations

Ridge Depth

A strong, professional look: #B2E5F7 as background, #4A7A90 for content areas, and #1B3542 for impactful headlines.

#B2E5F7 · #4A7A90 · #1B3542

Misty Layers

Create a layered UI with #2A4C5F as a base, #4A7A90 for panels, and #7EBAD1 for active states or notifications.

#2A4C5F · #7EBAD1 · #4A7A90

Sky Accent

Use #1B3542 for a dark theme background, #7EBAD1 for primary accents, and #B2E5F7 for secondary text.

#1B3542 · #7EBAD1 · #B2E5F7

CSS variables

:root {
  --glacial-ridge-mist-1: #2A4C5F;
  --glacial-ridge-mist-2: #4A7A90;
  --glacial-ridge-mist-3: #7EBAD1;
  --glacial-ridge-mist-4: #B2E5F7;
  --glacial-ridge-mist-5: #1B3542;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "glacial-ridge-mist": {
        1: "#2A4C5F",
        2: "#4A7A90",
        3: "#7EBAD1",
        4: "#B2E5F7",
        5: "#1B3542",
      }
    }
  }
}

Hex values

Color 1#2A4C5F

Color 2#4A7A90

Color 3#7EBAD1

Color 4#B2E5F7

Color 5#1B3542

Accessibility

Contrast checker

1.9:1Fail

4.3:1AA18

6.7:1AA

1.4:1Fail

1.9:1Fail

2.2:1Fail

3.4:1AA18

2.7:1Fail

4.3:1AA18

2.2:1Fail

1.6:1Fail

6:1AA

6.7:1AA

3.4:1AA18

1.6:1Fail

9.4:1AAA

1.4:1Fail

2.7:1Fail

6:1AA

9.4:1AAA

Similar palettes

More like Glacial Ridge Mist