Palette

Rainy Day Grey

A soft, cool progression of grays that evoke the serene, contemplative mood of a rainy afternoon.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#696969#808080#A9A9A9#C0C0C0#D3D3D3

Palette guide

How to use Rainy Day Grey

Overview

The "Rainy Day Grey" palette offers a serene and subtle monochromatic progression, perfectly capturing the quiet, contemplative mood of a rainy afternoon. Ranging from a solid #696969 to a delicate #D3D3D3, this collection provides versatile shades for creating calm, sophisticated, and minimalist designs. The even distribution of mid-tones like #808080 and #A9A9A9 allows for smooth gradients and clear visual hierarchy without harsh contrasts. This palette is ideal for projects that require an understated elegance, a sense of tranquility, or a clean, modern aesthetic, making it suitable for professional and artistic applications alike.

Best used for

Minimalist web design and app interfaces
Professional portfolios and corporate branding
Editorial and publishing layouts
Art and photography websites
Interior design concepts
Calm and reflective digital experiences

Suggested color roles

primary

#696969 serves as a strong, yet soft, anchor for headings, navigation, or main content blocks, providing a grounded feel.

secondary

#808080 or #A9A9A9 are excellent for subheadings, secondary text, or content dividers, maintaining a harmonious flow.

accent

#C0C0C0 can be used for subtle highlights, hover states, or graphic elements that require a gentle lift without strong contrast.

background

#D3D3D3 offers a light, neutral canvas that ensures readability and a spacious, clean appearance.

text

For light backgrounds like #D3D3D3, use #696969 for primary text. For darker backgrounds, #D3D3D3 or a bright white offers good contrast.

Accessibility notes

Ensure #696969 text on #D3D3D3 background meets WCAG AA contrast for readability.
Avoid using #A9A9A9 or #C0C0C0 for small text on #D3D3D3 backgrounds, as contrast will be insufficient.
For interactive elements, ensure distinct visual feedback beyond just color change, especially with closely related grey tones.
Always test contrast ratios for all text and interactive elements against their backgrounds for accessibility.

Recommended combinations

Calm Contrast

Creates a balanced, minimalist look with darker text, light background, and a mid-grey for secondary information or borders.

#696969 · #D3D3D3 · #808080

Subtle Layers

Ideal for building gentle visual depth in backgrounds, card designs, or subtle UI components, creating a soft transition.

#808080 · #A9A9A9 · #C0C0C0

Quiet Elegance

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

#D3D3D3 · #696969 · #A9A9A9

CSS variables

:root {
  --rainy-day-grey-1: #696969;
  --rainy-day-grey-2: #808080;
  --rainy-day-grey-3: #A9A9A9;
  --rainy-day-grey-4: #C0C0C0;
  --rainy-day-grey-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainy-day-grey": {
        1: "#696969",
        2: "#808080",
        3: "#A9A9A9",
        4: "#C0C0C0",
        5: "#D3D3D3",
      }
    }
  }
}

Hex values

Color 1#696969

Color 2#808080

Color 3#A9A9A9

Color 4#C0C0C0

Color 5#D3D3D3

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

3:1AA18

3.7:1AA18

1.4:1Fail

1.7:1Fail

2.2:1Fail

2.6:1Fail

2.3:1Fail

1.7:1Fail

1.3:1Fail

1.6:1Fail

3:1AA18

2.2:1Fail

1.3:1Fail

1.2:1Fail

3.7:1AA18

2.6:1Fail

1.6:1Fail

1.2:1Fail

Similar palettes

More like Rainy Day Grey