Plein Air
#b9c4d2
Paler periwinkle-gray for airy, cool layouts
About Plein Air
Plein Air looks like the cool gray you spot on exterior trim after a long, cloudy walk. It's airy like Icebreaker, but it doesn't drift as blue, and it avoids the slightly dusty feel of Steel Mist and Magnesium. Compared with those nearby grays, this one reads softer and more neutral, with a calmer, "sky after rain" undertone rather than a refrigerator or smoked-steel vibe.
I use it when I need a light surface that still holds its own against white cards, especially in dashboards and healthcare platforms where you want sectioning without feeling sterile. It's a great choice for panel backgrounds, secondary headers, and input surfaces in SaaS admin screens, and it stays steady in mixed UI states. If Icebreaker is the more blue-tinged cousin and Magnesium feels more workmanlike, Plein Air lands in the middle: the one you reach for when you want quiet clarity without shifting temperature.
Quirk: it can look a bit washed out next to very bright whites, so I usually pair it with slightly deeper borders or cooler gray type to keep the hierarchy crisp.
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.