Back to palettes

Palette

Urban Concrete Sky

A stark, neutral spectrum from the textured gray of city concrete to the overcast serenity of an urban sky.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Concrete Sky 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 Concrete Sky.

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

Data visualization

#757D84#9BB3C1#A5B2BC#C3D0DB#5C6F7D

Palette guide

How to use Urban Concrete Sky

Overview

The "Urban Concrete Sky" palette offers a sophisticated, monochromatic spectrum perfect for conveying a modern, minimalist aesthetic. Drawing inspiration from cityscapes, this collection ranges from the deep, textured grey of #757D84 to the ethereal, light blue-grey of #C3D0DB. With versatile shades like #9BB3C1, #A5B2BC, and the deeper #5C6F7D, designers and developers can craft clean, professional interfaces, branding, or architectural visualizations. This palette excels in creating a sense of calm and understated elegance, making it ideal for projects demanding a sleek, contemporary feel without sacrificing depth or visual interest. It's a foundation for timeless design.

Best used for

  • Minimalist branding and corporate identity
  • Modern web and mobile application UI/UX
  • Architectural visualization and interior design concepts
  • High-tech product design and packaging
  • Photography portfolios and art gallery websites
  • Editorial design with a clean, sophisticated aesthetic

Suggested color roles

primary

Use #757D84 as a strong foundational element for headers, primary buttons, or significant UI components, providing a solid, grounded feel.

secondary

Employ #9BB3C1 for secondary navigation, card backgrounds, or subtle graphical elements, offering a lighter contrast while maintaining cohesion.

accent

Leverage #5C6F7D for impactful accents, such as interactive states, key data points, or subtle outlines that require a deeper, more defined presence within the monochrome scheme.

background

Utilize #C3D0DB for clean, spacious backgrounds that provide excellent readability and a serene canvas for content, avoiding harsh pure white.

text

Apply #5C6F7D or #757D84 for primary body text and headings, ensuring strong contrast against lighter backgrounds. For secondary text, #9BB3C1 can be used sparingly, always checking readability.

Accessibility notes

  • Ensure sufficient contrast between text colors like #5C6F7D and background colors like #C3D0DB for WCAG AA compliance.
  • Avoid using #A5B2BC for small text on a #9BB3C1 background, as their proximity in luminance might reduce readability.
  • For interactive elements, provide clear focus states using a distinct shade like #757D84 to guide users.
  • Consider larger font sizes when using lighter text colors from the palette against mid-tone backgrounds to improve legibility.

Recommended combinations

Urban Base

Ideal for main content areas: light background, primary text, and a deep accent for calls to action or key information.

#C3D0DB · #757D84 · #5C6F7D

Sky Contrast

Excellent for layered UI elements like cards or modals, with a slightly darker base, a lighter secondary element, and a defining border or text.

#9BB3C1 · #A5B2BC · #757D84

Deep Monotone

Use for distinctive sections or hero banners: a dark primary color, a mid-tone for secondary elements, and the lightest shade for subtle highlights or text.

#5C6F7D · #9BB3C1 · #C3D0DB

CSS variables

:root {
  --urban-concrete-sky-1: #757D84;
  --urban-concrete-sky-2: #9BB3C1;
  --urban-concrete-sky-3: #A5B2BC;
  --urban-concrete-sky-4: #C3D0DB;
  --urban-concrete-sky-5: #5C6F7D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-sky": {
        1: "#757D84",
        2: "#9BB3C1",
        3: "#A5B2BC",
        4: "#C3D0DB",
        5: "#5C6F7D",
      }
    }
  }
}

Related searches

urban grey palettemodern minimalist colorsconcrete sky color schemeindustrial UI colorsserene grey blue palette

Palette colors

Hex values

Color 1#757D84
·
Color 2#9BB3C1
·
Color 3#A5B2BC
·
Color 4#C3D0DB
·
Color 5#5C6F7D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
1.9:1Fail
2.7:1Fail
1.2:1Fail
2
1.9:1Fail
1:1Fail
1.4:1Fail
2.4:1Fail
3
1.9:1Fail
1:1Fail
1.4:1Fail
2.4:1Fail
4
2.7:1Fail
1.4:1Fail
1.4:1Fail
3.3:1AA18
5
1.2:1Fail
2.4:1Fail
2.4:1Fail
3.3:1AA18

Similar palettes

More like Urban Concrete Sky

View all monochrome
Concrete Jungle Bloom
City Loft Minimal
City Steel Gleam
Grayscale Metropolis Grid
Industrial Chic Echo
Industrial Cityscape Grey