Back to palettes

Palette

Granite Quarry Scale

A stoic and strong gradient of greys, inspired by the solid, unyielding texture of a granite quarry.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Granite Quarry Scale 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 Granite Quarry Scale.

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

Data visualization

#303030#505050#707070#909090#B0B0B0

Palette guide

How to use Granite Quarry Scale

Overview

The Granite Quarry Scale palette offers a stoic and strong gradient of greys, inspired by the solid, unyielding texture of granite. This monochrome collection, including #303030, #505050, and #707070, provides a sophisticated and timeless foundation for any design. It's exceptionally versatile for minimalist aesthetics, corporate branding, or industrial-themed interfaces, conveying stability and professionalism. The lighter tones like #909090 and #B0B0B0 allow for crucial highlights and readability, ensuring that while the palette is understated, it remains highly functional for both designers and developers seeking a robust, elegant solution.

Best used for

  • Corporate and professional websites
  • Minimalist user interface design
  • Architectural visualization and portfolios
  • Industrial product branding
  • Data visualization and dashboards
  • High-end fashion or luxury goods websites

Suggested color roles

primary

Utilize #303030 as the deep, anchoring color for primary text, main backgrounds in dark mode, or strong foundational elements.

secondary

Employ #505050 for supporting text, subheadings, or as a background color for sections needing less visual weight than the primary.

accent

The lightest #B0B0B0 serves as an excellent accent for subtle highlights, interactive states, or as a background for key information.

background

For a dark, elegant canvas, use #303030. For a lighter, airy feel, consider #B0B0B0 as a base.

text

On light backgrounds like #B0B0B0, use #303030 for primary text. On darker backgrounds, #B0B0B0 or #909090 provides clear readability.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using mid-tones like #707070 and #909090.
  • Always test text readability: #303030 on #B0B0B0 offers excellent contrast, while #707070 on #909090 may be too subtle for small text.
  • Use #B0B0B0 for interactive elements against darker greys to ensure they are easily discernible.
  • Avoid using similar shades for text and background in critical areas to prevent visual fatigue and readability issues.

Recommended combinations

High Contrast

Creates clear visual hierarchy, suitable for headings and body text on contrasting backgrounds.

#303030 · #B0B0B0 · #707070

Soft Gradient

Ideal for subtle background textures, progress bars, or layered card designs.

#505050 · #707070 · #909090

Industrial Base

Provides a robust structure for layouts, combining dark foundations with light accents.

#303030 · #505050 · #B0B0B0

CSS variables

:root {
  --granite-quarry-scale-1: #303030;
  --granite-quarry-scale-2: #505050;
  --granite-quarry-scale-3: #707070;
  --granite-quarry-scale-4: #909090;
  --granite-quarry-scale-5: #B0B0B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "granite-quarry-scale": {
        1: "#303030",
        2: "#505050",
        3: "#707070",
        4: "#909090",
        5: "#B0B0B0",
      }
    }
  }
}

Related searches

grey color palettemonochromatic designminimalist UI colorsindustrial color schemecorporate grey tones

Palette colors

Hex values

Color 1#303030
·
Color 2#505050
·
Color 3#707070
·
Color 4#909090
·
Color 5#B0B0B0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.1:1AA18
6.1:1AA
2
1.6:1Fail
1.6:1Fail
2.5:1Fail
3.7:1AA18
3
2.7:1Fail
1.6:1Fail
1.6:1Fail
2.3:1Fail
4
4.1:1AA18
2.5:1Fail
1.6:1Fail
1.5:1Fail
5
6.1:1AA
3.7:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Granite Quarry Scale

View all monochrome
Volcanic Ash Dawn
Ancient Volcanic Ash
Volcanic Ash Bloom
Volcanic Ash Glaze
Ash Cloud Layers
Basalt Rock Formation