Palette

Rainy Day Window

Muted blues and grays that capture the serene, soft light of a rainy day seen through a window.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rainy Day Window 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 Rainy Day Window.

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

Data visualization

#6B7A8F#8CA6BF#A4BEDA#BDCFEE#D8E4F3

Palette guide

How to use Rainy Day Window

Overview

The "Rainy Day Window" palette captures the soft, diffused light and tranquil mood of a rainy day observed from indoors, offering a serene progression of muted blue-greys. From the deeper, grounding #6B7A8F to the ethereal, near-white #D8E4F3, this collection provides a sophisticated and calming atmosphere. The harmonious mid-tones like #8CA6BF and #A4BEDA are perfect for creating subtle depth and smooth transitions, reflecting the gentle mist and diffused light. This palette is ideal for projects that aim to evoke peace, clarity, or a sense of understated elegance, making it suitable for wellness, lifestyle, or sophisticated corporate designs.

Best used for

Wellness and meditation app UIs
Spa and relaxation brand websites
Minimalist interior design concepts
Lifestyle blogs with a calm aesthetic
Corporate communication materials
Digital art and photography displays

Suggested color roles

primary

#6B7A8F serves as a calming yet strong primary color for headings, main navigation, or dark-themed sections, conveying tranquility.

secondary

#8CA6BF or #A4BEDA are excellent for subheadings, secondary information, or content dividers, offering gentle visual structure.

accent

#BDCFEE can be used for subtle interactive elements, hover states, or graphic details, providing a soft, luminous touch.

background

#D8E4F3 offers a clean, airy background that enhances readability and creates a sense of spaciousness and calm.

text

For light backgrounds like #D8E4F3, use #6B7A8F for primary text. For darker backgrounds, #D8E4F3 or a soft white offers good contrast.

Accessibility notes

Ensure #6B7A8F text on #D8E4F3 background meets WCAG AA contrast standards.
Avoid using lighter shades like #A4BEDA or #BDCFEE for small text on #D8E4F3 backgrounds due to insufficient contrast.
All interactive elements should have sufficient contrast in their default and hover/active states.
Consider larger font sizes for text colored with mid-tones like #8CA6BF on light backgrounds.

Recommended combinations

Serene Clarity

Creates a clear, calm interface with dark blue-grey for primary, light for background, and a medium tone for secondary elements.

#6B7A8F · #D8E4F3 · #8CA6BF

Misty Gradient

Ideal for soft background gradients, subtle overlays, or layered UI components that mimic diffused light.

#8CA6BF · #A4BEDA · #BDCFEE

Peaceful Contrast

A light, airy base with clear, readable headings and a muted blue-grey for supporting text or inactive elements.

#D8E4F3 · #6B7A8F · #A4BEDA

CSS variables

:root {
  --rainy-day-window-1: #6B7A8F;
  --rainy-day-window-2: #8CA6BF;
  --rainy-day-window-3: #A4BEDA;
  --rainy-day-window-4: #BDCFEE;
  --rainy-day-window-5: #D8E4F3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainy-day-window": {
        1: "#6B7A8F",
        2: "#8CA6BF",
        3: "#A4BEDA",
        4: "#BDCFEE",
        5: "#D8E4F3",
      }
    }
  }
}

Hex values

Color 1#6B7A8F

Color 2#8CA6BF

Color 3#A4BEDA

Color 4#BDCFEE

Color 5#D8E4F3

Accessibility

Contrast checker

1.7:1Fail

2.3:1Fail

2.8:1Fail

3.4:1AA18

1.7:1Fail

1.3:1Fail

1.6:1Fail

2:1Fail

2.3:1Fail

1.3:1Fail

1.2:1Fail

1.5:1Fail

2.8:1Fail

1.6:1Fail

1.2:1Fail

3.4:1AA18

2:1Fail

1.5:1Fail

1.2:1Fail

Similar palettes

More like Rainy Day Window

Rainy Day Window

See it in context.

Ready when you are.

Built with Rainy Day Window.

How to use Rainy Day Window

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Serene Clarity

Misty Gradient

Peaceful Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Rainy Day Window