Zen Pebble
#bab8ad
Cooler, drier gray for crisp, minimal UI layers
About Zen Pebble
Put Zen Pebble on a white UI and it immediately reads like softened river rock. It's a gray that stays calm, but not passive. Compared to Ash, it doesn't carry that cooler, dustier backbone and lessens the "committed" feel. Compared to Pelican, it skips the creamy warmth and holds a steadier neutral. Compared to Techno Taupe, it feels more like true stone than engineered taupe, less smoky and less deliberate.
I like it as a base for dashboards and finance apps, especially when you need quiet surfaces behind dense tables, toggles, and report controls. It also works well for admin portals in logistics and healthcare, where lots of labels need to sit without fighting your hierarchy. The mood is grounded serenity with a lightness that keeps pages from feeling heavy, the one you reach for when you want neutrality that won't drift toward beige as soon as a warm accent shows up.
Pair it with charcoal type and crisp dividers. If you go too bright with accents, Zen Pebble can start to look flatter than you expect.
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.