Back to palettes

Palette

Graphite Etching Stone

A collection of nuanced greys reflecting the subtle variations of light on an etched stone surface.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#708090#C0C0C0#A9A9A9#2F4F4F

Palette guide

How to use Graphite Etching Stone

Overview

The Graphite Etching Stone palette presents a nuanced collection of sophisticated grays, inspired by the subtle variations of light on an etched stone surface. Ranging from the deep #2F4F4F dark slate gray to the lighter #C0C0C0 silver, with intermediate tones like #36454F charcoal, #708090 slate gray, and #A9A9A9 dark gray, this palette offers depth and texture. It's ideal for minimalist designs that seek to convey a sense of understated elegance, solidity, and natural sophistication. Designers can use this timeless collection to create refined interfaces, branding, or print materials with a grounded, organic feel.

Best used for

  • Minimalist web design
  • Art gallery branding
  • Photography portfolio sites
  • Eco-friendly product packaging
  • Interior design mood boards
  • High-end stationery and print

Suggested color roles

primary

Use #36454F as a dominant color for headings or main content sections, offering a strong, stable presence.

secondary

Apply #708090 for subheadings, secondary text, or background variations, providing a softer, more approachable tone.

accent

Employ #C0C0C0 for subtle highlights, divider lines, or inactive UI elements, adding a touch of lightness.

background

Utilize #F8F8FF (near-white, not in palette but recommended) for clean backgrounds, or #A9A9A9 for a muted, textural base.

text

For optimal readability, use #2F4F4F or #36454F for text on lighter backgrounds like #C0C0C0 or a near-white. Use #C0C0C0 for text on dark backgrounds.

Accessibility notes

  • Ensure sufficient contrast when pairing #C0C0C0 with #A9A9A9 for text, as they are close in luminance.
  • The dark colors like #2F4F4F and #36454F provide excellent contrast for white or light-colored text.
  • Avoid using #A9A9A9 for small text on a white background without careful contrast checking.
  • For interactive elements, ensure distinct visual feedback for states using contrasting shades from the palette.

Recommended combinations

Stone Texture

Deep, layered grays for backgrounds, panels, and primary text, evoking natural stone.

#2F4F4F · #36454F · #708090

Etched Detail

Light grays for backgrounds and details, with a dark charcoal for bold text or icons.

#A9A9A9 · #C0C0C0 · #36454F

Minimalist Contrast

Mid-gray base with lighter accents and a very dark text for clean, readable layouts.

#708090 · #C0C0C0 · #2F4F4F

CSS variables

:root {
  --graphite-etching-stone-1: #36454F;
  --graphite-etching-stone-2: #708090;
  --graphite-etching-stone-3: #C0C0C0;
  --graphite-etching-stone-4: #A9A9A9;
  --graphite-etching-stone-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "graphite-etching-stone": {
        1: "#36454F",
        2: "#708090",
        3: "#C0C0C0",
        4: "#A9A9A9",
        5: "#2F4F4F",
      }
    }
  }
}

Related searches

grey stone paletteminimalist monochrome colorsgraphite color schemenatural gray brandingsubtle texture palette

Palette colors

Hex values

Color 1#36454F
·
Color 2#708090
·
Color 3#C0C0C0
·
Color 4#A9A9A9
·
Color 5#2F4F4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
5.4:1AA
4.2:1AA18
1.1:1Fail
2
2.4:1Fail
2.2:1Fail
1.7:1Fail
2.2:1Fail
3
5.4:1AA
2.2:1Fail
1.3:1Fail
4.9:1AA
4
4.2:1AA18
1.7:1Fail
1.3:1Fail
3.8:1AA18
5
1.1:1Fail
2.2:1Fail
4.9:1AA
3.8:1AA18

Similar palettes

More like Graphite Etching Stone

View all monochrome