Palette

Stone Golem

Sturdy, grounded greys inspired by the unyielding strength and natural beauty of ancient stone.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#546E7A#78909C#9FA8DA#CFD8DC

Palette guide

How to use Stone Golem

Overview

The Stone Golem palette presents a collection of sturdy, grounded greys with subtle blue undertones, inspired by the unyielding strength and natural beauty of ancient stone. Ranging from the deep #36454F to the light, almost ethereal #CFD8DC, and featuring balanced tones like #546E7A, #78909C, and the unique #9FA8DA, this palette conveys durability and quiet power. Designers and developers can utilize these sophisticated colors to build interfaces and brands that feel reliable, enduring, and subtly elegant. It’s particularly effective for projects requiring a blend of natural strength and modern minimalism, suitable for corporate, tech, or environmental themes.

Best used for

Corporate and professional websites
Tech product branding
Environmental or sustainability initiatives
Minimalist data dashboards
Architectural firm portfolios
Responsive web applications

Suggested color roles

primary

#546E7A - A strong, cool grey-blue, excellent for main content areas or substantial UI components, projecting reliability and professionalism.

secondary

#78909C - A lighter, more approachable grey-blue, ideal for subheadings, secondary buttons, or background panels.

accent

#9FA8DA - A soft, muted blue that provides a subtle, sophisticated accent, perfect for interactive elements, highlights, or graphical features.

background

#CFD8DC - A very light, almost off-white grey with a hint of blue, creating a clean, expansive backdrop that is gentle on the eyes.

text

#36454F - This deep, dark grey-blue offers exceptional contrast against #CFD8DC or #78909C, ensuring readability for all body text and headings.

Accessibility notes

Ensure #9FA8DA text has adequate contrast against #CFD8DC for accessibility, especially for smaller font sizes.
The deep #36454F provides excellent contrast for text on lighter shades like #CFD8DC and #78909C.
Avoid using #78909C for text on #546E7A backgrounds; the contrast might be insufficient for readability.
For interactive elements, ensure distinct visual feedback beyond color alone, especially for buttons using similar mid-tones.

Recommended combinations

Solid Base

Classic light background with clear hierarchy, #36454F for text, and #78909C for subheadings.

#CFD8DC · #78909C · #36454F

Subtle Accent

Use #546E7A for a main panel, #CFD8DC for text, and #9FA8DA for a soft, engaging button or highlight.

#546E7A · #9FA8DA · #CFD8DC

Deep Contrast

Effective for dark-themed sections, with #78909C providing clear text on the deep #36454F background.

#36454F · #78909C · #546E7A

CSS variables

:root {
  --stone-golem-1: #36454F;
  --stone-golem-2: #546E7A;
  --stone-golem-3: #78909C;
  --stone-golem-4: #9FA8DA;
  --stone-golem-5: #CFD8DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stone-golem": {
        1: "#36454F",
        2: "#546E7A",
        3: "#78909C",
        4: "#9FA8DA",
        5: "#CFD8DC",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#546E7A

Color 3#78909C

Color 4#9FA8DA

Color 5#CFD8DC

Accessibility

Contrast checker

1.8:1Fail

3:1Fail

4.3:1AA18

6.8:1AA

1.8:1Fail

1.6:1Fail

2.3:1Fail

3.7:1AA18

3:1Fail

1.6:1Fail

1.4:1Fail

2.3:1Fail

4.3:1AA18

2.3:1Fail

1.4:1Fail

1.6:1Fail

6.8:1AA

3.7:1AA18

2.3:1Fail

1.6:1Fail

Similar palettes

More like Stone Golem

Stone Golem

See it in context.

Ready when you are.

Built with Stone Golem.

How to use Stone Golem

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Solid Base

Subtle Accent

Deep Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Stone Golem