Back to palettes

Palette

Monsoon Rain Wash

Deep, atmospheric blues and grays capturing the cleansing and powerful essence of monsoon rains.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Monsoon Rain Wash 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 Monsoon Rain Wash.

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

Data visualization

#4682B4#5F9EA0#6A5ACD#708090#778899

Palette guide

How to use Monsoon Rain Wash

Overview

The Monsoon Rain Wash palette evokes the deep, atmospheric blues and grays of a cleansing monsoon shower. With strong, cool tones like the steadfast #4682B4 and the calming #5F9EA0, this palette is ideal for projects that aim to convey serenity, power, and clarity. The subtle #708090 and #778899 provide sophisticated neutral ground, while the surprising #6A5ACD adds a touch of mysterious depth. This collection is perfect for designers and developers crafting experiences that are both impactful and tranquil, reflecting the profound beauty of a rainy sky.

Best used for

  • Weather forecasting applications
  • Environmental awareness campaigns
  • Serene interior design concepts
  • Modern tech and software interfaces
  • Sustainable living brand identities
  • Abstract art and digital illustrations

Suggested color roles

primary

Designate #4682B4 as the primary color for prominent UI elements, brand logos, or calls-to-action, conveying stability and trust.

secondary

Utilize #5F9EA0 for secondary navigation, sub-sections, or supporting graphics, offering a softer, complementary blue-green.

accent

Introduce #6A5ACD as a powerful accent for interactive elements, notifications, or to add a touch of sophisticated intrigue.

background

Employ #778899 as a versatile background color, providing a neutral, calming base that allows other colors to stand out gracefully.

text

For optimal readability on lighter backgrounds, use #4682B4 or a deep charcoal. On darker colors, ensure light text like white or a very light gray is used.

Accessibility notes

  • Ensure sufficient contrast when using text on #778899 and #708090, especially with lighter text colors.
  • The dark #4682B4 requires light text (e.g., white) to meet WCAG contrast guidelines.
  • Avoid placing #6A5ACD text directly on #708090 without verifying contrast for accessibility.
  • Use #4682B4 or a dark grey for body text on #778899 to guarantee clear readability.

Recommended combinations

Stormy Depth

Creates a dramatic and sophisticated look, excellent for hero sections or brand statements that need impact.

#4682B4 · #708090 · #6A5ACD

Calm Horizon

Perfect for subtle, calming interfaces or backgrounds that need depth without being overly dark, with a clear primary focus.

#5F9EA0 · #778899 · #4682B4

Moody Accent

Ideal for designs that need a neutral base with a striking, unexpected accent, providing visual interest and sophistication.

#708090 · #6A5ACD · #4682B4

CSS variables

:root {
  --monsoon-rain-wash-1: #4682B4;
  --monsoon-rain-wash-2: #5F9EA0;
  --monsoon-rain-wash-3: #6A5ACD;
  --monsoon-rain-wash-4: #708090;
  --monsoon-rain-wash-5: #778899;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monsoon-rain-wash": {
        1: "#4682B4",
        2: "#5F9EA0",
        3: "#6A5ACD",
        4: "#708090",
        5: "#778899",
      }
    }
  }
}

Related searches

monsoon blue paletterainy day colorsstormy sky schemecool grey blueatmospheric design colors

Palette colors

Hex values

Color 1#4682B4
·
Color 2#5F9EA0
·
Color 3#6A5ACD
·
Color 4#708090
·
Color 5#778899
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.3:1Fail
1:1Fail
1.1:1Fail
2
1.3:1Fail
1.7:1Fail
1.3:1Fail
1.2:1Fail
3
1.3:1Fail
1.7:1Fail
1.3:1Fail
1.5:1Fail
4
1:1Fail
1.3:1Fail
1.3:1Fail
1.1:1Fail
5
1.1:1Fail
1.2:1Fail
1.5:1Fail
1.1:1Fail

Similar palettes

More like Monsoon Rain Wash

View all cool