Back to palettes

Palette

Rainy Cobblestone Street

Muted, cool grays reflecting the slick, gleaming surfaces of a cobblestone street on a serene, rainy day.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F5C6A#6D7E8C#8DA2B0#AEC5D1#CEDAEE

Palette guide

How to use Rainy Cobblestone Street

Overview

The "Rainy Cobblestone Street" palette captures the serene, cool essence of a historic street after a soft rain, offering a cohesive range of muted blue-greys. From the deep, grounding #4F5C6A to the airy, almost pastel #CEDAEE, these colors provide a sophisticated gradient for designs seeking calm and understated elegance. The mid-tones like #6D7E8C and #8DA2B0 offer excellent versatility for creating depth and subtle transitions. This palette is perfect for projects that aim to evoke a sense of heritage, tranquility, or refined modernity, ideal for luxury brands, cultural institutions, or serene digital experiences.

Best used for

  • Heritage brand websites and marketing
  • Luxury product packaging and branding
  • Serene spa or wellness application UIs
  • Travel blogs focusing on European cities
  • Architectural and historical preservation projects
  • Digital art and photography portfolios

Suggested color roles

primary

#4F5C6A serves as a strong, sophisticated base for main navigation, footers, or dark mode backgrounds, establishing a sense of calm authority.

secondary

#6D7E8C or #8DA2B0 are ideal for subheadings, informational blocks, or secondary UI elements, providing gentle contrast and structure.

accent

#AEC5D1 can be used for subtle highlights, interactive states, or decorative elements, offering a soft, luminous touch.

background

#CEDAEE provides a light, airy canvas, promoting readability and a spacious feel, while maintaining the palette's cool undertone.

text

For light backgrounds like #CEDAEE, use #4F5C6A for clear, readable primary text. For dark backgrounds, #CEDAEE or a soft white works well.

Accessibility notes

  • Ensure #4F5C6A text on #CEDAEE background meets WCAG AA contrast standards for readability.
  • Avoid using lighter shades like #AEC5D1 for small text on #CEDAEE backgrounds due to insufficient contrast.
  • All interactive elements should have sufficient contrast in their default and hover/active states.
  • Consider larger font sizes for text colored with mid-tones like #8DA2B0 on light backgrounds.

Recommended combinations

Historic Calm

Creates a balanced, elegant look with deep primary, light background, and a soft mid-tone for secondary information or dividers.

#4F5C6A · #CEDAEE · #8DA2B0

Gradient Blue-Grey

Perfect for subtle background gradients, layered cards, or visual elements that require a smooth, cool transition.

#6D7E8C · #8DA2B0 · #AEC5D1

Soft Contrast

A light base with strong dark headings and a gentle, cool accent for links or decorative touches.

#CEDAEE · #4F5C6A · #AEC5D1

CSS variables

:root {
  --rainy-cobblestone-street-1: #4F5C6A;
  --rainy-cobblestone-street-2: #6D7E8C;
  --rainy-cobblestone-street-3: #8DA2B0;
  --rainy-cobblestone-street-4: #AEC5D1;
  --rainy-cobblestone-street-5: #CEDAEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainy-cobblestone-street": {
        1: "#4F5C6A",
        2: "#6D7E8C",
        3: "#8DA2B0",
        4: "#AEC5D1",
        5: "#CEDAEE",
      }
    }
  }
}

Related searches

cool blue grey paletteserene historic colorsmuted urban color schemecobblestone aesthetic colorstranquil grey blue branding

Palette colors

Hex values

Color 1#4F5C6A
·
Color 2#6D7E8C
·
Color 3#8DA2B0
·
Color 4#AEC5D1
·
Color 5#CEDAEE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
3.8:1AA18
4.8:1AA
2
1.6:1Fail
1.6:1Fail
2.3:1Fail
3:1Fail
3
2.6:1Fail
1.6:1Fail
1.5:1Fail
1.9:1Fail
4
3.8:1AA18
2.3:1Fail
1.5:1Fail
1.3:1Fail
5
4.8:1AA
3:1Fail
1.9:1Fail
1.3:1Fail

Similar palettes

More like Rainy Cobblestone Street

View all cool
Rainy City Reflections
Stormy Horizon Gray
City Puddle Glimmer
City Rain Slicker
Cloudburst Sky
Gentle Rain Shower