Back to palettes

Palette

Stormy Urban Canvas

Reflects the muted, cool tones of a city on a cloudy, stormy day with its concrete structures and skies.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stormy Urban Canvas 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 Stormy Urban Canvas.

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

Data visualization

#5A5A5A#8D8D8D#B4B4B4#D3D3D3#2A2A2A

Palette guide

How to use Stormy Urban Canvas

Overview

The Stormy Urban Canvas palette delivers a compelling monochrome experience, reflecting the muted, cool tones of a city under a cloudy sky. This collection, anchored by the deep #2A2A2A and the solid #5A5A5A, offers a versatile range of grays perfect for modern, minimalist, and industrial designs. With lighter shades like #8D8D8D, #B4B4B4, and the almost-white #D3D3D3, designers can craft sophisticated visual hierarchies and textures. This palette excels in creating a sense of robustness, reliability, and understated elegance, making it an excellent choice for architectural firms, tech companies, or fashion brands that favor a sleek, contemporary aesthetic. Its inherent neutrality allows for strong emphasis on content and form.

Best used for

  • Architectural firm branding
  • High-tech product interfaces
  • Minimalist fashion websites
  • Urban photography portfolios
  • Industrial design concepts
  • Clean, modern app UI/UX

Suggested color roles

primary

Use #2A2A2A for dominant elements like headers, footers, or main navigation to establish a strong, foundational presence.

secondary

Apply #5A5A5A for subheadings, card backgrounds, or secondary content blocks, offering a slightly softer yet robust feel.

accent

Utilize #8D8D8D for subtle interactive elements, borders, or dividers, providing definition without harshness.

background

Employ #D3D3D3 for clean, expansive content areas or lighter sections, ensuring high readability for darker text.

text

For dark backgrounds, use #D3D3D3 or white for clear text. For light backgrounds, #2A2A2A or #5A5A5A provides excellent contrast for body text.

Accessibility notes

  • Ensure #2A2A2A text on #D3D3D3 background meets WCAG AAA contrast for optimal readability.
  • Avoid using #B4B4B4 text on #D3D3D3 for small font sizes due to potential low contrast.
  • Verify all interactive states and text using mid-tones like #8D8D8D have sufficient contrast.
  • Prioritize higher contrast for essential information, especially when using lighter gray combinations.

Recommended combinations

Urban Depth

Ideal for creating strong visual hierarchy, dark mode themes, or bold section separators.

#2A2A2A · #5A5A5A · #8D8D8D

Subtle Layers

Perfect for subtle background variations, card designs, or layered UI elements in a light theme.

#8D8D8D · #B4B4B4 · #D3D3D3

High Contrast

Excellent for primary text on a background, with the mid-tone #5A5A5A for secondary text or accents.

#2A2A2A · #D3D3D3 · #5A5A5A

CSS variables

:root {
  --stormy-urban-canvas-1: #5A5A5A;
  --stormy-urban-canvas-2: #8D8D8D;
  --stormy-urban-canvas-3: #B4B4B4;
  --stormy-urban-canvas-4: #D3D3D3;
  --stormy-urban-canvas-5: #2A2A2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-urban-canvas": {
        1: "#5A5A5A",
        2: "#8D8D8D",
        3: "#B4B4B4",
        4: "#D3D3D3",
        5: "#2A2A2A",
      }
    }
  }
}

Related searches

monochrome urban palettegrey minimalist designconcrete color schemestormy city colorstech dark mode palette

Palette colors

Hex values

Color 1#5A5A5A
·
Color 2#8D8D8D
·
Color 3#B4B4B4
·
Color 4#D3D3D3
·
Color 5#2A2A2A
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
3.3:1AA18
4.6:1AA
2.1:1Fail
2
2.1:1Fail
1.6:1Fail
2.2:1Fail
4.3:1AA18
3
3.3:1AA18
1.6:1Fail
1.4:1Fail
6.9:1AA
4
4.6:1AA
2.2:1Fail
1.4:1Fail
9.6:1AAA
5
2.1:1Fail
4.3:1AA18
6.9:1AA
9.6:1AAA

Similar palettes

More like Stormy Urban Canvas

View all monochrome
Concrete Bloom Grey
Concrete Jungle Canopy
Concrete Jungle Haze
Grayscale Metropolis Grid
Industrial Grunge Wall
Pavement Abstract Greys