Windy
#bdd1d2
Cool, washed blue-gray for breezy panels and charts
About Windy
I notice Windy on mockups as soon as the page stops looking like it was born from pure white. It's that pale, powdery gray with a noticeably soft cool cast, but it never turns steely like Iron Fist or feels bluish-fogged like Up in the Air.
Compared to Coast to Coast, Windy sits a touch lighter and less saturated, so the background feels more like a breath than a panel. I use it as the one you reach for when you want secondary UI surfaces to look calm and slightly hazy, especially in dashboards and finance apps where card gutters, filter drawers, and table chrome need separation without stealing attention. It also works well in healthcare admin screens for settings pages and summary blocks where you want "clean" without that clinical bite.
Quirk: because it's airy, pair it with a darker mid-gray border or text; otherwise it can look a little flat next to crisp shells.
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.