Palette

Greige Urban Blend

A sophisticated neutral palette, merging warm greys with cool beiges for a modern, grounded feel.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Greige Urban Blend 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 Greige Urban Blend.

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

Data visualization

#696969#808080#A9A9A9#C0C0C0#D3D3D3

Palette guide

How to use Greige Urban Blend

Overview

The Greige Urban Blend palette offers a sophisticated spectrum of neutral tones, merging warm grays with cool beiges to create a modern, grounded aesthetic. Ranging from the deep, anchoring #696969 to the airy #D3D3D3, with versatile mid-tones like #808080 and #A9A9A9, this collection is perfect for projects demanding a sleek, minimalist, and contemporary feel. Designers and developers will find these greige shades ideal for architectural visualizations, tech interfaces, or sophisticated branding. It's an excellent choice for conveying professionalism, stability, and a refined urban sensibility across various digital and print applications, ensuring clarity and modern elegance.

Best used for

Modern architecture firms
Tech startups and corporate branding
Minimalist product design
Urban photography portfolios
Contemporary art galleries
Sophisticated web applications

Suggested color roles

primary

Use #696969 as a deep, foundational primary for headers, important text, or strong brand elements.

secondary

Apply #808080 for subheadings, secondary buttons, or larger content blocks, offering a versatile mid-grey.

accent

Employ #A9A9A9 as a subtle highlight for interactive elements, delicate details, or soft visual cues.

background

Utilize #D3D3D3 for light, clean main content backgrounds, or #C0C0C0 for a slightly richer, professional canvas.

text

For optimal contrast, use black, dark charcoal, or #696969 for text on lighter backgrounds.

Accessibility notes

Ensure #696969 text on #D3D3D3 backgrounds provides sufficient WCAG AA contrast.
Avoid using #D3D3D3 or #C0C0C0 for small text without a strong dark background.
When pairing mid-tones like #A9A9A9 with similar backgrounds, verify readability, especially for body text.
Always use contrast checkers to ensure all interactive elements and key information are accessible.

Recommended combinations

Urban Concrete

Creates a clean, modern base with strong contrast for text and prominent design elements.

#D3D3D3 · #808080 · #696969

Sleek Layers

Ideal for subtle background patterns, overlays, or sections that require a gentle, professional transition.

#C0C0C0 · #A9A9A9 · #808080

Grounded Modern

Perfect for creating depth and hierarchy, with a strong dark base supporting lighter informational elements.

#696969 · #A9A9A9 · #C0C0C0

CSS variables

:root {
  --greige-urban-blend-1: #696969;
  --greige-urban-blend-2: #808080;
  --greige-urban-blend-3: #A9A9A9;
  --greige-urban-blend-4: #C0C0C0;
  --greige-urban-blend-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "greige-urban-blend": {
        1: "#696969",
        2: "#808080",
        3: "#A9A9A9",
        4: "#C0C0C0",
        5: "#D3D3D3",
      }
    }
  }
}

Hex values

Color 1#696969

Color 2#808080

Color 3#A9A9A9

Color 4#C0C0C0

Color 5#D3D3D3

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

3:1AA18

3.7:1AA18

1.4:1Fail

1.7:1Fail

2.2:1Fail

2.6:1Fail

2.3:1Fail

1.7:1Fail

1.3:1Fail

1.6:1Fail

3:1AA18

2.2:1Fail

1.3:1Fail

1.2:1Fail

3.7:1AA18

2.6:1Fail

1.6:1Fail

1.2:1Fail

Similar palettes

More like Greige Urban Blend

Architectural Concrete Edge

Bare Concrete Stillness