Back to palettes

Palette

Digital Rainstorm

Cool, moody greys and deep blues mimic the reflective surfaces and quiet hum of a rainy futuristic city.

coolminimal5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Digital Rainstorm 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 Digital Rainstorm.

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

Data visualization

#0F0F0F#334455#667788#99AABB#CCDDEE

Palette guide

How to use Digital Rainstorm

Overview

The Digital Rainstorm palette features cool, moody greys and deep blues, mimicking the reflective surfaces and quiet hum of a rainy futuristic city. With a spectrum from dark almost-black (#0F0F0F) to light grey-blue (#CCDDEE), including mid-tones like #334455, #667788, and #99AABB, this palette is perfect for designers and developers creating projects with a minimalist, tech-noir, or sophisticated urban aesthetic. Its subtle variations in tone allow for depth and hierarchy without relying on high contrast, making it ideal for elegant user interfaces, atmospheric game environments, or refined branding. This palette evokes a sense of calm and modernity.

Best used for

  • Futuristic city simulation games
  • Minimalist software interfaces
  • Architectural visualization
  • Sophisticated tech branding
  • Dark mode web designs
  • Urban photography portfolios

Suggested color roles

primary

Use #0F0F0F as the dominant background or base, providing depth and a sleek, dark aesthetic.

secondary

Employ #334455 or #667788 for secondary panels, subtle distinctions, or container backgrounds.

accent

Apply #CCDDEE for highlights, active states, or to gently draw attention to specific features.

background

A deep #0F0F0F provides a strong foundation. Lighter greys like #99AABB can be used for contrasting sections.

text

For general text, #CCDDEE offers excellent readability against darker tones. For headlines, #99AABB can provide a subtle glow.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using #667788 on #334455 or similar mid-tone pairings.
  • The lightest color #CCDDEE on #99AABB may have insufficient contrast for small text; use for larger elements.
  • Prioritize clear visual hierarchy using the varying shades of grey and blue to guide users.
  • Test text readability on all background colors, particularly for users with low vision, as the overall palette is low contrast.

Recommended combinations

Urban Night

Ideal for deep backgrounds, main panels, and subtle UI elements in a dark, moody theme.

#0F0F0F · #334455 · #667788

Reflective Surface

Excellent for highlights, active states, or to simulate reflective surfaces in a UI.

#99AABB · #CCDDEE · #667788

Digital Mist

Suitable for gradients, subtle overlays, or informational panels where a soft, diffused look is desired.

#0F0F0F · #99AABB · #CCDDEE

CSS variables

:root {
  --digital-rainstorm-1: #0F0F0F;
  --digital-rainstorm-2: #334455;
  --digital-rainstorm-3: #667788;
  --digital-rainstorm-4: #99AABB;
  --digital-rainstorm-5: #CCDDEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "digital-rainstorm": {
        1: "#0F0F0F",
        2: "#334455",
        3: "#667788",
        4: "#99AABB",
        5: "#CCDDEE",
      }
    }
  }
}

Related searches

futuristic grey blue palettedark moody UI colorstech noir aestheticminimalist urban themerainy city color scheme

Palette colors

Hex values

Color 1#0F0F0F
·
Color 2#334455
·
Color 3#667788
·
Color 4#99AABB
·
Color 5#CCDDEE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
4.2:1AA18
8.1:1AAA
13.8:1AAA
2
1.9:1Fail
2.2:1Fail
4.2:1AA18
7.2:1AAA
3
4.2:1AA18
2.2:1Fail
1.9:1Fail
3.3:1AA18
4
8.1:1AAA
4.2:1AA18
1.9:1Fail
1.7:1Fail
5
13.8:1AAA
7.2:1AAA
3.3:1AA18
1.7:1Fail

Similar palettes

More like Digital Rainstorm

View all cool