Back to palettes

Palette

Urban Concrete Dusk

A minimalist gradient capturing the serene transition from day to night in a modern city.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A4A4A#6C6C6C#9E9E9E#BDBDBD#E0E0E0

Palette guide

How to use Urban Concrete Dusk

Overview

The Urban Concrete Dusk palette is a minimalist gradient capturing the serene transition from day to night in a modern city. This collection of soft grays offers a sophisticated, calm, and understated aesthetic, perfect for designs that aim for elegance and tranquility. It features a medium dark gray `#4A4A4A`, a balanced medium gray `#6C6C6C`, and a versatile lighter medium gray `#9E9E9E`. The palette culminates with a clean light gray `#BDBDBD` and an airy very light gray `#E0E0E0`, creating a smooth, harmonious progression. It's an excellent choice for projects seeking a refined, subtle, and modern visual identity.

Best used for

  • Serene web backgrounds and interfaces
  • Elegant editorial and print design
  • Sophisticated app themes (light mode)
  • Luxury product branding
  • Fine art photography presentations
  • Minimalist interior design concepts

Suggested color roles

primary

Use `#4A4A4A` as a stable, grounding color for headlines, primary navigation, or prominent text, providing clear readability.

secondary

Apply `#6C6C6C` for body text, subheadings, or larger content blocks, offering a softer, yet substantial, presence.

accent

Introduce `#BDBDBD` for subtle highlights, interactive elements, or to create visual breaks, adding a touch of luminosity.

background

Utilize `#E0E0E0` for expansive, clean backgrounds, creating an airy and sophisticated canvas that enhances readability.

text

For dark text on light backgrounds, `#4A4A4A` provides optimal readability. For lighter text on darker elements, a crisp white or a very light gray like `#E0E0E0` works well.

Accessibility notes

  • Ensure `#4A4A4A` text on `#E0E0E0` background meets WCAG contrast standards for body text.
  • Verify that `#6C6C6C` text on `#E0E0E0` also maintains sufficient contrast for readability.
  • Avoid using `#BDBDBD` or `#9E9E9E` for small text elements against very light backgrounds due to potential low contrast.
  • When using multiple light grays, ensure enough visual distinction between them for users with low vision.

Recommended combinations

Dusk Interface

Ideal for clean, sophisticated web interfaces, providing clear text hierarchy on a light, serene background.

#E0E0E0 · #4A4A4A · #6C6C6C

Gradient Calm

Excellent for subtle background textures, overlays, or graphic elements that require a smooth, harmonious gradient effect.

#BDBDBD · #9E9E9E · #6C6C6C

Elegant Contrast

Perfect for headings, dividers, or prominent graphic elements that require a strong dark anchor with a refined light highlight.

#4A4A4A · #BDBDBD · #6C6C6C

CSS variables

:root {
  --urban-concrete-dusk-1: #4A4A4A;
  --urban-concrete-dusk-2: #6C6C6C;
  --urban-concrete-dusk-3: #9E9E9E;
  --urban-concrete-dusk-4: #BDBDBD;
  --urban-concrete-dusk-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-dusk": {
        1: "#4A4A4A",
        2: "#6C6C6C",
        3: "#9E9E9E",
        4: "#BDBDBD",
        5: "#E0E0E0",
      }
    }
  }
}

Related searches

concrete dusk paletteserene grey gradientmodern city greysminimalist dark lightelegant grayscale design

Palette colors

Hex values

Color 1#4A4A4A
·
Color 2#6C6C6C
·
Color 3#9E9E9E
·
Color 4#BDBDBD
·
Color 5#E0E0E0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.3:1AA18
4.7:1AA
6.7:1AA
2
1.7:1Fail
2:1Fail
2.8:1Fail
4:1AA18
3
3.3:1AA18
2:1Fail
1.4:1Fail
2:1Fail
4
4.7:1AA
2.8:1Fail
1.4:1Fail
1.4:1Fail
5
6.7:1AA
4:1AA18
2:1Fail
1.4:1Fail

Similar palettes

More like Urban Concrete Dusk

View all neutral
Urban Canvas Grey
Concrete Garden Grey
Concrete Jungle Bloom
Gritty Urban Canvas
Metro Grid Hues
Metro Grid Serene