Back to palettes

Palette

Gentle Rain Shower

The soft, diffused light and calming hues of a gentle rain shower.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gentle Rain Shower 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 Gentle Rain Shower.

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

Data visualization

#6A7B8E#8C9CAB#B2C0CE#D0DBE5#4A5B6D

Palette guide

How to use Gentle Rain Shower

Overview

The "Gentle Rain Shower" palette perfectly captures the diffused light and calming hues of a serene rainy day. With a range of cool grays and muted blues, from the deep, anchoring slate "#4A5B6D" to the light, airy cloud gray "#D0DBE5", this collection offers a sophisticated and tranquil aesthetic. The mid-tones like "#6A7B8E", "#8C9CAB", and "#B2C0CE" provide seamless transitions, allowing for depth and subtle complexity. This palette is ideal for designs aiming for a sense of calm, professionalism, and understated elegance, making it suitable for corporate, minimalist, or contemplative themes.

Best used for

  • Corporate website design
  • Minimalist UI/UX interfaces
  • Professional branding (tech, finance)
  • Architectural presentations
  • Serene home goods packaging
  • Data visualization dashboards

Suggested color roles

primary

"#4A5B6D" provides a strong, sophisticated foundation, excellent for main headings, brand logos, or key calls to action.

secondary

"#6A7B8E" works well for subheadings, navigation, or larger content blocks, offering a balanced, calm presence.

accent

Use "#8C9CAB" for subtle highlights, interactive elements, or to soften transitions without losing professionalism.

background

"#D0DBE5" offers a very light, almost off-white base that ensures readability and a clean, open feel.

text

Black or dark charcoal works best on lighter shades; "#4A5B6D" on "#D0DBE5" provides excellent contrast.

Accessibility notes

  • "#D0DBE5" is very light; ensure dark text (e.g., black) has sufficient contrast on it.
  • "#B2C0CE" and "#8C9CAB" may require darker text for optimal readability, especially for small font sizes.
  • The darkest colors, "#4A5B6D" and "#6A7B8E", offer good contrast with the lightest shades.
  • Always verify WCAG contrast ratios for all text and interactive elements.

Recommended combinations

Storm Cloud

For robust branding and clear visual hierarchy in professional or sophisticated settings.

#4A5B6D · #6A7B8E · #8C9CAB

Misty Horizon

Ideal for light backgrounds, subtle gradients, or layered information in a serene interface.

#B2C0CE · #D0DBE5 · #6A7B8E

Puddle Reflections

A balanced trio for interactive states or subtle data presentation, offering calm visual cues.

#8C9CAB · #D0DBE5 · #4A5B6D

CSS variables

:root {
  --gentle-rain-shower-1: #6A7B8E;
  --gentle-rain-shower-2: #8C9CAB;
  --gentle-rain-shower-3: #B2C0CE;
  --gentle-rain-shower-4: #D0DBE5;
  --gentle-rain-shower-5: #4A5B6D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gentle-rain-shower": {
        1: "#6A7B8E",
        2: "#8C9CAB",
        3: "#B2C0CE",
        4: "#D0DBE5",
        5: "#4A5B6D",
      }
    }
  }
}

Related searches

calm gray blue paletteserene professional colorsminimalist corporate designrain inspired color schemecool neutral web design

Palette colors

Hex values

Color 1#6A7B8E
·
Color 2#8C9CAB
·
Color 3#B2C0CE
·
Color 4#D0DBE5
·
Color 5#4A5B6D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.3:1Fail
3.1:1AA18
1.6:1Fail
2
1.5:1Fail
1.5:1Fail
2:1Fail
2.5:1Fail
3
2.3:1Fail
1.5:1Fail
1.3:1Fail
3.8:1AA18
4
3.1:1AA18
2:1Fail
1.3:1Fail
5:1AA
5
1.6:1Fail
2.5:1Fail
3.8:1AA18
5:1AA

Similar palettes

More like Gentle Rain Shower

View all cool
Hushed Lake Surface
Misty Sky Drizzle
Rainy Day Window
Aegean Sea Serene
Agate Grotto
Alpine Mist