Back to palettes

Palette

Soft Raindrop

Delicate, muted blues and greys, reflecting the tranquil essence of soft, refreshing raindrops.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Soft Raindrop 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 Soft Raindrop.

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

Data visualization

#B0D0D3#D2E8E9#ECF3F4#F4F7F7#B5D9DD

Palette guide

How to use Soft Raindrop

Overview

The Soft Raindrop palette features delicate, muted blues and grays, perfectly reflecting the tranquil essence of soft, refreshing raindrops. With serene shades like `#B0D0D3` and `#B5D9DD`, complemented by the airy `#D2E8E9` and almost-white `#F4F7F7`, this collection creates a calming and clean aesthetic. Designers and developers can utilize these cool, understated tones to build tranquil digital experiences, minimalist branding, or elegant print materials. The palette's inherent peacefulness makes it ideal for projects aiming for a sophisticated, uncluttered look.

Best used for

  • Spa and wellness digital interfaces
  • Minimalist tech branding
  • Clean and modern UI/UX design
  • Medical and healthcare websites
  • Eco-friendly product packaging
  • Serene home decor inspiration

Suggested color roles

primary

Use `#B5D9DD` as the main calming blue, suitable for prominent sections or brand identity.

secondary

Employ `#B0D0D3` for supporting elements, subheadings, or background accents, adding gentle depth.

accent

Apply `#D2E8E9` for subtle highlights, interactive elements, or to create a sense of lightness.

background

Utilize `#F4F7F7` as a crisp, almost-white base, providing an expansive and clean canvas.

text

Pair with a dark charcoal or deep gray for optimal readability against all palette backgrounds.

Accessibility notes

  • Ensure all text, especially body copy, uses a very dark color (e.g., black or dark gray) for sufficient contrast.
  • Avoid using any of the palette colors for text, as they lack the necessary contrast for legibility.
  • When using `#ECF3F4` and `#F4F7F7` together, be aware of their minimal contrast, reserving them for subtle background variations.
  • For interactive UI elements, ensure sufficient contrast or incorporate other visual cues like icons or underlines.

Recommended combinations

Tranquil Waters

Creates a smooth, calming gradient from deeper to lighter blues, perfect for headers or large backgrounds.

#B5D9DD · #B0D0D3 · #D2E8E9

Airy Serenity

Provides a very light, subtle layering effect, ideal for clean content sections or minimalist designs.

#F4F7F7 · #ECF3F4 · #D2E8E9

Cool Contrast

Combines a deeper blue with the lightest backgrounds for clear differentiation in UI components.

#B0D0D3 · #F4F7F7 · #ECF3F4

CSS variables

:root {
  --soft-raindrop-1: #B0D0D3;
  --soft-raindrop-2: #D2E8E9;
  --soft-raindrop-3: #ECF3F4;
  --soft-raindrop-4: #F4F7F7;
  --soft-raindrop-5: #B5D9DD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soft-raindrop": {
        1: "#B0D0D3",
        2: "#D2E8E9",
        3: "#ECF3F4",
        4: "#F4F7F7",
        5: "#B5D9DD",
      }
    }
  }
}

Related searches

calm blue grey paletteminimalist cool tonesserene ui colorseco friendly designairy blue pastel

Palette colors

Hex values

Color 1#B0D0D3
·
Color 2#D2E8E9
·
Color 3#ECF3F4
·
Color 4#F4F7F7
·
Color 5#B5D9DD
·

Accessibility

Contrast checker

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

Similar palettes

More like Soft Raindrop

View all pastel
Azure Dream Canvas
Cloud Berry Skies
Misty Morning Dew
Sky Whispers Gentle
Whispering Cloud Veil
Aqua Glimmer Dew