Back to palettes

Palette

Tranquil Morning Mist

Delicate shades of cool blues and greys conjure the serene calm of a foggy morning just before sunrise.

Coolcalm5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#DDEBF0#CADFE6#B9D4DE#A1C6D4#87B7C9

Palette guide

How to use Tranquil Morning Mist

Overview

The Tranquil Morning Mist palette offers a delicate spectrum of cool blues and greys, perfectly capturing the serene calm of a foggy morning. Ranging from the soft #DDEBF0 to the deeper #87B7C9, including #CADFE6, #B9D4DE, and #A1C6D4, this collection is ideal for designers and developers seeking a muted, sophisticated, and calming aesthetic. Its subtle shifts in tone create a harmonious and understated visual experience, making it versatile for projects that prioritize elegance, clarity, and a gentle presence. This palette excels in creating clean layouts with a touch of atmospheric depth.

Best used for

  • Minimalist web design and app interfaces
  • Photography and art gallery websites
  • Corporate branding seeking a subdued, professional look
  • Wellness and meditation content
  • Luxury product presentation
  • Clean, modern interior design concepts

Suggested color roles

primary

The darkest shade, #87B7C9, serves as the most impactful color for primary accents, strong text, or navigation elements. It grounds the palette.

secondary

Utilize #A1C6D4 for supportive sections, subheadings, or larger background panels. It offers a gentle presence without overpowering.

accent

Apply #B9D4DE for subtle highlights, interactive states, or graphic details. Its soft quality adds character without harshness.

background

Designate #DDEBF0 as the main background color. Its very light, almost off-white quality provides an expansive, clean canvas.

text

For optimal readability on light backgrounds like #DDEBF0, a dark charcoal or black is recommended. If using palette colors, #87B7C9 or #A1C6D4 can be used for larger headings, but check contrast carefully.

Accessibility notes

  • For body text on #DDEBF0, a dark neutral (like charcoal or black) is essential to meet readability standards due to the palette's lightness.
  • Avoid using lighter palette colors such as #B9D4DE or #CADFE6 for small text on any background within this palette, as contrast will be insufficient.
  • When using #87B7C9 for text on #DDEBF0, ensure it passes WCAG AA contrast for normal text sizes.
  • Consider using thicker fonts or larger sizes if relying on palette colors for text to improve legibility.

Recommended combinations

Misty Horizon

Light background with the darkest palette color for accents/headings, and a mid-tone for subtle details.

#DDEBF0 · #87B7C9 · #A1C6D4

Cloudy Gradient

Excellent for soft background gradients, overlays, or atmospheric illustrations, creating gentle depth.

#CADFE6 · #B9D4DE · #A1C6D4

Subtle Depth

Use the lighter blues for UI cards or panels, with the darkest for clear, readable text or iconography.

#B9D4DE · #DDEBF0 · #87B7C9

CSS variables

:root {
  --tranquil-morning-mist-1: #DDEBF0;
  --tranquil-morning-mist-2: #CADFE6;
  --tranquil-morning-mist-3: #B9D4DE;
  --tranquil-morning-mist-4: #A1C6D4;
  --tranquil-morning-mist-5: #87B7C9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tranquil-morning-mist": {
        1: "#DDEBF0",
        2: "#CADFE6",
        3: "#B9D4DE",
        4: "#A1C6D4",
        5: "#87B7C9",
      }
    }
  }
}

Related searches

calm blue grey palettesoft cool web colorsminimalist serene uimisty brand identitysubtle blue green scheme

Palette colors

Hex values

Color 1#DDEBF0
·
Color 2#CADFE6
·
Color 3#B9D4DE
·
Color 4#A1C6D4
·
Color 5#87B7C9
·

Accessibility

Contrast checker

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

Similar palettes

More like Tranquil Morning Mist

View all Cool
Bamboo Garden Calm
Glacial Lake Tranquil
Aegean Shoreline Treasures
Dreamy Cloudscape Blues
Frozen Tundra Calm
Ocean Shoreline Spray