Back to palettes

Palette

Stormy Sky Serene

Capturing the calm yet powerful hues of a sky before a gentle rain.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stormy Sky 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 Stormy Sky Serene.

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

Data visualization

#3D4A5C#5E6F80#8A9CAE#BCCBD7#DAE2E8

Palette guide

How to use Stormy Sky Serene

Overview

The Stormy Sky Serene palette captures the tranquil yet powerful essence of a sky before a gentle rain, offering a collection of muted blues and grays perfect for creating a calm and sophisticated atmosphere. Featuring shades like the grounding #3D4A5C and the versatile #5E6F80, this palette provides a harmonious foundation for designs that prioritize peace and clarity. The lighter tones, including #8A9CAE, #BCCBD7, and the airy #DAE2E8, are excellent for backgrounds and secondary elements, ensuring readability and a soft visual experience. This palette is particularly effective for health, wellness, or technology brands seeking to convey reliability, innovation, and a serene user experience.

Best used for

  • Wellness and mindfulness apps
  • Clean, minimalist website designs
  • Healthcare or medical branding
  • Modern home decor inspiration
  • Technology company interfaces
  • Editorial design for tranquil content

Suggested color roles

primary

Designate #3D4A5C for primary headings, crucial call-to-action buttons, or a grounding footer, establishing a calm authority.

secondary

Use #5E6F80 for subheadings, navigation links, or secondary information blocks, maintaining visual flow and serenity.

accent

Apply #8A9CAE for subtle highlights, interactive states, or small decorative elements, providing gentle visual interest.

background

Utilize #DAE2E8 for main content areas or expansive backgrounds to create an open, airy, and inviting feel.

text

For optimal readability on light backgrounds, use #3D4A5C or #5E6F80. On darker sections, a crisp white or #DAE2E8 provides clear contrast.

Accessibility notes

  • Ensure sufficient contrast when using #5E6F80 for text on backgrounds like #DAE2E8.
  • Avoid placing #BCCBD7 text directly on #DAE2E8 for critical information due to low contrast.
  • Verify all interactive elements, especially those using #8A9CAE, meet WCAG contrast guidelines.
  • Consider larger font sizes for text colored with #8A9CAE on backgrounds like #BCCBD7 to enhance readability.

Recommended combinations

Calm Foundation

Excellent for a primary dark text, a supportive mid-tone, and a clean, serene background.

#3D4A5C · #5E6F80 · #DAE2E8

Soft Transition

Ideal for layered UI elements, subtle gradients, or creating depth without harsh contrasts.

#5E6F80 · #8A9CAE · #BCCBD7

Light & Airy

Perfect for a light background with a contrasting dark text and a softer accent for details.

#DAE2E8 · #BCCBD7 · #3D4A5C

CSS variables

:root {
  --stormy-sky-serene-1: #3D4A5C;
  --stormy-sky-serene-2: #5E6F80;
  --stormy-sky-serene-3: #8A9CAE;
  --stormy-sky-serene-4: #BCCBD7;
  --stormy-sky-serene-5: #DAE2E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-sky-serene": {
        1: "#3D4A5C",
        2: "#5E6F80",
        3: "#8A9CAE",
        4: "#BCCBD7",
        5: "#DAE2E8",
      }
    }
  }
}

Related searches

serene blue grey palettecalm website colorsminimalist UI design palettestormy sky inspired colorscool neutral branding

Palette colors

Hex values

Color 1#3D4A5C
·
Color 2#5E6F80
·
Color 3#8A9CAE
·
Color 4#BCCBD7
·
Color 5#DAE2E8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.2:1AA18
5.4:1AA
6.9:1AA
2
1.7:1Fail
1.8:1Fail
3.1:1AA18
3.9:1AA18
3
3.2:1AA18
1.8:1Fail
1.7:1Fail
2.2:1Fail
4
5.4:1AA
3.1:1AA18
1.7:1Fail
1.3:1Fail
5
6.9:1AA
3.9:1AA18
2.2:1Fail
1.3:1Fail

Similar palettes

More like Stormy Sky Serene

View all cool
Cloudburst Sky
Cloud Burst Sky
Stormy Sky Embrace
Aegean Horizon
Agate Grotto
Arctic Sky Whisper