Back to palettes

Palette

Raindrop Serenity

Soft blues and ethereal whites capture the peaceful, clean feeling of a gentle rainfall.

CoolCalm5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1E90FF#6495ED#ADD8E6#F0F8FF#B0C4DE

Palette guide

How to use Raindrop Serenity

Overview

The Raindrop Serenity palette embodies a peaceful and clean aesthetic, drawing inspiration from the gentle calm of a soft rainfall. This collection features a harmonious gradient of blues, including the prominent dodger blue of #1E90FF, the slightly muted cornflower blue of #6495ED, and the light blue of #ADD8E6. Complementing these are the almost-white alice blue of #F0F8FF and the soft light steel blue of #B0C4DE, which introduces a subtle grey-blue nuance. Designers and developers will find this palette ideal for creating user interfaces, branding, or digital content that convey trustworthiness, tranquility, and a refreshing sense of clarity.

Best used for

  • Wellness and meditation apps
  • Cloud computing or data services branding
  • Clean, minimalist website designs
  • Healthcare or medical industry interfaces
  • Eco-friendly product packaging
  • Financial services platforms

Suggested color roles

primary

#1E90FF (Dodger Blue) - A strong, yet calming primary for main headings, important calls-to-action, or key branding elements.

secondary

#6495ED (Cornflower Blue) - Excellent for sub-headings, secondary buttons, or data visualization elements, offering depth.

accent

#ADD8E6 (Light Blue) - Use sparingly for subtle highlights, interactive states, or decorative accents that need a soft touch.

background

#F0F8FF (Alice Blue) - An excellent, almost-white background that provides a clean, airy canvas for all elements.

text

#B0C4DE (Light Steel Blue) - Provides a soft, readable contrast against #F0F8FF, ideal for body text. For stronger emphasis, use a darker blue like #1E90FF or a dark charcoal.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using lighter blues like #ADD8E6 on #F0F8FF.
  • #B0C4DE (Light Steel Blue) text on #F0F8FF (Alice Blue) background should be tested for WCAG AA compliance.
  • For interactive elements, ensure distinct visual cues beyond color, especially with similar blue shades.
  • Text on #1E90FF or #6495ED should use white or a very light color like #F0F8FF for optimal readability.

Recommended combinations

Calm Interface

A classic combination for a clean UI: light background, strong primary, soft text.

#F0F8FF · #1E90FF · #B0C4DE

Gentle Flow

Creates a harmonious gradient effect, suitable for content sections or progress indicators.

#6495ED · #ADD8E6 · #1E90FF

Sky Reflect

A soft, muted background (#B0C4DE) with a crisp foreground (#F0F8FF) and a gentle accent (#6495ED).

#B0C4DE · #F0F8FF · #6495ED

CSS variables

:root {
  --raindrop-serenity-1: #1E90FF;
  --raindrop-serenity-2: #6495ED;
  --raindrop-serenity-3: #ADD8E6;
  --raindrop-serenity-4: #F0F8FF;
  --raindrop-serenity-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "raindrop-serenity": {
        1: "#1E90FF",
        2: "#6495ED",
        3: "#ADD8E6",
        4: "#F0F8FF",
        5: "#B0C4DE",
      }
    }
  }
}

Related searches

calm blue paletteserene UI colorsclean web design bluespeaceful digital aestheticlight blue grey scheme

Palette colors

Hex values

Color 1#1E90FF
·
Color 2#6495ED
·
Color 3#ADD8E6
·
Color 4#F0F8FF
·
Color 5#B0C4DE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
2.1:1Fail
3:1AA18
1.8:1Fail
2
1.1:1Fail
1.9:1Fail
2.8:1Fail
1.7:1Fail
3
2.1:1Fail
1.9:1Fail
1.4:1Fail
1.2:1Fail
4
3:1AA18
2.8:1Fail
1.4:1Fail
1.7:1Fail
5
1.8:1Fail
1.7:1Fail
1.2:1Fail
1.7:1Fail

Similar palettes

More like Raindrop Serenity

View all Cool
Aegean Coastline Muse
Coastal Pebble Wash
Misty Coastal Inlet
Muted Ocean Depth
Serene Waterfall Mist
Skyward Gaze