Palette

Sky Shroud

Delicately soft and atmospheric, reflecting the subtle, tranquil beauty of an ethereal morning mist.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B3CDE3#CCE2EE#E0F2F7#A1B6CE#91A6BF

Palette guide

How to use Sky Shroud

Overview

The "Sky Shroud" palette is a tranquil collection of soft, misty blues and cool grays, reminiscent of an ethereal morning mist or a cloud-shrouded sky. Featuring serene hues like the gentle blue #B3CDE3, the airy light blue #CCE2EE, the almost white #E0F2F7, the muted blue-grey #A1B6CE, and the deeper blue-grey #91A6BF, this palette inspires calm and sophistication. It's ideal for designers and developers aiming to create a sense of peace, clarity, and understated elegance. These colors are particularly effective for corporate, wellness, or technology brands seeking a clean, trustworthy, and minimal aesthetic.

Best used for

Corporate website design
Wellness and meditation apps
Cloud computing service branding
Architectural firm portfolios
Minimalist interior design themes
Tech product interfaces

Suggested color roles

primary

#B3CDE3 - A soft, inviting blue, perfect for primary headers, navigation bars, or significant UI sections to establish a calm, professional tone.

secondary

#A1B6CE - A slightly deeper, muted blue-grey, excellent for secondary content panels, card backgrounds, or subtle accent lines.

accent

#CCE2EE - A lighter, airy blue that can serve as a gentle highlight for interactive elements or subtle visual cues without being too stark.

background

#E0F2F7 - The lightest, almost off-white blue, ideal for main page backgrounds to provide a clean, expansive feel while supporting readability.

text

Dark blue-grey or black, such as #333333 or #4A4A4A - Essential for ensuring strong contrast and legibility against these light backgrounds.

Accessibility notes

Text must be significantly darker than the background colors to meet WCAG contrast guidelines.
Avoid using the three lightest colors for text against each other; the contrast will be insufficient.
Ensure interactive elements have clear, high-contrast states, especially when using light blues.
Use a color contrast checker to validate all text and interactive element pairings.

Recommended combinations

Misty Horizon

Creates a soft, expansive feel for headers or hero sections, echoing a vast sky.

#B3CDE3 · #CCE2EE · #E0F2F7

Subtle Depth

Effective for layered interfaces or card designs, providing gentle visual hierarchy.

#91A6BF · #A1B6CE · #E0F2F7

Calm Contrast

Suitable for dashboards or data visualizations where clarity and a serene atmosphere are desired.

#B3CDE3 · #91A6BF · #CCE2EE

CSS variables

:root {
  --sky-shroud-1: #B3CDE3;
  --sky-shroud-2: #CCE2EE;
  --sky-shroud-3: #E0F2F7;
  --sky-shroud-4: #A1B6CE;
  --sky-shroud-5: #91A6BF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sky-shroud": {
        1: "#B3CDE3",
        2: "#CCE2EE",
        3: "#E0F2F7",
        4: "#A1B6CE",
        5: "#91A6BF",
      }
    }
  }
}

Hex values

Color 1#B3CDE3

Color 2#CCE2EE

Color 3#E0F2F7

Color 4#A1B6CE

Color 5#91A6BF

Accessibility

Contrast checker

1.2:1Fail

1.4:1Fail

1.3:1Fail

1.5:1Fail

1.2:1Fail

1.6:1Fail

1.9:1Fail

1.4:1Fail

1.2:1Fail

1.8:1Fail

2.2:1Fail

1.3:1Fail

1.6:1Fail

1.8:1Fail

1.2:1Fail

1.5:1Fail

1.9:1Fail

2.2:1Fail

1.2:1Fail

Similar palettes

More like Sky Shroud

Sky Shroud

See it in context.

Ready when you are.

Built with Sky Shroud.

How to use Sky Shroud

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Misty Horizon

Subtle Depth

Calm Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sky Shroud