Back to palettes

Palette

Dreamy Stratus

A whisper-soft gradation of blues, like gazing up at a tranquil, dreamy sky filled with gentle clouds.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dreamy Stratus 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 Dreamy Stratus.

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

Data visualization

#F0F8FF#E6F3F9#CDE5EF#B3D8E6#99CCDD

Palette guide

How to use Dreamy Stratus

Overview

The "Dreamy Stratus" palette presents a whisper-soft gradation of blues, perfectly capturing the essence of a tranquil, dreamy sky filled with gentle clouds. This cool and serene collection moves seamlessly from the almost-white #F0F8FF through soft blues like #E6F3F9 and #CDE5EF, culminating in the serene #99CCDD. The cohesive progression makes it ideal for designs requiring a calming, expansive, and clean aesthetic. Designers will find these hex codes excellent for creating harmonious digital interfaces, elegant branding, or peaceful print materials. Developers can easily implement this gradient for background effects, subtle hover states, or to differentiate UI components while maintaining a consistent visual flow.

Best used for

  • Websites for meditation, yoga, or mental wellness
  • Cloud-based software interfaces or data platforms
  • Branding for ethereal or minimalist lifestyle products
  • Healthcare or spa brochure designs
  • Abstract art or digital illustrations focusing on calm
  • Environmental or nature-themed educational materials

Suggested color roles

primary

#CDE5EF - A clear, gentle blue, excellent for main content areas, section headers, or prominent UI elements to set a calming tone.

secondary

#B3D8E6 - A slightly deeper blue, suitable for subheadings, borders, or secondary interactive elements.

accent

#99CCDD - The most saturated blue, ideal for calls-to-action, key icons, or subtle highlights that need to stand out gently.

background

#F0F8FF - The lightest, almost pure white blue, providing an airy and expansive canvas for all content.

text

#2F4F4F (dark slate gray) - A deep, cool dark slate gray ensures excellent readability and harmonizes with the blue tones.

Accessibility notes

  • Text in #CDE5EF or #B3D8E6 on #F0F8FF will likely have insufficient contrast for body text; always use a darker text color.
  • A dark text color like #2F4F4F is essential for readability against all light backgrounds in this palette.
  • Pair #99CCDD with #F0F8FF for good contrast in headings or important UI elements.
  • Avoid using adjacent light shades like #E6F3F9 and #CDE5EF for text/background pairs due to low contrast.

Recommended combinations

Sky Gradient

Perfect for creating smooth background gradients, hero sections, or illustrating depth in digital designs.

#F0F8FF · #E6F3F9 · #CDE5EF

UI Clarity

Use for primary and secondary UI elements, buttons, and interactive components to maintain consistency.

#CDE5EF · #B3D8E6 · #99CCDD

Gentle Contrast

Establishes a clean base with the darkest color for strong text and the middle shade for accents.

#F0F8FF · #99CCDD · #B3D8E6

CSS variables

:root {
  --dreamy-stratus-1: #F0F8FF;
  --dreamy-stratus-2: #E6F3F9;
  --dreamy-stratus-3: #CDE5EF;
  --dreamy-stratus-4: #B3D8E6;
  --dreamy-stratus-5: #99CCDD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dreamy-stratus": {
        1: "#F0F8FF",
        2: "#E6F3F9",
        3: "#CDE5EF",
        4: "#B3D8E6",
        5: "#99CCDD",
      }
    }
  }
}

Related searches

soft blue color palettedreamlike sky colorsserene cloud aestheticcalming blue gradientlight ethereal design

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#E6F3F9
·
Color 3#CDE5EF
·
Color 4#B3D8E6
·
Color 5#99CCDD
·

Accessibility

Contrast checker

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

Similar palettes

More like Dreamy Stratus

View all cool
Arctic Dawn Light
Azure Sky Whisper
Celestial Ocean Dream
Celestial Ocean Embrace
Clear Night Chill
Cloudburst Serenity