Nuts and Bolts
#898c92
Slightly bluish gray for technical UI structure
About Nuts and Bolts
I keep seeing Nuts and Bolts on the "hardware" parts of interfaces: the quiet gray behind rails, gutters, and the edges of things. This one sits in the medium-light gray lane, more substantial than Grisaille but less heavy than Dark Ages. It has a more businesslike, slightly blue-leaning coolness, so it doesn't feel beige-warm or protective in the same way as Dusty Chimney.
I reach for it when I need secondary surfaces that still look engineered. Think logistics and fleet dashboards, manufacturing ops portals, and healthcare admin screens where you're layering filters, tables, and form sections. It also holds up well in media workflows like CMS review panes and asset management where panels need to separate without stealing attention from thumbnails and data. Set it behind tables, use it for panel dividers, or as the base tone for grouped controls.
One quirk: because it's cool, it can make warm accents look extra warm next to it, so I usually balance it with neutral whites or a restrained warm gray elsewhere.
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.