Head in the Clouds
#d1dde1
Mistier, warmer gray for soft panels and balance
About Head in the Clouds
Head in the Clouds is the gray that actually feels like air. It's so light it almost isn't there, lighter and less saturated than High Sierra, without the blue whisper that makes Bird Bath Blue feel intentional. This is what happens when you strip gray down to its thinnest point and let it breathe.
Use it for backgrounds in product interfaces where you need separation but not presence: empty states, secondary panels in SaaS tools, canvas areas in design software, finance dashboards and healthcare UIs where the content needs to own the space. It works the same way Goddess does, mostly invisible until you need it, but Head in the Clouds lands warmer and slightly more opaque, which means it won't feel quite as fragile next to structured elements.
The trade: pair it with something that has actual weight. Next to pure white it reads as almost nothing. But pull in darker grays, real content, a touch of color, and it becomes the surface you've been looking for, present enough to exist, quiet enough to get out of the way.
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.
Similar colors
Create a gradient with Head in the Clouds
Open the generator with this color pre-loaded.
Start creating