Back to palettes

Palette

Cloudspun Serenity

A gentle collection mirroring a peaceful sky filled with soft, comforting clouds after a light rain.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0F2F7#B9D7EA#93BADB#6D9CC9#477BC1

Palette guide

How to use Cloudspun Serenity

Overview

The Cloudspun Serenity palette mirrors a peaceful sky filled with soft, comforting clouds after a light rain, offering a gentle collection of cool blues. Ranging from the very light #E0F2F7 to the deep, anchoring #477BC1, this palette exudes calm, trust, and clarity. Designers can leverage these hex codes for professional yet approachable branding, soothing digital experiences, or refreshing print materials. Developers will find these harmonious blues excellent for crafting user interfaces that feel clean, reliable, and inviting, with #B9D7EA providing a soft mid-tone and #6D9CC9 offering a vibrant, yet serene, primary option.

Best used for

  • corporate communications
  • healthcare portals
  • educational resources
  • financial services websites
  • environmental initiatives
  • weather applications

Suggested color roles

primary

#6D9CC9 - A clear, medium blue, strong enough for main headings, primary navigation, or prominent call-to-action buttons.

secondary

#93BADB - A lighter, supportive blue, perfect for subheadings, background panels, or graphic elements.

accent

#477BC1 - The deepest blue, ideal for strong accents, important links, or focal points that require high contrast.

background

#E0F2F7 - The lightest shade, providing an expansive, clean, and airy canvas that promotes readability.

text

#477BC1 - This deep blue offers excellent readability for body text against the lighter backgrounds like #E0F2F7 or #B9D7EA.

Accessibility notes

  • Text in #477BC1 or #6D9CC9 on #E0F2F7 or #B9D7EA backgrounds should meet WCAG AA contrast standards.
  • Avoid using #93BADB for small text on the lightest backgrounds due to potential low contrast.
  • Ensure interactive elements have clear visual feedback beyond just color, especially for lighter blue shades.
  • Always verify contrast ratios for all text and interactive elements, particularly for critical information.

Recommended combinations

Sky Layers

For creating subtle background gradients or layered card designs, evoking depth and calm.

#E0F2F7 · #B9D7EA · #93BADB

Clear Focus

Ideal for professional layouts, using the deeper blues for headlines and lighter tones for content.

#6D9CC9 · #477BC1 · #E0F2F7

Gentle Accent

For subtle highlights or decorative elements where a harmonious, cool blue blend is desired.

#93BADB · #B9D7EA · #6D9CC9

CSS variables

:root {
  --cloudspun-serenity-1: #E0F2F7;
  --cloudspun-serenity-2: #B9D7EA;
  --cloudspun-serenity-3: #93BADB;
  --cloudspun-serenity-4: #6D9CC9;
  --cloudspun-serenity-5: #477BC1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloudspun-serenity": {
        1: "#E0F2F7",
        2: "#B9D7EA",
        3: "#93BADB",
        4: "#6D9CC9",
        5: "#477BC1",
      }
    }
  }
}

Related searches

calm blue palettesky inspired colorsserene UI blueprofessional light blueairy cloud colors

Palette colors

Hex values

Color 1#E0F2F7
·
Color 2#B9D7EA
·
Color 3#93BADB
·
Color 4#6D9CC9
·
Color 5#477BC1
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.5:1Fail
3.7:1AA18
2
1.3:1Fail
1.4:1Fail
1.9:1Fail
2.9:1Fail
3
1.8:1Fail
1.4:1Fail
1.4:1Fail
2.1:1Fail
4
2.5:1Fail
1.9:1Fail
1.4:1Fail
1.5:1Fail
5
3.7:1AA18
2.9:1Fail
2.1:1Fail
1.5:1Fail

Similar palettes

More like Cloudspun Serenity

View all cool
Arctic Sky Whisper
Azure Horizon Dream
Azure Sky Whisper
Celestial Azure Drift
Celestial Glow
Cloudscape Serenity Blue