Back to palettes

Palette

Cloudscape Serenity Blue

A soft, tranquil gradient of blues and whites, capturing the peaceful expanse of a clear, cloudy sky.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cloudscape Serenity Blue 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 Cloudscape Serenity Blue.

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

Data visualization

#5B7AA2#839FBF#AECBE0#DAEBF5#EBF5FB

Palette guide

How to use Cloudscape Serenity Blue

Overview

The Cloudscape Serenity Blue palette offers a tranquil gradient of cool blues and whites, capturing the peaceful expanse of a clear, cloudy sky. From the deep, grounding #5B7AA2 to the airy, almost white #EBF5FB, this collection exudes calm and reliability. Designers will find these hex codes perfect for creating serene digital environments, professional branding, or soothing print materials. Developers can leverage these harmonious tones to build user interfaces that feel clean, trustworthy, and inviting, with #839FBF providing a balanced mid-tone and #DAEBF5 offering a light, expansive background.

Best used for

  • corporate websites
  • financial services branding
  • healthcare applications
  • educational platforms
  • environmental organizations
  • meditation and mindfulness apps

Suggested color roles

primary

#5B7AA2 - A deep, authoritative blue, excellent for main headings, primary navigation, or strong brand presence.

secondary

#839FBF - A balanced mid-tone blue, perfect for secondary information, subheadings, or supportive graphic elements.

accent

#AECBE0 - A lighter, soft blue that can serve as a subtle accent or for interactive elements that need a gentle highlight.

background

#EBF5FB - The lightest, almost white blue, providing an expansive, clean, and airy canvas.

text

#5B7AA2 - This deep blue offers excellent readability against lighter backgrounds like #DAEBF5 or #EBF5FB.

Accessibility notes

  • Text in #5B7AA2 or #839FBF will have good contrast on #DAEBF5 or #EBF5FB backgrounds.
  • Avoid using #AECBE0 for small text on the lightest backgrounds due to potential low contrast.
  • Ensure interactive elements in lighter blues have clear hover/focus states beyond color change.
  • Verify all color pairings meet WCAG AA contrast standards, especially for body text.

Recommended combinations

Sky Gradient

For creating a smooth, ethereal background or layered card designs, evoking depth and calm.

#EBF5FB · #DAEBF5 · #AECBE0

Professional Contrast

Ideal for professional layouts, using the deep blue for headlines and lighter tones for content.

#5B7AA2 · #839FBF · #DAEBF5

Soft Focus

For subtle highlights or decorative elements where a very gentle, airy feel is desired.

#AECBE0 · #DAEBF5 · #EBF5FB

CSS variables

:root {
  --cloudscape-serenity-blue-1: #5B7AA2;
  --cloudscape-serenity-blue-2: #839FBF;
  --cloudscape-serenity-blue-3: #AECBE0;
  --cloudscape-serenity-blue-4: #DAEBF5;
  --cloudscape-serenity-blue-5: #EBF5FB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloudscape-serenity-blue": {
        1: "#5B7AA2",
        2: "#839FBF",
        3: "#AECBE0",
        4: "#DAEBF5",
        5: "#EBF5FB",
      }
    }
  }
}

Related searches

serene blue palettecorporate blue colorscalm web UI bluesky inspired brandingprofessional blue grey scheme

Palette colors

Hex values

Color 1#5B7AA2
·
Color 2#839FBF
·
Color 3#AECBE0
·
Color 4#DAEBF5
·
Color 5#EBF5FB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
3.6:1AA18
4:1AA18
2
1.6:1Fail
1.6:1Fail
2.2:1Fail
2.5:1Fail
3
2.6:1Fail
1.6:1Fail
1.4:1Fail
1.5:1Fail
4
3.6:1AA18
2.2:1Fail
1.4:1Fail
1.1:1Fail
5
4:1AA18
2.5:1Fail
1.5:1Fail
1.1:1Fail

Similar palettes

More like Cloudscape Serenity Blue

View all cool
Azure Sky Whisper
Azure Horizon Dream
Cloudburst Serenity
Cloudspun Serenity
Skyward Echoes
Whispering Sky Hues