Back to palettes

Palette

Ancient Roman Stone

The timeless, weathered strength of Roman architecture in cool, enduring stone tones.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B8680#A0A5A9#C8C9CC#5F6366#E2E3E4

Palette guide

How to use Ancient Roman Stone

Overview

The 'Ancient Roman Stone' palette offers a timeless collection of cool, enduring stone tones, perfect for designs requiring classic elegance and minimalist strength. Utilizing hex codes like #8B8680 (a muted grey-brown) and #A0A5A9 (a soft, cool grey), this palette evokes the weathered strength of ancient Roman architecture. Developers and designers can leverage the lightest shade, #E2E3E4, as a serene background, while grounding elements with the deeper #5F6366. This versatile palette is ideal for creating sophisticated, understated aesthetics that stand the test of time.

Best used for

  • Architectural visualization
  • Luxury brand identity
  • Historical documentary aesthetics
  • Minimalist user interfaces
  • Elegant interior design concepts
  • Museum exhibition graphics

Suggested color roles

primary

Use #5F6366 as a solid, grounding base for primary elements like navigation bars or main content blocks, providing a sense of stability.

secondary

Apply #8B8680 for supporting sections, subtle borders, or secondary text, adding a layer of weathered texture and depth.

accent

Introduce #A0A5A9 as a gentle highlight for interactive elements, subtle icons, or decorative details, preventing a monochromatic feel.

background

Employ #E2E3E4 as a clean, expansive backdrop for pages or sections, ensuring a light, airy, and sophisticated canvas.

text

For optimal readability, use #5F6366 or a dark charcoal text on lighter backgrounds like #E2E3E4, or a crisp white on darker tones.

Accessibility notes

  • Ensure #5F6366 text on #E2E3E4 background meets WCAG AA contrast ratios.
  • Use #8B8680 for larger headings or titles on lighter shades like #C8C9CC for better visibility.
  • Avoid low contrast pairings, such as #A0A5A9 for small text on #C8C9CC backgrounds.
  • Provide sufficient contrast for all interactive elements to ensure usability for diverse audiences.

Recommended combinations

Stone & Sky

A classic, balanced combination for headers, subheadings, and main body text against a light background.

#5F6366 · #A0A5A9 · #E2E3E4

Ancient Wall

Creates a robust, layered effect suitable for textured backgrounds or distinct content blocks.

#8B8680 · #5F6366 · #C8C9CC

Subtle Elegance

Ideal for a light, sophisticated aesthetic in backgrounds, borders, and very subtle UI elements.

#E2E3E4 · #C8C9CC · #A0A5A9

CSS variables

:root {
  --ancient-roman-stone-1: #8B8680;
  --ancient-roman-stone-2: #A0A5A9;
  --ancient-roman-stone-3: #C8C9CC;
  --ancient-roman-stone-4: #5F6366;
  --ancient-roman-stone-5: #E2E3E4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ancient-roman-stone": {
        1: "#8B8680",
        2: "#A0A5A9",
        3: "#C8C9CC",
        4: "#5F6366",
        5: "#E2E3E4",
      }
    }
  }
}

Related searches

roman architecture colorsclassic neutral palettestone grey hex codesminimalist design colorstimeless brand palette

Palette colors

Hex values

Color 1#8B8680
·
Color 2#A0A5A9
·
Color 3#C8C9CC
·
Color 4#5F6366
·
Color 5#E2E3E4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
1.7:1Fail
2.8:1Fail
2
1.5:1Fail
1.5:1Fail
2.4:1Fail
1.9:1Fail
3
2.2:1Fail
1.5:1Fail
3.7:1AA18
1.3:1Fail
4
1.7:1Fail
2.4:1Fail
3.7:1AA18
4.7:1AA
5
2.8:1Fail
1.9:1Fail
1.3:1Fail
4.7:1AA

Similar palettes

More like Ancient Roman Stone

View all neutral