Back to palettes

Palette

Urban Cement Canvas

A raw, modern range of cool grays, like fresh concrete ready for an urban artist's touch.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5E616C#7C808E#9CA0AE#BCC0CE#DCDDEE

Palette guide

How to use Urban Cement Canvas

Overview

The "Urban Cement Canvas" palette presents a raw, modern range of cool grays, evoking the clean lines and solid feel of fresh concrete. This minimalist scheme progresses from the deep #5E616C (Dark Slate Gray) through #7C808E (Cadet Gray), #9CA0AE (Light Slate Gray), and #BCC0CE (Silver Gray), culminating in the airy #DCDDEE (Light Periwinkle). It's an impeccable choice for designers aiming to create sophisticated, architectural, and uncluttered digital or physical spaces. The subtle cool undertones provide a professional yet approachable aesthetic, perfect for technology, art, or contemporary lifestyle brands seeking a refined and spacious feel.

Best used for

  • Modern architectural firm websites
  • Minimalist UI/UX design for web and mobile apps
  • High-end product showcases, especially electronics
  • Art gallery or museum digital platforms
  • Corporate identity and branding
  • Interior design visualization and mood boards

Suggested color roles

primary

#5E616C (Dark Slate Gray) - Ideal for main headers, navigation, and foundational elements, establishing a solid, modern base.

secondary

#7C808E (Cadet Gray) - Excellent for subheadings, background panels, or large content sections, providing a smooth visual flow.

accent

#9CA0AE (Light Slate Gray) - Use for interactive elements like buttons, borders, or subtle highlights, offering gentle contrast.

background

#DCDDEE (Light Periwinkle) - A very light, airy background that enhances readability and provides a clean, expansive feel, perfect for main content areas.

text

#5E616C (Dark Slate Gray) for dark text on lighter backgrounds, or a crisp white like #FFFFFF for light text on #5E616C or #7C808E.

Accessibility notes

  • Ensure sufficient contrast when using #9CA0AE or #BCC0CE for text on the #DCDDEE background.
  • Prioritize #5E616C or #7C808E for all critical text against lighter palette colors.
  • Avoid using #DCDDEE for small text on similar light backgrounds due to potential low contrast.
  • Test button and link colors to ensure they stand out adequately from their backgrounds.

Recommended combinations

Architectural Base

Create depth and hierarchy in structural elements or layered UI components.

#5E616C · #7C808E · #9CA0AE

Clean Readability

Optimal for text and background pairings, with the mid-tone for subtle accents or dividers.

#5E616C · #DCDDEE · #BCC0CE

Modern Highlight

Use for hover states, active menu items, or progress indicators, providing a subtle visual cue.

#7C808E · #BCC0CE · #DCDDEE

CSS variables

:root {
  --urban-cement-canvas-1: #5E616C;
  --urban-cement-canvas-2: #7C808E;
  --urban-cement-canvas-3: #9CA0AE;
  --urban-cement-canvas-4: #BCC0CE;
  --urban-cement-canvas-5: #DCDDEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-cement-canvas": {
        1: "#5E616C",
        2: "#7C808E",
        3: "#9CA0AE",
        4: "#BCC0CE",
        5: "#DCDDEE",
      }
    }
  }
}

Related searches

cool grey color schemesmodern concrete paletteminimalist architectural colorsurban grey designlight periwinkle grey palette

Palette colors

Hex values

Color 1#5E616C
·
Color 2#7C808E
·
Color 3#9CA0AE
·
Color 4#BCC0CE
·
Color 5#DCDDEE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.4:1Fail
3.4:1AA18
4.6:1AA
2
1.6:1Fail
1.5:1Fail
2.2:1Fail
2.9:1Fail
3
2.4:1Fail
1.5:1Fail
1.4:1Fail
1.9:1Fail
4
3.4:1AA18
2.2:1Fail
1.4:1Fail
1.4:1Fail
5
4.6:1AA
2.9:1Fail
1.9:1Fail
1.4:1Fail

Similar palettes

More like Urban Cement Canvas

View all neutral
Industrial Chic Loft
Urban Loft Concrete
Architectural Slate Gray
City Concrete Grind
Concrete Garden Grey
Concrete Grid Lines