Back to palettes

Palette

Dreamy Cloudscape Blues

Expansive and ethereal, mirroring the gentle, floating beauty of a peaceful sky filled with soft clouds.

Coolcalm5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0E0E6#ADD8E6#F0F8FF#D3D3D3#87CEEB

Palette guide

How to use Dreamy Cloudscape Blues

Overview

The Dreamy Cloudscape Blues palette offers an expansive and ethereal collection of cool tones, mirroring a peaceful sky. Featuring serene blues like #B0E0E6, #ADD8E6, and #87CEEB, alongside the soft grey of #D3D3D3 and the crisp #F0F8FF, this palette provides a calming foundation for any design. Designers will appreciate its ability to evoke tranquility and airiness, making it ideal for clean, modern aesthetics. Developers can easily integrate these hex codes for backgrounds, subtle UI elements, and data visualizations where clarity and a soothing mood are paramount. It's a versatile choice for projects requiring a sense of calm and understated elegance.

Best used for

  • Meditation and wellness platforms
  • Travel websites focusing on serene destinations
  • Corporate branding for calm and reliability
  • Weather applications and interfaces
  • Minimalist interior design concepts
  • Educational resources with a calming aesthetic

Suggested color roles

primary

#87CEEB (Sky Blue): A prominent and refreshing primary color, ideal for hero sections or key interactive elements.

secondary

#B0E0E6 (Powder Blue): A softer, versatile blue for subheadings, secondary buttons, or supporting graphical elements.

accent

#ADD8E6 (Light Blue): Use for subtle highlights, hover states, or to add a delicate accent to lighter backgrounds.

background

#F0F8FF (Alice Blue): A very light, almost white background that provides an airy canvas for content.

text

A dark charcoal like #333333 or classic black for optimal readability against these light, cool tones.

Accessibility notes

  • All blues and whites are light; ensure text uses a dark, contrasting color for readability.
  • Avoid using #F0F8FF or #D3D3D3 for text, as they lack sufficient contrast against most backgrounds.
  • When pairing #B0E0E6 with #ADD8E6, ensure there's enough difference for visual distinction.
  • Always check WCAG 2.1 AA contrast ratios for text and interactive elements.

Recommended combinations

Sky Baseline

Perfect for creating a clean, airy background with subtle variations for content cards or section dividers.

#F0F8FF · #D3D3D3 · #B0E0E6

Cloud Depth

Ideal for gradients or layered elements where a progression of cool blues is desired, like background illustrations.

#87CEEB · #ADD8E6 · #B0E0E6

Clear Horizon

Use #87CEEB for headings, #F0F8FF as a primary background, and dark text for a crisp, readable, and calming interface.

#87CEEB · #F0F8FF · #D3D3D3

CSS variables

:root {
  --dreamy-cloudscape-blues-1: #B0E0E6;
  --dreamy-cloudscape-blues-2: #ADD8E6;
  --dreamy-cloudscape-blues-3: #F0F8FF;
  --dreamy-cloudscape-blues-4: #D3D3D3;
  --dreamy-cloudscape-blues-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dreamy-cloudscape-blues": {
        1: "#B0E0E6",
        2: "#ADD8E6",
        3: "#F0F8FF",
        4: "#D3D3D3",
        5: "#87CEEB",
      }
    }
  }
}

Related searches

calm blue UI paletteserene sky colorsairy cloudscape themecool tone website designminimalist blue grey palette

Palette colors

Hex values

Color 1#B0E0E6
·
Color 2#ADD8E6
·
Color 3#F0F8FF
·
Color 4#D3D3D3
·
Color 5#87CEEB
·

Accessibility

Contrast checker

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

Similar palettes

More like Dreamy Cloudscape Blues

View all Cool
Bamboo Garden Calm
Aegean Shoreline Treasures
Glacial Lake Tranquil
Moonlit Desert Sands
Tranquil Morning Mist
Azure Sky Whisper