Palette

Icy Lake Reflections

Crisp, serene blues and whites capture the stark beauty of a frozen lake reflecting winter skies.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Icy Lake Reflections 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 Lake Reflections.

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

Data visualization

#A3CED9#70A8BC#3C7A89#1C485A#E0F2F7

Palette guide

How to use Icy Lake Reflections

Overview

The "Icy Lake Reflections" palette embodies the stark, serene beauty of a frozen landscape, offering a range of cool blues from light and airy to deep and profound. Featuring shades like #A3CED9, #70A8BC, and the very dark #1C485A, this collection is perfect for projects that demand a sophisticated yet cool aesthetic. Designers can use these colors to create depth and contrast, ideal for corporate websites, tech interfaces, or luxury branding with a focus on tranquility and precision. Its versatility allows for both subtle gradients and bold statements, making it valuable for diverse digital applications.

Best used for

Corporate or tech brand identity
Winter sports app design
Luxury product websites
Architectural visualization projects
Data dashboards with cool tones
Environmental conservation themes

Suggested color roles

primary

Designate #3C7A89 (Dark Cyan) for core UI components, main navigation, or impactful headings, providing a strong, stable presence.

secondary

Utilize #70A8BC (Cadet Blue) for sub-headers, secondary buttons, or large background sections that require a softer yet distinct blue.

accent

Employ #A3CED9 (Light Blue) for subtle accents, hover states, or small informational icons, offering a gentle visual cue.

background

Use #E0F2F7 (Light Cyan) as a clean, bright background for content areas, ensuring excellent readability and an open feel.

text

For primary body text, #1C485A (Dark Blue) offers excellent contrast against lighter backgrounds, providing strong readability and depth.

Accessibility notes

Ensure high contrast when pairing #1C485A text with lighter background colors like #E0F2F7.
Be cautious using #A3CED9 or #70A8BC for small text on mid-tone backgrounds to avoid readability issues.
Verify all color combinations for interactive elements meet WCAG 2.1 AA or AAA contrast standards.
Provide clear visual focus indicators for interactive elements, as some palette colors are close in luminance.

Recommended combinations

Deep Contrast

Ideal for content-heavy pages; #E0F2F7 as background, #1C485A for text, and #70A8BC for headings or prominent links.

#E0F2F7 · #1C485A · #70A8BC

Layered UI

Create depth in UI elements: #70A8BC for a base card, #A3CED9 for a sub-element, and #3C7A89 for borders or iconography.

#70A8BC · #A3CED9 · #3C7A89

Brand Header

A strong header with #1C485A as the background, #E0F2F7 for primary text, and #A3CED9 for a subtle brand accent or tagline.

#1C485A · #E0F2F7 · #A3CED9

CSS variables

:root {
  --icy-lake-reflections-1: #A3CED9;
  --icy-lake-reflections-2: #70A8BC;
  --icy-lake-reflections-3: #3C7A89;
  --icy-lake-reflections-4: #1C485A;
  --icy-lake-reflections-5: #E0F2F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "icy-lake-reflections": {
        1: "#A3CED9",
        2: "#70A8BC",
        3: "#3C7A89",
        4: "#1C485A",
        5: "#E0F2F7",
      }
    }
  }
}

Hex values

Color 1#A3CED9

Color 2#70A8BC

Color 3#3C7A89

Color 4#1C485A

Color 5#E0F2F7

Accessibility

Contrast checker

1.5:1Fail

2.9:1Fail

5.8:1AA

1.5:1Fail

1.8:1Fail

3.8:1AA18

2.3:1Fail

2.9:1Fail

1.8:1Fail

2:1Fail

4.2:1AA18

5.8:1AA

3.8:1AA18

2:1Fail

8.6:1AAA

1.5:1Fail

2.3:1Fail

4.2:1AA18

8.6:1AAA

Similar palettes

More like Icy Lake Reflections

Icy Lake Reflections

See it in context.

Ready when you are.

Built with Icy Lake Reflections.

How to use Icy Lake Reflections

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Contrast

Layered UI

Brand Header

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Icy Lake Reflections