Palette

Grayscale Stone Etch

A stark, yet elegant gradient from deep charcoal to pale silver, like an engraving in stone.

MonochromeMinimal5 colors

More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#363636#5F5F5F#8F8F8F#BDBDBD#EBEBEB

Palette guide

How to use Grayscale Stone Etch

Overview

The Grayscale Stone Etch palette presents a stark yet elegant gradient, moving from deep charcoal to pale silver, reminiscent of an engraving in stone. With its foundational #363636 and lighter tones like #5F5F5F, #8F8F8F, #BDBDBD, and the airy #EBEBEB, this palette provides a sophisticated, industrial, and minimalist aesthetic. Designers and developers can leverage this collection to create clean, modern, and highly structured interfaces that convey precision and timelessness. It's particularly effective for projects requiring a refined, understated look that emphasizes texture and depth through subtle tonal shifts.

Best used for

Industrial design portfolios or product showcases
High-end minimalist fashion branding
Modern art gallery websites
Architectural visualization and presentations
Tech company branding with a focus on precision
Luxury watch or jewelry e-commerce

Suggested color roles

primary

Use #363636 for strong headings, primary calls-to-action, or dominant UI elements, providing a solid, dark anchor.

secondary

Apply #5F5F5F for subheadings, secondary navigation, or content panel backgrounds, maintaining depth and sophistication.

accent

#BDBDBD or #EBEBEB can serve as subtle accents for borders, dividers, or interactive states, adding a touch of lightness.

background

#EBEBEB provides a clean, bright canvas. For a slightly moodier feel, #8F8F8F can be used.

text

For primary text, #363636 offers excellent readability on light backgrounds. On darker greys, use #EBEBEB or white.

Accessibility notes

Ensure #363636 text on #EBEBEB background meets WCAG AA contrast for body text.
Be cautious with #8F8F8F text on #5F5F5F background; contrast might be insufficient for small text.
Provide clear visual indicators for interactive elements beyond subtle color changes, such as underlines or icons.
Use generous line spacing and clear typography to enhance readability in this refined grayscale palette.

Recommended combinations

Stone Carving

Ideal for primary branding, combining a deep base with a very light background and a strong mid-tone for readability.

#363636 · #EBEBEB · #5F5F5F

Etched Layers

Excellent for creating visual hierarchy in multi-level navigation or complex data displays.

#5F5F5F · #8F8F8F · #BDBDBD

Silver Lining

Suited for light-themed designs, using the palest grey as a background with dark text and a balanced mid-grey for accents.

#EBEBEB · #363636 · #8F8F8F

CSS variables

:root {
  --grayscale-stone-etch-1: #363636;
  --grayscale-stone-etch-2: #5F5F5F;
  --grayscale-stone-etch-3: #8F8F8F;
  --grayscale-stone-etch-4: #BDBDBD;
  --grayscale-stone-etch-5: #EBEBEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "grayscale-stone-etch": {
        1: "#363636",
        2: "#5F5F5F",
        3: "#8F8F8F",
        4: "#BDBDBD",
        5: "#EBEBEB",
      }
    }
  }
}

Hex values

Color 1#363636

Color 2#5F5F5F

Color 3#8F8F8F

Color 4#BDBDBD

Color 5#EBEBEB

Accessibility

Contrast checker

1.9:1Fail

3.7:1AA18

6.4:1AA

10.1:1AAA

1.9:1Fail

2:1Fail

3.4:1AA18

5.4:1AA

3.7:1AA18

2:1Fail

1.7:1Fail

2.7:1Fail

6.4:1AA

3.4:1AA18

1.7:1Fail

1.6:1Fail

10.1:1AAA

5.4:1AA

2.7:1Fail

1.6:1Fail

Similar palettes

More like Grayscale Stone Etch

Abstract Urban Canvas