Back to palettes

Palette

Cobblestone Street Muted

A sophisticated monochrome range of grays, echoing the timeless look of old cobblestone streets.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cobblestone Street Muted 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 Cobblestone Street Muted.

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

Data visualization

#7C7C7C#6A6A6A#595959#474747#363636

Palette guide

How to use Cobblestone Street Muted

Overview

The Cobblestone Street Muted palette offers a sophisticated monochrome range of grays, perfectly echoing the timeless, urban look of old cobblestone streets. This collection, featuring shades like the deep #363636, a balanced #595959, and the lighter #7C7C7C, is ideal for designers seeking a minimalist yet robust aesthetic. Its subtle shifts in tone provide depth without sacrificing simplicity, making it a versatile choice for contemporary and classic designs alike. Developers will appreciate the predictable harmony for UI elements, ensuring a clean, uncluttered user experience.

Best used for

  • Minimalist website designs
  • Architectural portfolios and renderings
  • High-end fashion branding
  • Urban-themed photography backdrops
  • Corporate and professional interfaces
  • Abstract art compositions

Suggested color roles

primary

Use #363636 for strong headings, navigation bars, or primary UI elements where a deep, grounding presence is needed.

secondary

Apply #474747 or #595959 for subheadings, secondary buttons, or background sections that require a subtle contrast.

accent

Employ #6A6A6A or #7C7C7C sparingly for hover states, subtle dividers, or icons to add a touch of gentle emphasis.

background

The lighter #7C7C7C offers a soft, neutral canvas, while a very light off-white or charcoal would complement this palette.

text

For optimal readability, use a dark gray like #363636 on lighter backgrounds, or white/near-white text on the darker shades.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing lighter grays like #7C7C7C with mid-tones.
  • Use a very dark text color (e.g., black or #363636) on any of the lighter grays for body text readability.
  • This palette's low contrast between adjacent shades means it's best for large design elements or decorative use.
  • Consider using a stark white or pure black for important call-to-action text against these grays.

Recommended combinations

Urban Base

Provides a strong, grounded foundation for dark mode interfaces or sophisticated backgrounds.

#363636 · #474747 · #595959

Subtle Depth

Ideal for creating depth and visual hierarchy in content blocks or card designs without harsh lines.

#474747 · #6A6A6A · #7C7C7C

Light Accent

Perfect for subtle UI elements, borders, or secondary information where a delicate presence is desired.

#595959 · #6A6A6A · #7C7C7C

CSS variables

:root {
  --cobblestone-street-muted-1: #7C7C7C;
  --cobblestone-street-muted-2: #6A6A6A;
  --cobblestone-street-muted-3: #595959;
  --cobblestone-street-muted-4: #474747;
  --cobblestone-street-muted-5: #363636;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobblestone-street-muted": {
        1: "#7C7C7C",
        2: "#6A6A6A",
        3: "#595959",
        4: "#474747",
        5: "#363636",
      }
    }
  }
}

Related searches

monochrome grey paletteurban design colorsminimalist grey schemearchitectural color palettestone texture colors

Palette colors

Hex values

Color 1#7C7C7C
·
Color 2#6A6A6A
·
Color 3#595959
·
Color 4#474747
·
Color 5#363636
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
2.2:1Fail
2.9:1Fail
2
1.3:1Fail
1.3:1Fail
1.7:1Fail
2.2:1Fail
3
1.7:1Fail
1.3:1Fail
1.3:1Fail
1.7:1Fail
4
2.2:1Fail
1.7:1Fail
1.3:1Fail
1.3:1Fail
5
2.9:1Fail
2.2:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Cobblestone Street Muted

View all monochrome
Ancient Ruin Stone
Ancient Stone Whisper
City Grid Graphite
City Loft Grey
Metropolis Gleam
Monochromatic Stone Wall