Moonbeam
#c2b8ae
Lighter, neutral gray with a moon-cool drift
About Moonbeam
I keep Moonbeam in mind when I'm staring at a grayscale mock and thinking the page feels a touch too chalky or too cold. This one lands between cool gray and soft warmth, so it reads light and steady rather than beige-y, and it doesn't carry the brown insistence of Couch Potato.
Compared to Dinosaur Egg, Moonbeam is gentler about its warmth, with less visual weight and no "midday sunlight" wobble. I use it in dashboards and finance apps where charts and tables need a calm surface that still feels composed up close, and in editorial reading views where images should look present without pressing forward. For UI, it's great behind cards, empty states, and secondary panels because it works harder than it looks.
One quirk: pair it with clean ink-black text and it stays crisp, but if you lean too far into warm saturated colors, it can start to look slightly dusty instead of clean.
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.