Back to palettes

Palette

Cobblestone Alley Night

A mysterious urban palette of deep greys, reminiscent of ancient cobblestones under a moonlit street lamp.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cobblestone Alley Night 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 Alley Night.

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

Data visualization

#36454F#5D6D7E#85929E#D4AC0D#A57610

Palette guide

How to use Cobblestone Alley Night

Overview

The Cobblestone Alley Night palette offers a mysterious urban collection of deep greys, reminiscent of ancient cobblestones under a moonlit street lamp, accented by warm gold. With hues ranging from the profound #36454F to the bright #D4AC0D, this palette is perfect for designs that evoke sophistication, history, and a touch of nocturnal allure. Designers can leverage #5D6D7E as a strong primary, while #85929E offers a versatile mid-tone for various applications. The vibrant #A57610 provides a compelling highlight. This palette is ideal for projects that aim for a sophisticated, dark, and immersive visual experience, from luxury branding to atmospheric digital interfaces.

Best used for

  • Luxury fashion and accessory branding
  • Historical fiction book covers or game aesthetics
  • High-end restaurant or bar interior design concepts
  • Urban photography portfolios
  • Event branding (e.g., galas, mysterious parties)
  • Premium automotive brand visuals

Suggested color roles

primary

#5D6D7E - A deep, sophisticated grey-blue that serves as a commanding primary, ideal for main headings, brand logos, or core UI elements, conveying elegance.

secondary

#85929E - A lighter, more visible grey, suitable for subheadings, secondary navigation, or supporting graphics, adding subtle contrast.

accent

#D4AC0D - A bright, shimmering gold that provides a striking highlight, perfect for interactive elements, key data points, or subtle background textures, evoking lamplight.

background

#36454F - An intensely dark, almost black-grey, creating an immersive, sophisticated backdrop that enhances the luminosity of lighter greys and the gold accent.

text

For text on #36454F or #5D6D7E, use #D4AC0D or white for optimal readability. For text on #D4AC0D, use black or #36454F.

Accessibility notes

  • Ensure high contrast when placing bright gold text, such as #D4AC0D, on darker greys like #36454F or #5D6D7E.
  • Avoid using #85929E for small text on #5D6D7E without verifying WCAG AA compliance due to similar luminance values.
  • The bright #D4AC0D offers excellent contrast against all darker greys in the palette for interactive elements.
  • When using #D4AC0D as a background, ensure text is in a contrasting dark color like black or #36454F to maintain legibility.

Recommended combinations

Moonlit Path

Creates a dramatic, high-contrast interface; #36454F for background, #85929E for content, #D4AC0D for luminous highlights/CTAs.

#36454F · #85929E · #D4AC0D

Golden Glow

Use #5D6D7E for main sections, #A57610 for supporting elements, and #D4AC0D for vibrant accents or delicate details.

#5D6D7E · #A57610 · #D4AC0D

Alley Shadows

Ideal for creating depth through gradients or layered UI, moving from the deepest grey to a rich, true grey.

#36454F · #5D6D7E · #85929E

CSS variables

:root {
  --cobblestone-alley-night-1: #36454F;
  --cobblestone-alley-night-2: #5D6D7E;
  --cobblestone-alley-night-3: #85929E;
  --cobblestone-alley-night-4: #D4AC0D;
  --cobblestone-alley-night-5: #A57610;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobblestone-alley-night": {
        1: "#36454F",
        2: "#5D6D7E",
        3: "#85929E",
        4: "#D4AC0D",
        5: "#A57610",
      }
    }
  }
}

Related searches

dark grey and gold palettemysterious urban color schemeelegant night brandingcobblestone aesthetic colorsluxury dark UI design

Palette colors

Hex values

Color 1#36454F
·
Color 2#5D6D7E
·
Color 3#85929E
·
Color 4#D4AC0D
·
Color 5#A57610
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.1:1AA18
4.6:1AA
2.5:1Fail
2
1.9:1Fail
1.7:1Fail
2.5:1Fail
1.3:1Fail
3
3.1:1AA18
1.7:1Fail
1.5:1Fail
1.3:1Fail
4
4.6:1AA
2.5:1Fail
1.5:1Fail
1.9:1Fail
5
2.5:1Fail
1.3:1Fail
1.3:1Fail
1.9:1Fail

Similar palettes

More like Cobblestone Alley Night

View all dark
Metropolis Midnight Shine
Art Deco Evening
Art Deco Metropolis
Art Deco Symmetry
Celestial Night Garden
Gothic Manor Elegance