Back to palettes

Palette

Urban Concrete Oasis

A sophisticated spectrum of urban greys, perfect for a sleek, contemporary feel.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#5F6A6E#8C969B#C5CDD0#DBE3E5

Palette guide

How to use Urban Concrete Oasis

Overview

The Urban Concrete Oasis palette offers a sophisticated spectrum of five urban greys, perfect for achieving a sleek, contemporary, and minimalist aesthetic. Ranging from the deep, grounding #36454F to the airy, almost white #DBE3E5, this neutral collection provides exceptional versatility for designers and developers. Its refined tones, including the balanced #8C969B, evoke modern architecture and industrial elegance, making it ideal for projects requiring a sense of calm strength and understated luxury. Leverage these greys to build robust, scalable designs with inherent visual harmony and a professional finish that stands the test of time.

Best used for

  • Modern architectural firm branding and websites
  • Minimalist UI/UX design for tech applications
  • High-end interior design mood boards and visualizations
  • Corporate reports and professional presentations
  • E-commerce platforms for luxury goods or industrial products
  • Photography portfolio websites with a focus on urban landscapes

Suggested color roles

primary

#36454F – Ideal for prominent headings, primary buttons, and strong brand elements where a deep, authoritative presence is desired.

secondary

#5F6A6E – Excellent for subheadings, secondary navigation, and content blocks, offering a slightly softer yet still impactful visual anchor.

accent

#C5CDD0 – Best used sparingly for subtle highlights, interactive states, or decorative lines to add a touch of understated sophistication without overpowering.

background

#DBE3E5 – A light, airy choice for main content areas, large backgrounds, and cards, providing a clean canvas that enhances readability.

text

#36454F or a dark charcoal/black – For body text and critical information, ensuring maximum readability, especially against lighter backgrounds like #DBE3E5 or #C5CDD0.

Accessibility notes

  • Ensure sufficient contrast between #36454F text on #DBE3E5 background to meet WCAG AA standards for readability.
  • Avoid placing #C5CDD0 text directly on #DBE3E5, as their low contrast will hinder accessibility for many users.
  • Use #5F6A6E or #36454F for critical UI elements like buttons or links when placed on lighter backgrounds such as #DBE3E5.
  • When using mid-tones like #8C969B for backgrounds, opt for either the darkest (#36454F) or lightest (#DBE3E5) for text to maintain clear contrast.

Recommended combinations

Deep Contrast

Perfect for high-contrast interfaces; #DBE3E5 as background, #36454F for text/primary elements, #8C969B for secondary accents.

#36454F · #DBE3E5 · #8C969B

Subtle Harmony

Creates a soft, minimalist look; #DBE3E5 for main background, #C5CDD0 for cards/sections, #5F6A6E for subdued text.

#5F6A6E · #C5CDD0 · #DBE3E5

Architectural Depth

Ideal for layered designs; #36454F as base, #5F6A6E for content panels, #8C969B for hover states or borders.

#36454F · #5F6A6E · #8C969B

CSS variables

:root {
  --urban-concrete-oasis-1: #36454F;
  --urban-concrete-oasis-2: #5F6A6E;
  --urban-concrete-oasis-3: #8C969B;
  --urban-concrete-oasis-4: #C5CDD0;
  --urban-concrete-oasis-5: #DBE3E5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-oasis": {
        1: "#36454F",
        2: "#5F6A6E",
        3: "#8C969B",
        4: "#C5CDD0",
        5: "#DBE3E5",
      }
    }
  }
}

Related searches

modern grey color schemesminimalist website palettearchitectural color inspirationurban design color paletteneutral UI colors

Palette colors

Hex values

Color 1#36454F
·
Color 2#5F6A6E
·
Color 3#8C969B
·
Color 4#C5CDD0
·
Color 5#DBE3E5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.3:1AA18
6.1:1AA
7.6:1AAA
2
1.8:1Fail
1.8:1Fail
3.4:1AA18
4.3:1AA18
3
3.3:1AA18
1.8:1Fail
1.9:1Fail
2.3:1Fail
4
6.1:1AA
3.4:1AA18
1.9:1Fail
1.2:1Fail
5
7.6:1AAA
4.3:1AA18
2.3:1Fail
1.2:1Fail

Similar palettes

More like Urban Concrete Oasis

View all neutral
Concrete Urbanity Calm
Minimalist Concrete Echo
Urban Canvas Grey
Concrete Jungle Bloom
Gritty Urban Canvas
Metro Grid Hues