Palette

Cloudy Day Serene

A soothing palette reflecting the soft, muted light of a peaceful overcast day.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cloudy Day Serene 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 Cloudy Day Serene.

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

Data visualization

#7A8D9F#9ABBCD#C3D4DF#DBE7EF#5F6E7D

Palette guide

How to use Cloudy Day Serene

Overview

The Cloudy Day Serene palette is a soothing collection reflecting the soft, muted light of a peaceful overcast day. Ranging from the deep, grounding #5F6E7D to the airy, almost white #DBE7EF, this palette combines cool blues and grays to evoke calm and understated elegance. Designers will find these hex codes perfect for creating tranquil digital experiences, professional branding, or soothing print materials. Developers can leverage these harmonious tones to build user interfaces that feel clean, trustworthy, and inviting, with #7A8D9F providing a balanced mid-tone and #C3D4DF offering a soft, expansive background.

Best used for

corporate websites
financial services branding
healthcare applications
educational platforms
environmental organizations
weather forecasting apps

Suggested color roles

primary

#7A8D9F - A balanced, medium grey-blue, excellent for main headings, primary navigation, or prominent brand elements.

secondary

#9ABBCD - A lighter, supportive blue-grey, perfect for subheadings, background panels, or graphic elements.

accent

#5F6E7D - The deepest, darkest blue-grey, ideal for strong accents, important links, or focal points that require high contrast and depth.

background

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

text

#5F6E7D - This deep blue-grey offers excellent readability for body text against the lighter backgrounds like #DBE7EF or #C3D4DF.

Accessibility notes

Text in #5F6E7D or #7A8D9F on backgrounds like #DBE7EF or #C3D4DF should meet WCAG AA contrast standards.
Avoid using lighter shades like #9ABBCD 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-grey shades.
Always verify contrast ratios for all text and interactive elements, particularly for critical information.

Recommended combinations

Overcast Sky

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

#DBE7EF · #C3D4DF · #9ABBCD

Muted Professional

Ideal for professional layouts, using the deeper blue-greys for headlines and lighter tones for content.

#7A8D9F · #5F6E7D · #DBE7EF

Soft Focus

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

#9ABBCD · #C3D4DF · #7A8D9F

CSS variables

:root {
  --cloudy-day-serene-1: #7A8D9F;
  --cloudy-day-serene-2: #9ABBCD;
  --cloudy-day-serene-3: #C3D4DF;
  --cloudy-day-serene-4: #DBE7EF;
  --cloudy-day-serene-5: #5F6E7D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloudy-day-serene": {
        1: "#7A8D9F",
        2: "#9ABBCD",
        3: "#C3D4DF",
        4: "#DBE7EF",
        5: "#5F6E7D",
      }
    }
  }
}

Hex values

Color 1#7A8D9F

Color 2#9ABBCD

Color 3#C3D4DF

Color 4#DBE7EF

Color 5#5F6E7D

Accessibility

Contrast checker

1.7:1Fail

2.2:1Fail

2.7:1Fail

1.5:1Fail

1.7:1Fail

1.3:1Fail

1.6:1Fail

2.6:1Fail

2.2:1Fail

1.3:1Fail

1.2:1Fail

3.4:1AA18

2.7:1Fail

1.6:1Fail

1.2:1Fail

4.2:1AA18

1.5:1Fail

2.6:1Fail

3.4:1AA18

4.2:1AA18

Similar palettes

More like Cloudy Day Serene