Back to palettes

Palette

Graphite Cityscape

A sophisticated and stark palette reflecting the structural lines and metallic sheen of a modern city.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Graphite Cityscape 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 Graphite Cityscape.

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

Data visualization

#36454F#6A808C#B0C4DE#1C1C1C#F8F8FF

Palette guide

How to use Graphite Cityscape

Overview

The Graphite Cityscape palette captures the essence of a modern urban environment, blending sophisticated grays and cool blues to reflect architectural lines and metallic sheens. This collection moves from the deep, grounding #1C1C1C black and #36454F charcoal to the airy #B0C4DE light blue-gray, with #6A808C providing a balanced mid-tone. It's perfect for designers aiming to convey professionalism, strength, and a sleek, minimalist aesthetic. This palette offers a robust foundation for corporate branding, tech interfaces, or any project requiring a clean, contemporary, and authoritative visual identity.

Best used for

  • Corporate website design
  • Tech product interfaces
  • Modern architectural presentations
  • Urban lifestyle branding
  • Professional print materials
  • Automotive industry design

Suggested color roles

primary

Use #36454F as a dominant color for main sections or typography, offering a sophisticated and stable presence.

secondary

Apply #6A808C for subheadings, secondary information, or UI elements, providing a softer, approachable gray.

accent

Employ #B0C4DE for subtle highlights, interactive states, or background accents, adding a touch of lightness and modernity.

background

Utilize #F8F8FF as a clean, near-white background to maximize readability and create an open, airy feel.

text

For primary text on light backgrounds, #1C1C1C or #36454F offers excellent contrast. For text on darker shades, use #F8F8FF or #B0C4DE.

Accessibility notes

  • The contrast between #1C1C1C text and #F8F8FF background is excellent for readability.
  • Ensure #B0C4DE is not used for small text on a very light background, as contrast may be insufficient.
  • Check contrast ratios carefully when pairing #6A808C with #36454F for text elements.
  • For interactive elements, ensure distinct visual cues, especially when using similar grays like #36454F and #1C1C1C.

Recommended combinations

Modern Foundation

Strong dark base with charcoal elements and a clean, bright background.

#1C1C1C · #36454F · #F8F8FF

Sleek Interface

Light background with mid-tone gray text and a subtle light blue-gray for UI accents.

#F8F8FF · #6A808C · #B0C4DE

Urban Contrast

Charcoal background with light blue-gray elements and stark black for emphasis or text.

#36454F · #B0C4DE · #1C1C1C

CSS variables

:root {
  --graphite-cityscape-1: #36454F;
  --graphite-cityscape-2: #6A808C;
  --graphite-cityscape-3: #B0C4DE;
  --graphite-cityscape-4: #1C1C1C;
  --graphite-cityscape-5: #F8F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "graphite-cityscape": {
        1: "#36454F",
        2: "#6A808C",
        3: "#B0C4DE",
        4: "#1C1C1C",
        5: "#F8F8FF",
      }
    }
  }
}

Related searches

monochrome urban palettemodern gray colorsarchitectural color schemesleek industrial designcool gray branding

Palette colors

Hex values

Color 1#36454F
·
Color 2#6A808C
·
Color 3#B0C4DE
·
Color 4#1C1C1C
·
Color 5#F8F8FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
5.6:1AA
1.7:1Fail
9.4:1AAA
2
2.4:1Fail
2.3:1Fail
4.1:1AA18
3.9:1AA18
3
5.6:1AA
2.3:1Fail
9.6:1AAA
1.7:1Fail
4
1.7:1Fail
4.1:1AA18
9.6:1AAA
16.1:1AAA
5
9.4:1AAA
3.9:1AA18
1.7:1Fail
16.1:1AAA

Similar palettes

More like Graphite Cityscape

View all monochrome
Concrete Jungle Hue
Monochrome Cityscape
Urban Concrete Sleek
Brushed Steel Aura
City Grayscale View
City Steel Gleam