Zen
#cfd9de
Muted cool-gray with airy balance, less blue
About Zen
I think of Zen as that soft overhead-light gray you notice in a spa lobby, where everything looks clean but nothing feels icy. It sits a touch darker and more neutral than the near-white Breather-of-air look, so the surface actually shows its structure instead of disappearing. Compared to the blue-leaning Bird Bath Blue, Zen keeps the cool from turning into a "blue first" read.
On screens, Zen works for settings where you want calm without a blue signal: healthcare booking flows, patient portal panels, legal/insurance document viewers, and the quiet backgrounds in newsroom templates. It's also my go-to for card shells and section dividers that need a restrained gray foundation while staying warmer than pure white. If you stack it next to King of Waves, you'll feel the difference fast: Zen has less watery lift and holds edges with steadier, grayer weight.
One quirk: pair it with crisp typography, because with thin light-gray type it can start to feel slightly flat. Add a deeper slate or richer ink for the best balance.
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.