Palette

Misty Sky Drizzle

A soothing palette of soft blues and greys, evoking the gentle calm of a light rain shower.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Sky Drizzle 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 Misty Sky Drizzle.

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

Data visualization

#B0C4DE#778899#6C7A89#4682B4#A9B2C3

Palette guide

How to use Misty Sky Drizzle

Overview

The Misty Sky Drizzle palette is a soothing collection of soft blues and greys, perfectly evoking the gentle calm of a light rain shower. Featuring the airy #B0C4DE (Light Steel Blue), the grounding #778899 (Light Slate Gray), and the deep #4682B4 (Steel Blue), this palette offers both depth and tranquility. Shades like #6C7A89 (Cadet Gray) and #A9B2C3 (Light Slate Gray) provide versatile mid-tones, allowing for harmonious transitions. Designers and developers can leverage these tones to create interfaces and branding that feel peaceful, cool, and inviting, ideal for projects seeking a serene and sophisticated aesthetic.

Best used for

Weather applications and forecasts
Calm productivity tools and apps
Urban planning and development websites
Minimalist fashion and lifestyle brands
Wellness and meditation platforms
Serene digital art and illustration

Suggested color roles

primary

Use #4682B4 as a deep, stable primary color for main headings, footers, or dominant graphical elements. It provides clear definition.

secondary

Employ #778899 for supportive content, subheadings, or as a background for sections that need a calm, atmospheric presence.

accent

Apply #B0C4DE as a soft, reflective highlight for interactive elements, subtle graphical accents, or to introduce an airy touch.

background

Utilize #A9B2C3 as a gentle, pervasive misty background color for main content areas. #6C7A89 can be used for secondary background sections for subtle depth.

text

For optimal readability on lighter backgrounds, use #4682B4 or a deep charcoal. For darker backgrounds, white or a very light grey is recommended.

Accessibility notes

Ensure sufficient contrast when pairing #A9B2C3 or #B0C4DE with lighter text; use dark text for optimal readability.
Test text readability of #778899 on backgrounds like #B0C4DE to meet WCAG AA standards for small text.
Prioritize #4682B4 for critical text on light backgrounds to ensure maximum legibility.
Provide clear focus indicators for interactive elements to ensure visibility across similar cool tones.

Recommended combinations

Rainy Day Comfort

Creates a comforting, grounded feel with a deep primary, misty background, and a supportive mid-tone.

#4682B4 · #A9B2C3 · #778899

Drizzle Harmony

Ideal for layered backgrounds and content blocks, offering depth with a reflective accent against deeper blues.

#B0C4DE · #6C7A89 · #4682B4

Sky and Mist

Provides a serene and natural feel. #778899 for key elements, #A9B2C3 for background, and #6C7A89 for secondary details.

#778899 · #A9B2C3 · #6C7A89

CSS variables

:root {
  --misty-sky-drizzle-1: #B0C4DE;
  --misty-sky-drizzle-2: #778899;
  --misty-sky-drizzle-3: #6C7A89;
  --misty-sky-drizzle-4: #4682B4;
  --misty-sky-drizzle-5: #A9B2C3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-sky-drizzle": {
        1: "#B0C4DE",
        2: "#778899",
        3: "#6C7A89",
        4: "#4682B4",
        5: "#A9B2C3",
      }
    }
  }
}

Hex values

Color 1#B0C4DE

Color 2#778899

Color 3#6C7A89

Color 4#4682B4

Color 5#A9B2C3

Accessibility

Contrast checker

2:1Fail

2.5:1Fail

2.3:1Fail

1.2:1Fail

2:1Fail

1.2:1Fail

1.1:1Fail

1.7:1Fail

2.5:1Fail

1.2:1Fail

1.1:1Fail

2.1:1Fail

2.3:1Fail

1.1:1Fail

1.9:1Fail

1.2:1Fail

1.7:1Fail

2.1:1Fail

1.9:1Fail

Similar palettes

More like Misty Sky Drizzle

Misty Sky Drizzle

See it in context.

Ready when you are.

Built with Misty Sky Drizzle.

How to use Misty Sky Drizzle

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Rainy Day Comfort

Drizzle Harmony

Sky and Mist

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Misty Sky Drizzle