Palette

Cloudy Cobblestone Lane

A soft, muted palette inspired by the tranquil tones of an old cobblestone lane on a cloudy day.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cloudy Cobblestone Lane 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 Cloudy Cobblestone Lane.

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

Data visualization

#708090#A9A9A9#C0C0C0#D3D3D3#696969

Palette guide

How to use Cloudy Cobblestone Lane

Overview

The Cloudy Cobblestone Lane palette offers a soft, muted collection inspired by the tranquil tones of an old cobblestone lane on a cloudy day. This neutral palette, featuring shades from the light #D3D3D3 to the deep, grounding #696969, exudes a sense of calm, stability, and timelessness. Designers can leverage these hex codes for minimalist branding, sophisticated digital interfaces, or print materials requiring an understated yet elegant aesthetic. Developers will find these harmonious grays excellent for building clean and unobtrusive user experiences, with #A9A9A9 providing a versatile mid-tone and #708090 offering a hint of cool slate.

Best used for

urban planning and architecture
minimalist fashion brands
historic preservation websites
industrial design portfolios
tech company branding (subtle)
documentary film graphics

Suggested color roles

primary

#708090 - A strong, cool slate grey, excellent for main headings, primary navigation, or prominent brand elements.

secondary

#A9A9A9 - A versatile mid-tone grey, perfect for subheadings, background panels, or supportive graphics.

accent

#696969 - The deepest, darkest grey, ideal for call-to-action buttons, important icons, or strong textual emphasis.

background

#D3D3D3 - The lightest shade, providing a clean, muted, and stable canvas that promotes readability.

text

#696969 - This dark grey provides excellent readability for body text against the lighter backgrounds like #D3D3D3 or #C0C0C0.

Accessibility notes

Text in #696969 or #708090 on backgrounds like #D3D3D3 or #C0C0C0 should meet WCAG AA contrast standards.
Avoid using lighter shades like #A9A9A9 or #C0C0C0 for small text on #D3D3D3 due to potential low contrast.
Ensure interactive elements have clear visual feedback beyond just color, given the subtle variations.
Always verify contrast ratios for all text and interactive elements, particularly for critical information.

Recommended combinations

Stone Layers

For creating subtle background textures or layered card designs, evoking natural stone.

#D3D3D3 · #C0C0C0 · #A9A9A9

Urban Contrast

Ideal for professional layouts, using the darker greys for headlines and lighter tones for content.

#708090 · #696969 · #D3D3D3

Muted Harmony

For content blocks or subtle dividers, maintaining a soft and harmonious visual flow with slight depth.

#A9A9A9 · #C0C0C0 · #708090

CSS variables

:root {
  --cloudy-cobblestone-lane-1: #708090;
  --cloudy-cobblestone-lane-2: #A9A9A9;
  --cloudy-cobblestone-lane-3: #C0C0C0;
  --cloudy-cobblestone-lane-4: #D3D3D3;
  --cloudy-cobblestone-lane-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloudy-cobblestone-lane": {
        1: "#708090",
        2: "#A9A9A9",
        3: "#C0C0C0",
        4: "#D3D3D3",
        5: "#696969",
      }
    }
  }
}

Hex values

Color 1#708090

Color 2#A9A9A9

Color 3#C0C0C0

Color 4#D3D3D3

Color 5#696969

Accessibility

Contrast checker

1.7:1Fail

2.2:1Fail

2.7:1Fail

1.4:1Fail

1.7:1Fail

1.3:1Fail

1.6:1Fail

2.3:1Fail

2.2:1Fail

1.3:1Fail

1.2:1Fail

3:1AA18

2.7:1Fail

1.6:1Fail

1.2:1Fail

3.7:1AA18

1.4:1Fail

2.3:1Fail

3:1AA18

3.7:1AA18

Similar palettes

More like Cloudy Cobblestone Lane

View all neutral

Calm Interior Lines

Nordic Calm Retreat

Riverbed Smooth Stone

Stone Cairn Balance

Stone Garden Zen

Urban Loft Serene