Back to palettes

Palette

Cobblestone Street Mist

Cool, subdued grays and muted blues reflecting a quiet, cobblestone street on a misty morning.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3D3A3B#6C6B6B#99A3A4#B3B3B3#D1D5D8

Palette guide

How to use Cobblestone Street Mist

Overview

The Cobblestone Street Mist palette features cool, subdued grays and muted blues, reflecting a quiet, cobblestone street on a misty morning. With hues ranging from the deep #3D3A3B to the airy #D1D5D8, this palette is perfect for designs that evoke calmness, minimalism, and a touch of urban sophistication. Designers can leverage #6C6B6B as a strong primary, while #99A3A4 offers a versatile mid-tone for various applications. The brightest hue, #B3B3B3, provides a compelling highlight. This palette is ideal for projects that aim for a clean, understated, and professional visual experience, from corporate branding to minimalist digital interfaces.

Best used for

  • Minimalist corporate branding
  • Architectural and urban development websites
  • Modern art gallery aesthetics
  • Tech startup interfaces (clean design)
  • Photography portfolios (monochrome focus)
  • Luxury interior design (industrial chic)

Suggested color roles

primary

#6C6B6B - A sophisticated mid-grey that serves as a commanding primary, ideal for main headings, brand logos, or core UI elements, conveying stability.

secondary

#99A3A4 - A lighter, more visible grey with a hint of blue, suitable for subheadings, secondary navigation, or supporting graphics, adding subtle contrast.

accent

#D1D5D8 - A very light, almost white grey-blue that offers a crisp highlight, perfect for interactive elements, small icons, or subtle background textures, evoking mist.

background

#3D3A3B - An intensely dark, almost black-grey, creating an immersive, sophisticated backdrop that enhances the luminosity of lighter greys.

text

For text on #3D3A3B or #6C6B6B, use #D1D5D8 or white for optimal readability. For text on #D1D5D8, use black or #3D3A3B.

Accessibility notes

  • Ensure high contrast when placing light text, such as #D1D5D8, on darker greys like #3D3A3B or #6C6B6B.
  • Avoid using #B3B3B3 for small text on #99A3A4 without verifying WCAG AA compliance due to similar luminance values.
  • The brightest hue, #D1D5D8, offers excellent contrast against all darker greys in the palette for interactive elements.
  • When using #D1D5D8 as a background, ensure text is in a contrasting dark color like black or #3D3A3B to maintain legibility.

Recommended combinations

Misty Morning

Creates a calm, high-contrast interface; #3D3A3B for background, #99A3A4 for content, #D1D5D8 for bright highlights/CTAs.

#3D3A3B · #99A3A4 · #D1D5D8

Stone Path

Use #6C6B6B for main sections, #B3B3B3 for supporting elements, and #D1D5D8 for vibrant accents or delicate details.

#6C6B6B · #B3B3B3 · #D1D5D8

Urban Fog

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

#3D3A3B · #6C6B6B · #99A3A4

CSS variables

:root {
  --cobblestone-street-mist-1: #3D3A3B;
  --cobblestone-street-mist-2: #6C6B6B;
  --cobblestone-street-mist-3: #99A3A4;
  --cobblestone-street-mist-4: #B3B3B3;
  --cobblestone-street-mist-5: #D1D5D8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobblestone-street-mist": {
        1: "#3D3A3B",
        2: "#6C6B6B",
        3: "#99A3A4",
        4: "#B3B3B3",
        5: "#D1D5D8",
      }
    }
  }
}

Related searches

cool grey color paletteminimalist urban colorsmisty street aestheticneutral grey brandingsophisticated cool UI design

Palette colors

Hex values

Color 1#3D3A3B
·
Color 2#6C6B6B
·
Color 3#99A3A4
·
Color 4#B3B3B3
·
Color 5#D1D5D8
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
4.4:1AA18
5.4:1AA
7.6:1AAA
2
2.1:1Fail
2.1:1Fail
2.5:1Fail
3.6:1AA18
3
4.4:1AA18
2.1:1Fail
1.2:1Fail
1.7:1Fail
4
5.4:1AA
2.5:1Fail
1.2:1Fail
1.4:1Fail
5
7.6:1AAA
3.6:1AA18
1.7:1Fail
1.4:1Fail

Similar palettes

More like Cobblestone Street Mist

View all neutral
Urban Stone Pavement
Urban Stone Relic
Ancient Roman Stone
Ancient Ruin Stone
Ancient Rune Stone
Ancient Stone Temple