Granite
#746a5e
Earthy mid-gray with muted warmth for grounded layouts
About Granite
Granite is the gray that actually looks like something, not a theoretical neutral, not a design system placeholder, but the color of stone that's been weathered enough to lose its polish. It's warmer than Gauntlet Grey (which holds back), darker than Bat Wing (which wants to breathe), and heavier than Catch of the Day without feeling austere. It reads as material, the kind of color that anchors a page because it has actual weight.
You reach for this in contexts where neutral alone feels thin: product dashboards that need substance, editorial layouts with photography and serif type, interior design interfaces, hospitality sites where you want ground-level confidence. It pairs cleanly with warm accents, terracotta, ochre, warm metallics, without looking like it's trying. Dark type sits on it without strain. Unlike Gauntlet Grey, it doesn't feel reserved; unlike Bat Wing, it doesn't need company to hold its own. It works harder in warm color systems while staying steady enough for cool palettes too.
One thing: in very low light or against pure white, it can read slightly flatter than expected. It's not the color for maximum contrast situations. But in real work, dashboards, long-form reading, photography-forward layouts, it disappears into the job exactly when you need it to.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.