Back to palettes

Palette

Stone Mosaic

A collection of sophisticated grays and charcoal reminiscent of ancient urban structures and modern design.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D3D3D3#A9A9A9#708090#5A5A5A#36454F

Palette guide

How to use Stone Mosaic

Overview

The Stone Mosaic palette offers a sophisticated collection of grays and charcoals, perfect for designs aiming for an urban, industrial, or modern aesthetic. Inspired by ancient urban structures, this palette provides a versatile range from the light and airy #D3D3D3 to the grounding depth of #36454F. Designers and developers can leverage its balanced mid-tones like #A9A9A9 and #708090, along with the strong emphasis of #5A5A5A, to create environments that are both refined and robust. This palette is ideal for conveying professionalism, stability, and contemporary elegance across various digital and physical applications.

Best used for

  • Modern architectural portfolios
  • Industrial product design showcases
  • Minimalist UI/UX designs
  • Luxury brand identity systems
  • Urban photography themes
  • Corporate website backgrounds

Suggested color roles

primary

Use #708090 (Slate Gray) as a balanced, calming primary for content blocks or main navigation elements.

secondary

Apply #A9A9A9 (Dark Gray) for supportive elements, subtle textures, or secondary information to maintain a cohesive feel.

accent

Employ #5A5A5A (Deep Gray) for strong calls to action, important icons, or prominent headings to create impactful contrast.

background

Utilize #D3D3D3 (Light Gray) for clean, spacious backgrounds that allow other elements to stand out without being stark white.

text

Choose #36454F (Charcoal) for primary body text and headings, ensuring excellent readability and a strong, sophisticated presence.

Accessibility notes

  • Ensure #36454F text on #D3D3D3 backgrounds meets WCAG AA contrast standards for readability.
  • Verify that #5A5A5A used for large headings on #D3D3D3 backgrounds has sufficient contrast.
  • Avoid placing #A9A9A9 text directly on #708090 backgrounds as contrast may be insufficient for small fonts.
  • For interactive elements, maintain a clear visual hierarchy with distinct contrast between states.

Recommended combinations

Urban Foundation

Ideal for main background, primary text, and strong accent elements in a modern interface.

#D3D3D3 · #36454F · #5A5A5A

Subtle Layers

Great for creating depth in UI components like cards, panels, or layered backgrounds.

#A9A9A9 · #708090 · #D3D3D3

Industrial Contrast

Effective for high-contrast headers, bold content sections, and a clean, light page base.

#36454F · #708090 · #D3D3D3

CSS variables

:root {
  --stone-mosaic-1: #D3D3D3;
  --stone-mosaic-2: #A9A9A9;
  --stone-mosaic-3: #708090;
  --stone-mosaic-4: #5A5A5A;
  --stone-mosaic-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stone-mosaic": {
        1: "#D3D3D3",
        2: "#A9A9A9",
        3: "#708090",
        4: "#5A5A5A",
        5: "#36454F",
      }
    }
  }
}

Related searches

modern gray paletteindustrial color schememinimalist design colorsurban neutral tonescharcoal gray branding

Palette colors

Hex values

Color 1#D3D3D3
·
Color 2#A9A9A9
·
Color 3#708090
·
Color 4#5A5A5A
·
Color 5#36454F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.6:1AA
6.6:1AA
2
1.6:1Fail
1.7:1Fail
2.9:1Fail
4.2:1AA18
3
2.7:1Fail
1.7:1Fail
1.7:1Fail
2.4:1Fail
4
4.6:1AA
2.9:1Fail
1.7:1Fail
1.4:1Fail
5
6.6:1AA
4.2:1AA18
2.4:1Fail
1.4:1Fail

Similar palettes

More like Stone Mosaic

View all neutral
Urban Whisper
Brutalist Bloom Grey
City Concrete Grind
Concrete Grid Lines
Concrete Jungle
Concrete Jungle Bloom