Rough Asphalt

#bdbebf

Duller mid-gray with asphalt undertone for grounded UI

Save
Share

About Rough Asphalt

Rough Asphalt is the gray you notice on the edge of a fresh patch of pavement, not the clean "almost-white" of polished surfaces. It sits darker and a bit grayer than , so it doesn't feel like a mid-day wipe-down, and it doesn't carry the cool refrigerator drift of or .

What I like is how it reads grounded in UI even when everything around it is bright. Use it for panel backgrounds, dense table rows, and filter bars in dashboards and finance apps when you need separation without going bluish. It's also my go-to for section dividers in logistics portals and field-service admin screens where the interface should feel sturdy, not airy. This is the one you reach for when you want warmer than pure white contrast that still stays firmly neutral, with restrained saturation and a slightly muted, asphalt-like mood.

Quirk: place it next to very pale grays and it can look a touch heavier, so I usually bump borders one step darker or lean on cleaner neutral text for hierarchy.

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
1.86:1Fail

On Gray 100 #f5f5f5

Aa
1.71:1Fail

On Gray 900 #18181b

Aa
9.52:1AAA

On Black #000000

Aa
11.28:1AAA

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

#c0c0c0
#babfbc
#bebec4
#babcc0
#bdbcc4
#c0c2c0
#c0bfc7

Create a gradient with Rough Asphalt

Open the generator with this color pre-loaded.

Start creating