Palette

Misty Sky Serene

Gentle blues and soft greys blend seamlessly, creating a serene, dreamlike atmosphere of a misty morning sky.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Sky Serene 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 Misty Sky Serene.

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

Data visualization

#B0C4DE#A7D9D8#D8EBF3#F2F8FA#E0E7ED

Palette guide

How to use Misty Sky Serene

Overview

The Misty Sky Serene palette offers a dreamlike collection of gentle blues and soft greys, blending seamlessly to create the serene atmosphere of a misty morning sky. With the foundational #B0C4DE (Light Steel Blue), the refreshing #A7D9D8 (LightSeaGreen), and the pure #F2F8FA (White Smoke), this palette is inherently calming. Shades like #D8EBF3 (Alice Blue) and #E0E7ED (Light Steel Blue) provide subtle variations, allowing for depth without disrupting the overall tranquility. Designers and developers can use these tones to craft ethereal and soft interfaces, branding, or content that evokes peace, spaciousness, and a touch of subtle beauty.

Best used for

Baby product branding and packaging
Spiritual and mindfulness guidance platforms
Wedding stationery and event design
Spa and relaxation service branding
Cloud services and data visualization
Soft, ethereal digital art and photography

Suggested color roles

primary

Use #B0C4DE as a soft, foundational sky blue for main content areas or primary graphical elements. It sets a calm tone.

secondary

Employ #A7D9D8 for gentle, refreshing accents, subheadings, or to introduce a subtle touch of cool green.

accent

Apply #D8EBF3 as an airy highlight for interactive elements, delicate illustrations, or to create a soft, ethereal glow.

background

Utilize #F2F8FA as the primary pure, expansive canvas, promoting clarity and lightness. #E0E7ED can be used for subtle background variations or layered elements.

text

For optimal readability on very light backgrounds, use #B0C4DE or a deep grey. Black should be reserved for critical text needing maximum contrast.

Accessibility notes

Crucially, ensure strong contrast for text on very light backgrounds like #F2F8FA and #E0E7ED; use dark text for legibility.
Test text readability of #D8EBF3 on backgrounds like #E0E7ED to meet WCAG AA standards, especially for small text.
Prioritize #B0C4DE for critical text on the lightest backgrounds to ensure maximum legibility.
Avoid using lighter colors (e.g., #D8EBF3, #F2F8FA) for small text or icons without significant contrast.

Recommended combinations

Dreamy Morning

Establishes a pure, expansive background with a soft sky blue primary and a refreshing green accent, ideal for serene designs.

#F2F8FA · #B0C4DE · #A7D9D8

Ethereal Blend

Creates a soft, layered effect, perfect for subtle gradients or content blocks that require gentle visual separation.

#D8EBF3 · #E0E7ED · #B0C4DE

Soft Horizon

Provides a harmonious and natural feel. #A7D9D8 for key elements, #F2F8FA for background, and #E0E7ED for secondary details.

#A7D9D8 · #F2F8FA · #E0E7ED

CSS variables

:root {
  --misty-sky-serene-1: #B0C4DE;
  --misty-sky-serene-2: #A7D9D8;
  --misty-sky-serene-3: #D8EBF3;
  --misty-sky-serene-4: #F2F8FA;
  --misty-sky-serene-5: #E0E7ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-sky-serene": {
        1: "#B0C4DE",
        2: "#A7D9D8",
        3: "#D8EBF3",
        4: "#F2F8FA",
        5: "#E0E7ED",
      }
    }
  }
}

Hex values

Color 1#B0C4DE

Color 2#A7D9D8

Color 3#D8EBF3

Color 4#F2F8FA

Color 5#E0E7ED

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

1.7:1Fail

1.4:1Fail

1.1:1Fail

1.3:1Fail

1.4:1Fail

1.2:1Fail

1.4:1Fail

1.3:1Fail

1.1:1Fail

1:1Fail

1.7:1Fail

1.4:1Fail

1.1:1Fail

1.2:1Fail

1.4:1Fail

1.2:1Fail

1:1Fail

1.2:1Fail

Similar palettes

More like Misty Sky Serene

Misty Sky Serene

See it in context.

Ready when you are.

Built with Misty Sky Serene.

How to use Misty Sky Serene

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Dreamy Morning

Ethereal Blend

Soft Horizon

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Misty Sky Serene