Back to palettes

Palette

Icy Reflective Surface

Captures the crystalline clarity and cool, reflective nature of a frozen lake on a still winter day.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Icy Reflective Surface 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 Reflective Surface.

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

Data visualization

#F0F8FF#AFEEEE#B0E0E6#ADD8E6#87CEEB

Palette guide

How to use Icy Reflective Surface

Overview

The "Icy Reflective Surface" palette captures the crystalline clarity and cool, reflective nature of a frozen lake with its collection of serene blues and near-whites. Featuring #F0F8FF (Alice Blue), #AFEEEE (Pale Turquoise), and #87CEEB (Sky Blue), this palette is ideal for creating light, airy, and tranquil digital experiences. Designers and developers can leverage these gentle, cool tones for minimalist interfaces, health and wellness applications, or any project requiring a sense of calm and purity. The subtle variations between the blues offer enough contrast for hierarchy without overwhelming the delicate aesthetic, making it versatile for backgrounds and soft UI elements.

Best used for

  • Minimalist web design projects
  • Spa or wellness brand identities
  • Photography portfolio backgrounds
  • Winter-themed event promotions
  • Calm meditation app interfaces
  • Eco-friendly product packaging

Suggested color roles

primary

Utilize #ADD8E6 (Light Blue) for prominent headers, hero section overlays, or as a primary background for distinct content blocks.

secondary

Apply #B0E0E6 (Powder Blue) for sub-headers, secondary navigation, or card backgrounds, offering a soft, subtle variation.

accent

Designate #87CEEB (Sky Blue) for interactive elements, hover states, or small icons, providing a slightly brighter, engaging touch.

background

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

text

The palette's colors are generally too light for main body text. For optimal readability, use a dark charcoal or black for primary text. For large, decorative headings on a dark background, #ADD8E6 could be considered.

Accessibility notes

  • Ensure sufficient contrast between any text and background, as many palette colors are light; a dark neutral is recommended for text.
  • Avoid using #AFEEEE or #B0E0E6 for small text on #F0F8FF backgrounds due to low contrast.
  • Verify all interactive elements have clear focus indicators that are visibly distinct from their default states.
  • Consider offering a high-contrast mode for users, as the palette's inherent lightness might pose challenges for some.

Recommended combinations

Soft Base UI

Ideal for a clean interface: #F0F8FF as page background, #ADD8E6 for card elements, and #AFEEEE for subtle icons or dividers.

#F0F8FF · #ADD8E6 · #AFEEEE

Header Accent

Use #ADD8E6 for a header background with near-white text, and #87CEEB for a striking logo or key information.

#ADD8E6 · #F0F8FF · #87CEEB

Interactive Element

Apply #B0E0E6 for a button's default state, #87CEEB for its hover state, and #AFEEEE for a soft border or shadow.

#B0E0E6 · #87CEEB · #AFEEEE

CSS variables

:root {
  --icy-reflective-surface-1: #F0F8FF;
  --icy-reflective-surface-2: #AFEEEE;
  --icy-reflective-surface-3: #B0E0E6;
  --icy-reflective-surface-4: #ADD8E6;
  --icy-reflective-surface-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "icy-reflective-surface": {
        1: "#F0F8FF",
        2: "#AFEEEE",
        3: "#B0E0E6",
        4: "#ADD8E6",
        5: "#87CEEB",
      }
    }
  }
}

Related searches

light blue web designserene ui paletteicy blue color schememinimalist cool tonescalm brand identity

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#AFEEEE
·
Color 3#B0E0E6
·
Color 4#ADD8E6
·
Color 5#87CEEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.3:1Fail
1.4:1Fail
1.6:1Fail
2
1.2:1Fail
1.1:1Fail
1.2:1Fail
1.4:1Fail
3
1.3:1Fail
1.1:1Fail
1.1:1Fail
1.2:1Fail
4
1.4:1Fail
1.2:1Fail
1.1:1Fail
1.1:1Fail
5
1.6:1Fail
1.4:1Fail
1.2:1Fail
1.1:1Fail

Similar palettes

More like Icy Reflective Surface

View all cool
Glacial Blue Serenity
Alpine Frost Serenity
Arctic Lake Ice
Arctic Serenity
Fjord Ice Escape
Frosted Willow Pond