Mocha Ice
#dfd2ca
Cool gray-beige with mocha depth, steadier than neighbors
About Mocha Ice
Mocha Ice is the kind of gray-beige you notice in a mockup when the page suddenly feels calmer, not warmer or pinker. Compared to Humble Blush's rose-beige softness, this one reads more gray-forward and less skin-toned. It's also less peach-depth than Blushing Coconut, so it won't quietly lean flush on you. And unlike Coconut Macaroon, it doesn't carry that heavier, earthier beige weight.
On my screens, Mocha Ice lands as a pale, cool-leaning neutral with a restrained, milky finish. I use it for dashboards and healthcare interfaces where the UI needs warmth but still has to feel measured next to charts, forms, and documentation. It's especially good behind tables, filter panels, and editorial reading experiences with lots of neutral photography, because it stays light enough to recede.
Quirk: in very bright layouts it can look almost identical to nearby creams. I usually fix that by slightly tightening contrast in typography and icons so the card edges stay 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.
