Palette

Urban Grid Shift

A modern grey palette reflecting the clean lines and cool tones of an urban cityscape.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Grid Shift 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 Grid Shift.

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

Data visualization

#4F5D75#BFCAD1#2D3142#8E9DA4#6A7D9A

Palette guide

How to use Urban Grid Shift

Overview

The Urban Grid Shift palette presents a modern grey collection reflecting the clean lines and cool tones of an urban cityscape. This unique range includes the deep blue-grey #2D3142, the versatile #4F5D75, the lighter #6A7D9A, the balanced #8E9DA4, and the very light #BFCAD1. Designers and developers will find this palette ideal for creating sophisticated, cool-toned designs that evoke a sense of calm and professionalism. The subtle blue undertones add a unique character to the traditional grey, offering a refined aesthetic with excellent opportunities for visual depth and clear hierarchy.

Best used for

Corporate branding and identity
Modern technology websites
Architectural firm presentations
Clean user interface designs
Professional services marketing
Data visualization dashboards

Suggested color roles

primary

#2D3142 - A deep, cool blue-grey that serves as a strong, authoritative primary color for headings, backgrounds, or dominant UI elements.

secondary

#4F5D75 - A versatile medium blue-grey, ideal for subheadings, navigation, or secondary content areas, providing a harmonious contrast.

accent

#BFCAD1 - A very light, cool grey, perfect for subtle highlights, interactive states (hover/active), or delicate separators, adding crispness.

background

#8E9DA4 - A balanced medium-light cool grey, providing a serene and professional canvas for content, ensuring good readability for darker text.

text

#2D3142 - The deep blue-grey offers excellent legibility and a sophisticated tone for body text, especially against lighter backgrounds like #BFCAD1 or #8E9DA4.

Accessibility notes

Ensure #2D3142 text on #BFCAD1 or #8E9DA4 backgrounds meets WCAG AA contrast standards for readability.
Avoid using #6A7D9A text on #8E9DA4 backgrounds for critical information due to potentially low contrast.
Use #BFCAD1 for text only against very dark backgrounds such as #2D3142 or #4F5D75 to maintain legibility.
Verify that interactive elements have clear focus states beyond color, especially with subtle tonal variations.

Recommended combinations

Sophisticated Contrast

Ideal for a professional look, using dark blue-grey text on a light background, with a mid-tone for secondary elements.

#2D3142 · #BFCAD1 · #4F5D75

Cool Depth

Creates a layered, cool-toned effect suitable for data visualization or complex interfaces, using harmonious blue-greys for depth.

#8E9DA4 · #4F5D75 · #6A7D9A

Clean & Modern

Excellent for a sharp, contemporary aesthetic, using the light grey as a canvas, deep blue-grey for headings, and a mid-tone for body text.

#BFCAD1 · #2D3142 · #4F5D75

CSS variables

:root {
  --urban-grid-shift-1: #4F5D75;
  --urban-grid-shift-2: #BFCAD1;
  --urban-grid-shift-3: #2D3142;
  --urban-grid-shift-4: #8E9DA4;
  --urban-grid-shift-5: #6A7D9A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grid-shift": {
        1: "#4F5D75",
        2: "#BFCAD1",
        3: "#2D3142",
        4: "#8E9DA4",
        5: "#6A7D9A",
      }
    }
  }
}

Hex values

Color 1#4F5D75

Color 2#BFCAD1

Color 3#2D3142

Color 4#8E9DA4

Color 5#6A7D9A

Accessibility

Contrast checker

4:1AA18

1.9:1Fail

2.4:1Fail

1.6:1Fail

4:1AA18

7.7:1AAA

1.7:1Fail

2.5:1Fail

1.9:1Fail

7.7:1AAA

4.6:1AA

3.1:1AA18

2.4:1Fail

1.7:1Fail

4.6:1AA

1.5:1Fail

1.6:1Fail

2.5:1Fail

3.1:1AA18

1.5:1Fail

Similar palettes

More like Urban Grid Shift

Monochrome Granite Edge

Urban Concrete Echo