Palette

Eminent City Style

A refined collection of greys, offering a chic and understated elegance for modern, sophisticated spaces.

neutralelegant5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Eminent City Style 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 Eminent City Style.

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

Data visualization

#3E3E3E#707070#A0A0A0#D0D0D0#F5F5F5

Palette guide

How to use Eminent City Style

Overview

The Eminent City Style palette offers a sophisticated range of cool greys, from the deep charcoal of #3E3E3E to the nearly white #F5F5F5. This collection embodies modern minimalism and understated elegance, providing a versatile foundation for professional and chic designs. It's ideal for designers seeking to create a clean, structured, and contemporary aesthetic across various applications, offering timeless appeal and excellent readability.

Best used for

Corporate branding and identity
Modern architecture portfolios
Minimalist website design
Professional presentations and reports
Tech product user interfaces
Sophisticated interior design

Suggested color roles

primary

Use #3E3E3E as a strong, grounding dark grey for headers, main text, or robust UI elements.

secondary

Apply #707070 for balanced, supportive mid-greys in subheadings, body text, or secondary content areas.

accent

Incorporate #D0D0D0 as a subtle, light highlight for borders, dividers, or very soft interactive states.

background

Utilize #F5F5F5 for clean, airy backgrounds that enhance readability and a sense of openness.

text

For light backgrounds like #F5F5F5, use black or #3E3E3E. For dark backgrounds, opt for white or #D0D0D0.

Accessibility notes

Ensure strong contrast for text on #F5F5F5, using a dark grey like #3E3E3E for optimal readability.
Avoid using #D0D0D0 and #F5F5F5 for small text against each other due to insufficient contrast.
Check icon readability on mid-tones like #A0A0A0 to ensure clear visibility.
Use a darker grey for text on #D0D0D0 to meet accessibility guidelines for larger text.

Recommended combinations

Urban Depth

Creates a strong, professional foundation for headers, key information, and structural elements.

#3E3E3E · #707070 · #A0A0A0

Clean Minimalism

Provides a light and airy feel for backgrounds, content areas, and subtle UI elements.

#F5F5F5 · #D0D0D0 · #A0A0A0

Modern Contrast

Offers high contrast for excellent readability and clear hierarchy in user interfaces and documents.

#3E3E3E · #F5F5F5 · #707070

CSS variables

:root {
  --eminent-city-style-1: #3E3E3E;
  --eminent-city-style-2: #707070;
  --eminent-city-style-3: #A0A0A0;
  --eminent-city-style-4: #D0D0D0;
  --eminent-city-style-5: #F5F5F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "eminent-city-style": {
        1: "#3E3E3E",
        2: "#707070",
        3: "#A0A0A0",
        4: "#D0D0D0",
        5: "#F5F5F5",
      }
    }
  }
}

Hex values

Color 1#3E3E3E

Color 2#707070

Color 3#A0A0A0

Color 4#D0D0D0

Color 5#F5F5F5

Accessibility

Contrast checker

2.2:1Fail

4.1:1AA18

6.9:1AA

9.8:1AAA

2.2:1Fail

1.9:1Fail

3.2:1AA18

4.5:1AA

4.1:1AA18

1.9:1Fail

1.7:1Fail

2.4:1Fail

6.9:1AA

3.2:1AA18

1.7:1Fail

1.4:1Fail

9.8:1AAA

4.5:1AA

2.4:1Fail

1.4:1Fail

Similar palettes

More like Eminent City Style

Ancient Calligraphy Ink

Ancient Marble Ruins

Ancient Marble Sculpture