Puffy Pillow

#e7e5de

Warmer, puffier gray-beige with soft neutral lift

Save
Share

About Puffy Pillow

I keep running into Puffy Pillow on mockups where the background needs to feel padded, not stark. It reads like a soft, light gray at first glance, but it has a clearer gray body than and a less dusty, less wool-leaning look than .

Compared to , it sits a touch less crisp and slightly more velvety in the finish, so UI stays airy without turning into that cool, high-contrast gray. I like it for settings panels, catalog filtering, and light-mode marketing pages where product photos or illustrations are warm. It also holds up in e-commerce admin screens and logistics dashboards, especially under charts and table headers that need breathing room without going near-white.

Pair it with greys that carry some warmth in the inks, or you'll feel the whole layout drift a little flat and anonymous.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
1.26:1Fail

On Gray 100 #f5f5f5

Aa
1.16:1Fail

On Gray 900 #18181b

Aa
14.06:1AAA

On Black #000000

Aa
16.66:1AAA

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

#e8e5de
#e6e4de
#e5e4dd
#e7e3db
#ebe3de

Create a gradient with Puffy Pillow

Open the generator with this color pre-loaded.

Start creating