Nuts and Bolts

#898c92

Slightly bluish gray for technical UI structure

Save
Share

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 but less heavy than . It has a more businesslike, slightly blue-leaning coolness, so it doesn't feel beige-warm or protective in the same way as .

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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
3.37:1FailAA Large

On Gray 100 #f5f5f5

Aa
3.09:1FailAA Large

On Gray 900 #18181b

Aa
5.26:1AAAAA Large

On Black #000000

Aa
6.23:1AAAAA Large

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

#918c8f
#84898c
#8f8e8c
#888888
#92898a

Create a gradient with Nuts and Bolts

Open the generator with this color pre-loaded.

Start creating