Back to palettes

Palette

Urban Rain Slicker

Vibrant blues of a slicker, reflecting the cool and reflective surfaces of a rainy city street.

coolenergetic5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1E90FF#4169E1#00BFFF#5F9EA0#6A5ACD

Palette guide

How to use Urban Rain Slicker

Overview

The Urban Rain Slicker palette bursts with vibrant blues, reflecting the cool and reflective surfaces of a rainy city street. Dominated by energetic shades like #1E90FF, #4169E1, and #00BFFF, it introduces a unique teal #5F9EA0 and a sophisticated violet #6A5ACD. This guide assists designers and developers in crafting dynamic, modern, and visually engaging interfaces. It's ideal for projects that demand an energetic yet cohesive blue-centric aesthetic, perfect for conveying innovation, trust, and a splash of urban creativity.

Best used for

  • Tech and software product branding
  • Modern sports or outdoor apparel websites
  • Educational platforms with an engaging interface
  • Creative agency portfolios
  • Digital marketing campaigns
  • Interactive dashboards and data visualization

Suggested color roles

primary

#1E90FF - A vibrant, strong blue, excellent for main branding, prominent headers, or primary interactive elements that need to stand out.

secondary

#4169E1 - A rich, slightly darker blue, suitable for main content areas, navigation, or as a dominant color in a dynamic layout.

accent

#00BFFF - An electric, bright blue, perfect for call-to-action buttons, key highlights, or progress indicators to add a jolt of energy.

background

#5F9EA0 - A muted, cool teal, offering a calming contrast to the brighter blues, suitable for secondary backgrounds or content cards.

text

White or near-white on dark blues like #1E90FF or #4169E1, or a dark charcoal/black on #5F9EA0.

Accessibility notes

  • Ensure sufficient contrast when using the brighter blues like #00BFFF for text, especially on other blues. White text works well on these.
  • Text in #1E90FF on a white or light grey background offers good readability.
  • #6A5ACD provides a unique accent; ensure its contrast is checked when used for text against other palette colors.
  • Use the darker blues for body text against lighter backgrounds for optimal legibility.

Recommended combinations

Dynamic Blue

Energetic headers, prominent call-to-actions, or vibrant interactive elements in a cohesive blue theme.

#1E90FF · #4169E1 · #00BFFF

Urban Pop

Creative branding, accent graphics, or background elements that need a unique color combination.

#5F9EA0 · #6A5ACD · #1E90FF

Slicker Contrast

Highlighting key information, hover states, or creating depth in layered UI components.

#4169E1 · #00BFFF · #5F9EA0

CSS variables

:root {
  --urban-rain-slicker-2-1: #1E90FF;
  --urban-rain-slicker-2-2: #4169E1;
  --urban-rain-slicker-2-3: #00BFFF;
  --urban-rain-slicker-2-4: #5F9EA0;
  --urban-rain-slicker-2-5: #6A5ACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rain-slicker-2": {
        1: "#1E90FF",
        2: "#4169E1",
        3: "#00BFFF",
        4: "#5F9EA0",
        5: "#6A5ACD",
      }
    }
  }
}

Related searches

vibrant blue color paletteenergetic urban colorsmodern tech blue schemecool rain slicker designdynamic ui blue purple

Palette colors

Hex values

Color 1#1E90FF
·
Color 2#4169E1
·
Color 3#00BFFF
·
Color 4#5F9EA0
·
Color 5#6A5ACD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.5:1Fail
1.1:1Fail
1.6:1Fail
2
1.5:1Fail
2.3:1Fail
1.6:1Fail
1.1:1Fail
3
1.5:1Fail
2.3:1Fail
1.4:1Fail
2.5:1Fail
4
1.1:1Fail
1.6:1Fail
1.4:1Fail
1.7:1Fail
5
1.6:1Fail
1.1:1Fail
2.5:1Fail
1.7:1Fail

Similar palettes

More like Urban Rain Slicker

View all cool
Electric City Drive
Rainy Metropolis Neon
Abstract Ocean Currents
Aegean Blue Depths
Aqua Marine Sparkle
Arctic Aurora Hues