Palette

Granite Ridge Calm

The stark, serene beauty of a granite mountain ridge, displaying various shades of cool, neutral gray.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Granite Ridge Calm 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 Ridge Calm.

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

Data visualization

#4F4F4F#7F7F7F#A0A0A0#BFBFBF#D3D3D3

Palette guide

How to use Granite Ridge Calm

Overview

The Granite Ridge Calm palette offers a sophisticated monochrome gradient, perfect for projects demanding a sleek, minimalist aesthetic. This collection of cool, neutral grays, ranging from the deep #4F4F4F to the airy #D3D3D3, evokes the serene beauty of natural stone. Designers can leverage shades like the versatile #7F7F7F for primary elements or the subtle #A0A0A0 for backgrounds, creating a harmonious and professional look. Developers will find these hex codes ideal for crafting UI components that require understated elegance and a consistent visual hierarchy. The palette's inherent calmness makes it excellent for conveying stability, luxury, and modern simplicity across various digital and print applications.

Best used for

Modern corporate branding
Minimalist website interfaces and app design
Architectural portfolios and interior design concepts
Luxury product packaging
Professional photography backdrops
Sleek dashboard UI/UX

Suggested color roles

primary

#4F4F4F - Use for strong headings, primary buttons, or dominant graphical elements where a bold, grounding presence is needed.

secondary

#7F7F7F - Ideal for subheadings, secondary calls-to-action, or supporting content blocks, providing good contrast without being overwhelming.

accent

#BFBFBF - A subtle, lighter accent for subtle highlights, borders, dividers, or hover states to add depth without breaking the monochrome theme.

background

#D3D3D3 - An airy, light base for main content areas, providing a clean canvas that allows darker text and elements to stand out clearly.

text

#4F4F4F - Highly recommended for body text on lighter backgrounds like #D3D3D3 or #BFBFBF, ensuring excellent readability and a sophisticated feel. For very light text on a dark background, a pure white or near-white might be needed.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using lighter grays together (e.g., #A0A0A0 on #D3D3D3 might fail WCAG AA).
For body text, use darker shades like #4F4F4F or #7F7F7F against backgrounds like #D3D3D3 or #BFBFBF to maintain readability.
Avoid using lighter grays like #BFBFBF or #D3D3D3 for small text elements, as they may become illegible on many screens.
Consider providing clear visual indicators beyond just color for interactive elements, as the monochrome nature can sometimes obscure affordance.

Recommended combinations

Core Contrast

Excellent for a standard UI layout: light background, mid-tone secondary elements, and dark primary text or buttons.

#D3D3D3 · #7F7F7F · #4F4F4F

Subtle Depth

Ideal for creating subtle gradients, layered cards, or distinct sections within a design, offering gentle visual separation.

#BFBFBF · #A0A0A0 · #7F7F7F

Dark Accent

Use the lightest shade for background, a mid-light for secondary elements, and the darkest for impactful accents or critical call-to-actions.

#D3D3D3 · #BFBFBF · #4F4F4F

CSS variables

:root {
  --granite-ridge-calm-1: #4F4F4F;
  --granite-ridge-calm-2: #7F7F7F;
  --granite-ridge-calm-3: #A0A0A0;
  --granite-ridge-calm-4: #BFBFBF;
  --granite-ridge-calm-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "granite-ridge-calm": {
        1: "#4F4F4F",
        2: "#7F7F7F",
        3: "#A0A0A0",
        4: "#BFBFBF",
        5: "#D3D3D3",
      }
    }
  }
}

Hex values

Color 1#4F4F4F

Color 2#7F7F7F

Color 3#A0A0A0

Color 4#BFBFBF

Color 5#D3D3D3

Accessibility

Contrast checker

2:1Fail

3.1:1AA18

4.5:1AA18

5.5:1AA

2:1Fail

1.5:1Fail

2.2:1Fail

2.7:1Fail

3.1:1AA18

1.5:1Fail

1.4:1Fail

1.7:1Fail

4.5:1AA18

2.2:1Fail

1.4:1Fail

1.2:1Fail

5.5:1AA

2.7:1Fail

1.7:1Fail

1.2:1Fail

Similar palettes

More like Granite Ridge Calm

Granite Peak Twilight

Graphite Etching Stone