Back to palettes

Palette

Urban Echo Stone

A sleek, monochromatic scale reflecting the cool, composed textures of modern urban architecture and quiet cityscapes.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Echo Stone 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 Echo Stone.

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

Data visualization

#5A5A5A#8F8F8F#B8B8B8#E0E0E0#3B3B3B

Palette guide

How to use Urban Echo Stone

Overview

The Urban Echo Stone palette is a sleek, monochromatic collection that embodies the cool, composed textures of modern urban architecture and quiet cityscapes. Spanning from the deep, solid #3B3B3B to the crisp, light #E0E0E0, this palette offers a refined and timeless aesthetic. Developers will find it exceptionally useful for building interfaces that demand clarity, sophistication, and a strong sense of structure. Designers can leverage its subtle gradations, including #5A5A5A and #8F8F8F, to create depth and visual interest without relying on overt color, making it perfect for high-end branding, minimalist web designs, and applications where elegance and focus are paramount.

Best used for

  • Luxury real estate websites
  • High-fashion e-commerce
  • Minimalist portfolio sites
  • Corporate software applications
  • Architectural design studios
  • Upscale product packaging

Suggested color roles

primary

#3B3B3B serves as the deep, grounding primary color, ideal for main navigation, footers, or strong brand elements.

secondary

#5A5A5A provides a substantial secondary tone, suitable for important text, section headers, or prominent UI components.

accent

#8F8F8F can be used for subtle interactive states, borders, or to delineate content areas, maintaining the sophisticated monochrome feel.

background

#E0E0E0 offers a clean, bright canvas, ensuring excellent readability for darker text and a modern, airy aesthetic.

text

For dark text on light backgrounds, use #3B3B3B or #5A5A5A. For light text on dark backgrounds, #E0E0E0 or a crisp white is highly recommended.

Accessibility notes

  • Ensure #3B3B3B text on #E0E0E0 background meets WCAG AA contrast standards; it generally performs well.
  • Avoid using #B8B8B8 or #8F8F8F for small text on #E0E0E0 backgrounds due to potential low contrast.
  • Use #E0E0E0 for text on #3B3B3B and #5A5A5A backgrounds to ensure optimal readability.
  • Differentiate interactive elements with sufficient contrast or additional visual cues like underlines.

Recommended combinations

Monochrome Foundation

Excellent for main layouts, providing a strong dark anchor with a bright, readable content area.

#3B3B3B · #E0E0E0 · #5A5A5A

Subtle Depth

Ideal for creating layered effects in cards or panels, offering gentle visual separation.

#E0E0E0 · #B8B8B8 · #8F8F8F

Clean Interactions

Perfect for buttons and form fields, providing clear states with good contrast and a polished look.

#5A5A5A · #3B3B3B · #E0E0E0

CSS variables

:root {
  --urban-echo-stone-1: #5A5A5A;
  --urban-echo-stone-2: #8F8F8F;
  --urban-echo-stone-3: #B8B8B8;
  --urban-echo-stone-4: #E0E0E0;
  --urban-echo-stone-5: #3B3B3B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-echo-stone": {
        1: "#5A5A5A",
        2: "#8F8F8F",
        3: "#B8B8B8",
        4: "#E0E0E0",
        5: "#3B3B3B",
      }
    }
  }
}

Related searches

sleek gray color palettemonochromatic urban designmodern neutral website colorsstone inspired color schemerefined gray UI palette

Palette colors

Hex values

Color 1#5A5A5A
·
Color 2#8F8F8F
·
Color 3#B8B8B8
·
Color 4#E0E0E0
·
Color 5#3B3B3B
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
3.5:1AA18
5.2:1AA
1.6:1Fail
2
2.1:1Fail
1.6:1Fail
2.4:1Fail
3.5:1AA18
3
3.5:1AA18
1.6:1Fail
1.5:1Fail
5.6:1AA
4
5.2:1AA
2.4:1Fail
1.5:1Fail
8.5:1AAA
5
1.6:1Fail
3.5:1AA18
5.6:1AA
8.5:1AAA

Similar palettes

More like Urban Echo Stone

View all monochrome
Urban Stone Path
Concrete Jungle Bloom
Grayscale Metropolis Grid
Monochrome City Grid
Urban Cement Edge
Urban Concrete Flow