Palette

Icy Summit Dawn

The crisp, clear blues and whites of a pristine mountain summit at the break of dawn.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Icy Summit Dawn 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 Icy Summit Dawn.

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

Data visualization

#F0F8FF#B0E0E6#87CEEB#4682B4#778899

Palette guide

How to use Icy Summit Dawn

Overview

The "Icy Summit Dawn" palette beautifully captures the crisp, clear blues and whites of a pristine mountain summit at the break of day. With shades ranging from the ethereal #F0F8FF (Alice Blue) to the grounding #4682B4 (Steel Blue) and a sophisticated #778899 (Light Slate Gray), this collection is perfect for designers and developers seeking to evoke freshness, clarity, and natural elegance. It's ideal for outdoor brands, wellness apps, or any project requiring a clean, invigorating, and trustworthy aesthetic. The blend of cool blues and a subtle grey offers versatility for both expansive backgrounds and impactful UI elements.

Best used for

Outdoor adventure and sports websites
Wellness and meditation app interfaces
Environmental conservation platforms
Clean, corporate branding projects
Winter-themed digital campaigns
Photography and art gallery sites

Suggested color roles

primary

Utilize #4682B4 (Steel Blue) for primary calls-to-action, important headings, or main navigation, providing a strong, reliable anchor.

secondary

Apply #87CEEB (Sky Blue) for sub-headers, secondary buttons, or background panels that need a brighter, inviting blue.

accent

Designate #B0E0E6 (Powder Blue) for subtle highlights, interactive states, or small decorative elements, offering a gentle visual cue.

background

Employ #F0F8FF (Alice Blue) as the main background color, ensuring an expansive, clean, and highly readable canvas for content.

text

For primary body text, #778899 (Light Slate Gray) offers excellent readability against lighter backgrounds like #F0F8FF, providing a softer alternative to black.

Accessibility notes

Ensure #778899 text on #F0F8FF background meets WCAG AA contrast standards for readability.
Avoid using #B0E0E6 or #87CEEB for small text on very light backgrounds to prevent readability issues.
Verify all interactive elements have clear and distinct focus states that stand out from their default appearance.
Use the darker blues for critical information to ensure visibility for all users, especially on lighter backgrounds.

Recommended combinations

Clear Content

Ideal for main content: #F0F8FF as a clean background, #778899 for body text, and #4682B4 for headings or strong emphasis.

#F0F8FF · #778899 · #4682B4

Header & Accent

A striking header with #4682B4 as background, #F0F8FF for text, and #87CEEB for a vibrant logo or key feature.

#4682B4 · #F0F8FF · #87CEEB

Subtle UI

Use #87CEEB for a card background, #B0E0E6 for a nested element, and #778899 for subtle text or borders.

#87CEEB · #B0E0E6 · #778899

CSS variables

:root {
  --icy-summit-dawn-1: #F0F8FF;
  --icy-summit-dawn-2: #B0E0E6;
  --icy-summit-dawn-3: #87CEEB;
  --icy-summit-dawn-4: #4682B4;
  --icy-summit-dawn-5: #778899;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "icy-summit-dawn": {
        1: "#F0F8FF",
        2: "#B0E0E6",
        3: "#87CEEB",
        4: "#4682B4",
        5: "#778899",
      }
    }
  }
}

Hex values

Color 1#F0F8FF

Color 2#B0E0E6

Color 3#87CEEB

Color 4#4682B4

Color 5#778899

Accessibility

Contrast checker

1.3:1Fail

1.6:1Fail

3.8:1AA18

3.4:1AA18

1.3:1Fail

1.2:1Fail

2.9:1Fail

2.5:1Fail

1.6:1Fail

1.2:1Fail

2.4:1Fail

2.1:1Fail

3.8:1AA18

2.9:1Fail

2.4:1Fail

1.1:1Fail

3.4:1AA18

2.5:1Fail

2.1:1Fail

1.1:1Fail

Similar palettes

More like Icy Summit Dawn