Back to palettes

Palette

Rain Slicker Blue

The glossy, protective sheen of a classic rain slicker on a cool, damp day.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rain Slicker Blue 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 Rain Slicker Blue.

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

Data visualization

#4682B4#6A5ACD#87CEEB#708090#C6E2EE

Palette guide

How to use Rain Slicker Blue

Overview

The Rain Slicker Blue palette evokes a tranquil, urban cool with its blend of sophisticated blues and a touch of muted grey. Featuring the deep steel blue of #4682B4, the elegant periwinkle of #6A5ACD, and the airy sky blue of #87CEEB, this collection is perfect for projects seeking a serene yet modern aesthetic. The grounding slate grey of #708090 provides a subtle contrast, while the very light blue of #C6E2EE offers a soft, expansive feel. Designers and developers can leverage this palette for interfaces that require a professional, calming presence, or for branding that speaks to reliability and understated elegance. Its cool tones are inherently soothing and versatile across various digital and print applications.

Best used for

  • Corporate websites and professional portfolios
  • Mobile app interfaces for productivity or meditation
  • Branding for tech startups or consulting firms
  • Interior design concepts for modern spaces
  • Editorial layouts and digital publications
  • Weather-related app designs

Suggested color roles

primary

#4682B4 (Steel Blue) - Ideal for main headers, prominent buttons, or large background sections to establish a solid, dependable base.

secondary

#6A5ACD (Slate Blue) - Excellent for sub-headings, secondary calls-to-action, or decorative elements, adding a touch of refined depth.

accent

#87CEEB (Sky Blue) - Use sparingly for interactive elements, highlights, or small icons to draw attention with a gentle, refreshing pop.

background

#C6E2EE (Light Blue) - A soft, ethereal choice for main page backgrounds, offering a clean, expansive canvas that feels airy.

text

#708090 (Slate Gray) - Provides excellent readability against lighter backgrounds, suitable for body text and navigation labels. For darker areas, white or near-white text would be ideal.

Accessibility notes

  • Ensure sufficient contrast between #708090 text and #C6E2EE background for readability.
  • Be mindful when pairing #87CEEB (Sky Blue) as text on #C6E2EE (Light Blue) as contrast may be insufficient.
  • For interactive elements, consider using #4682B4 or #6A5ACD for buttons with white text.
  • Text on #4682B4 or #6A5ACD should ideally be white or a very light grey like #C6E2EE for best contrast.

Recommended combinations

Urban Calm

Perfect for a sophisticated, minimalist interface, using #4682B4 as primary, #708090 for text, and #C6E2EE for backgrounds.

#4682B4 · #708090 · #C6E2EE

Refined Touch

Creates a dynamic yet serene feel; #6A5ACD for branding, #87CEEB for highlights, and #4682B4 for supporting elements.

#6A5ACD · #87CEEB · #4682B4

Slicker Accent

A light background (#C6E2EE) with a strong primary (#4682B4) and a bright, fresh accent (#87CEEB) for calls to action.

#C6E2EE · #4682B4 · #87CEEB

CSS variables

:root {
  --rain-slicker-blue-1: #4682B4;
  --rain-slicker-blue-2: #6A5ACD;
  --rain-slicker-blue-3: #87CEEB;
  --rain-slicker-blue-4: #708090;
  --rain-slicker-blue-5: #C6E2EE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rain-slicker-blue": {
        1: "#4682B4",
        2: "#6A5ACD",
        3: "#87CEEB",
        4: "#708090",
        5: "#C6E2EE",
      }
    }
  }
}

Related searches

cool blue grey paletteprofessional blue color schemeserene urban design colorsslate blue web designcalming blue UI palette

Palette colors

Hex values

Color 1#4682B4
·
Color 2#6A5ACD
·
Color 3#87CEEB
·
Color 4#708090
·
Color 5#C6E2EE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.4:1Fail
1:1Fail
3:1AA18
2
1.3:1Fail
3:1AA18
1.3:1Fail
3.9:1AA18
3
2.4:1Fail
3:1AA18
2.3:1Fail
1.3:1Fail
4
1:1Fail
1.3:1Fail
2.3:1Fail
3:1Fail
5
3:1AA18
3.9:1AA18
1.3:1Fail
3:1Fail

Similar palettes

More like Rain Slicker Blue

View all cool
Misty Sky Drizzle
Aegean Isle Horizon
Arctic Glacier Melt
Calm Lake Reflections
City Puddle Glimmer
City Rain Slicker