Back to palettes

Palette

Winter Morning Mist

Gentle, ethereal blues and whites capturing the serene, refreshing essence of a tranquil winter morning mist.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Winter Morning 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 Winter Morning Mist.

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

Data visualization

#ADD8E6#B0E0E6#E0FFFF#F0FFFF#AFEEEE

Palette guide

How to use Winter Morning Mist

Overview

The Winter Morning Mist palette captures the serene, refreshing essence of a tranquil winter morning, featuring gentle, ethereal blues and whites. With hues ranging from the crisp #F0FFFF and #E0FFFF to the soothing #ADD8E6 and #AFEEEE, this palette provides a clean and expansive aesthetic. Designers can leverage these light, cool tones to create airy and minimalist layouts, perfect for conveying a sense of calm, purity, and freshness. The subtle differences between the colors allow for harmonious layering and depth without visual clutter, making it an excellent choice for projects that prioritize tranquility and a refreshing user experience. It's particularly well-suited for digital spaces where clarity and a light touch are desired.

Best used for

  • Spa and wellness websites and branding
  • Clean corporate identity and reports
  • Minimalist app interfaces and dashboards
  • Tranquil photography display platforms
  • Eco-friendly product packaging
  • Refreshing lifestyle or personal blogs

Suggested color roles

primary

Use #ADD8E6 or #AFEEEE for subtle headings, primary buttons, or key UI elements, offering gentle emphasis.

secondary

Apply #B0E0E6 for secondary text, borders, or background variations, adding a touch of cool depth.

accent

Highlight with #AFEEEE on a lighter background for active states or subtle interactive elements, offering soft contrast.

background

Choose #F0FFFF or #E0FFFF for expansive, airy backgrounds, creating a pure and clean canvas.

text

For body text, use a rich charcoal like #333333 or a deep blue like #1A2B3C to ensure optimal readability against light backgrounds.

Accessibility notes

  • Extreme caution: text in any palette color on #F0FFFF or #E0FFFF backgrounds will likely fail WCAG contrast ratios. Use dark text.
  • Always use a dark, non-palette color (e.g., black or charcoal) for body text to ensure readability.
  • Reserve the palette colors for backgrounds, large headings, or decorative elements where contrast is less critical.
  • If using palette colors for text, ensure the text is very large and bold, and on a significantly darker background.

Recommended combinations

Misty Header

For a calm header: #F0FFFF for the background, #ADD8E6 for the main title, and #AFEEEE for a subtle separator.

#F0FFFF · #ADD8E6 · #AFEEEE

Refreshing Card

Design a minimalist card: #E0FFFF for the card background, #ADD8E6 for a border, and #B0E0E6 for a subtle icon.

#E0FFFF · #ADD8E6 · #B0E0E6

Serene Gradient

Create a gentle background gradient transitioning from #F0FFFF to #E0FFFF to #B0E0E6 for an ethereal effect.

#F0FFFF · #E0FFFF · #B0E0E6

CSS variables

:root {
  --winter-morning-mist-1: #ADD8E6;
  --winter-morning-mist-2: #B0E0E6;
  --winter-morning-mist-3: #E0FFFF;
  --winter-morning-mist-4: #F0FFFF;
  --winter-morning-mist-5: #AFEEEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-morning-mist": {
        1: "#ADD8E6",
        2: "#B0E0E6",
        3: "#E0FFFF",
        4: "#F0FFFF",
        5: "#AFEEEE",
      }
    }
  }
}

Related searches

misty blue paletteserene winter colorsrefreshing UIlight cool tonestranquil design

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#B0E0E6
·
Color 3#E0FFFF
·
Color 4#F0FFFF
·
Color 5#AFEEEE
·

Accessibility

Contrast checker

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

Similar palettes

More like Winter Morning Mist

View all cool