Back to palettes

Palette

Urban Stone Relic

Cool, muted greys reflecting the enduring strength of city architecture.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Stone Relic 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 Urban Stone Relic.

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

Data visualization

#70798C#8F97A6#A6A6A8#C7CAC9#DCDCDC

Palette guide

How to use Urban Stone Relic

Overview

The Urban Stone Relic palette features cool, muted greys that reflect the enduring strength and subtle elegance of city architecture. This collection, including the deep #70798C, versatile #8F97A6, balanced #A6A6A8, soft #C7CAC9, and light #DCDCDC, offers a sophisticated foundation for designs. Its subtle blue undertones provide a unique depth, making it ideal for projects that aim for a minimalist yet rich aesthetic. Designers and developers can use these tones to evoke a sense of heritage, stability, and modern refinement.

Best used for

  • Heritage and archival institution branding
  • Modern art galleries and exhibition design
  • High-end interior design and architectural firms
  • Sustainable architecture and urban development visuals
  • Documentary film branding and visual identity
  • Luxury fashion editorials and web design

Suggested color roles

primary

Use #70798C, a deep, cool grey, for main structural elements, prominent headers, or a sophisticated base.

secondary

Employ #8F97A6, a balanced mid-tone, for supporting content, navigation, or subtle background variations.

accent

Reserve #A6A6A8, an almost silvery grey, for delicate highlights, borders, or inactive states, adding a refined touch.

background

The very light #DCDCDC serves as a clean, expansive canvas, providing a crisp backdrop for content.

text

For optimal readability, #70798C provides excellent contrast on lighter backgrounds, maintaining the palette's cool tone.

Accessibility notes

  • Ensure #70798C text on #DCDCDC background offers good contrast, verifying WCAG AA compliance.
  • Be careful using #A6A6A8 or #C7CAC9 for small text on #DCDCDC, as contrast may be too low for readability.
  • For large headings, #8F97A6 on #DCDCDC can be effective, but always check legibility across different sizes.
  • Provide clear focus indicators for interactive elements that utilize lighter shades like #C7CAC9 to enhance usability.

Recommended combinations

Cool Foundations

Creates a sophisticated, calm interface with a light base, strong primary text, and a supportive mid-tone.

#DCDCDC · #70798C · #8F97A6

Subtle Gradient

Excellent for background patterns, subtle transitions, or layered informational displays with gentle shifts.

#C7CAC9 · #A6A6A8 · #8F97A6

Depth & Definition

Use for prominent sections, dark mode themes, or to give strong definition to UI components against a light background.

#70798C · #DCDCDC · #A6A6A8

CSS variables

:root {
  --urban-stone-relic-1: #70798C;
  --urban-stone-relic-2: #8F97A6;
  --urban-stone-relic-3: #A6A6A8;
  --urban-stone-relic-4: #C7CAC9;
  --urban-stone-relic-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-stone-relic": {
        1: "#70798C",
        2: "#8F97A6",
        3: "#A6A6A8",
        4: "#C7CAC9",
        5: "#DCDCDC",
      }
    }
  }
}

Related searches

cool gray color schememuted architectural paletteconcrete blue grey tonesminimalist heritage designsubdued urban colors

Palette colors

Hex values

Color 1#70798C
·
Color 2#8F97A6
·
Color 3#A6A6A8
·
Color 4#C7CAC9
·
Color 5#DCDCDC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.8:1Fail
2.6:1Fail
3.2:1AA18
2
1.5:1Fail
1.2:1Fail
1.8:1Fail
2.1:1Fail
3
1.8:1Fail
1.2:1Fail
1.5:1Fail
1.8:1Fail
4
2.6:1Fail
1.8:1Fail
1.5:1Fail
1.2:1Fail
5
3.2:1AA18
2.1:1Fail
1.8:1Fail
1.2:1Fail

Similar palettes

More like Urban Stone Relic

View all neutral