Palette

Monochrome Granite Edge

A sleek and strong gradient, mimicking the smooth, enduring strength of polished granite.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Monochrome Granite Edge 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 Monochrome Granite Edge.

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

Data visualization

#36454F#708090#A9A9A9#D3D3D3#EAEAEA

Palette guide

How to use Monochrome Granite Edge

Overview

The Monochrome Granite Edge palette offers a sleek and strong gradient, mimicking the smooth, enduring strength of polished granite. Anchored by the deep, cool #36454F, it transitions through versatile greys like #708090 and #A9A9A9, culminating in the soft #EAEAEA. This collection, including #D3D3D3, is perfect for designers and developers aiming to create a modern, industrial, and highly refined aesthetic. It excels in corporate branding, tech interfaces, or any design requiring a sense of stability, quality, and cool sophistication. These shades provide a robust foundation for clean, professional, and timeless visual experiences.

Best used for

Industrial design and engineering firm branding
High-tech product interfaces and websites
Luxury real estate or architectural portfolios
Modern corporate identity and presentations
Clean, professional data visualization dashboards
E-commerce sites for premium or durable goods

Suggested color roles

primary

Use #36454F as a dominant background or for major structural elements, establishing a strong, sophisticated presence.

secondary

Employ #708090 for secondary panels, subheadings, or subtle dividers, adding depth without visual clutter.

accent

Leverage #D3D3D3 for highlights, interactive states, or as a crisp background for specific content, bringing light to the design.

background

Utilize #EAEAEA as a light, airy background for main content areas, promoting readability and a clean aesthetic.

text

For light backgrounds like #EAEAEA, use #36454F or #708090 for optimal text readability. For dark backgrounds, use white.

Accessibility notes

Ensure sufficient contrast between text and background; #36454F on #EAEAEA provides excellent readability.
Avoid using #A9A9A9 or #D3D3D3 for small text on similar mid-tone backgrounds, as contrast may be too low.
The darkest color, #36454F, should be used for critical text elements on light backgrounds to meet WCAG AA standards.
Consider increasing font size or weight when pairing #708090 text with #A9A9A9 background for improved legibility.

Recommended combinations

Granite Strength

Ideal for header sections, bold typography, or feature blocks where strong visual impact and clarity are desired.

#36454F · #EAEAEA · #708090

Polished Layers

Excellent for creating subtle depth in UI components, card backgrounds, or layered information displays.

#708090 · #A9A9A9 · #D3D3D3

Clean Content

Apply for main content areas with a light background, ensuring dark, readable text and clear hierarchy.

#EAEAEA · #36454F · #A9A9A9

CSS variables

:root {
  --monochrome-granite-edge-1: #36454F;
  --monochrome-granite-edge-2: #708090;
  --monochrome-granite-edge-3: #A9A9A9;
  --monochrome-granite-edge-4: #D3D3D3;
  --monochrome-granite-edge-5: #EAEAEA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-granite-edge": {
        1: "#36454F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#EAEAEA",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#708090

Color 3#A9A9A9

Color 4#D3D3D3

Color 5#EAEAEA

Accessibility

Contrast checker

2.4:1Fail

4.2:1AA18

6.6:1AA

8.2:1AAA

2.4:1Fail

1.7:1Fail

2.7:1Fail

3.4:1AA18

4.2:1AA18

1.7:1Fail

1.6:1Fail

2:1Fail

6.6:1AA

2.7:1Fail

1.6:1Fail

1.2:1Fail

8.2:1AAA

3.4:1AA18

2:1Fail

1.2:1Fail

Similar palettes

More like Monochrome Granite Edge

Industrial Cityscape Grey

Modern Loft Concrete

Urban Alley Glow