Lucky Grey
#777777
Cooler, lighter neutral for restrained UI panels
About Lucky Grey
Lucky Grey looks like a finished desk after a long day, not a blank wall. It's cooler than Concord's faint brown touch, and it doesn't carry the dusty warmth of Bat Wing. Compared to Grey, it has a bit more life, a gentle lift in lightness and a slightly softer undertone that keeps it from feeling purely "off button."
I use Lucky Grey for UI surfaces that need to stay calm but not dead: admin panels in SaaS, newsroom CMS back-ends, and the gray-heavy workspaces in fintech reporting. It's a great neutral for tables and form areas where you want readable type without the page going flat. This shade also plays nicely when you're mixing darker grays and brighter accents, because it doesn't demand temperature shifts from neighboring colors.
Quirk: if you drop it next to very dark surfaces, it can feel a little too quiet. Add a stronger border or bump contrast in the text weight so it stays intentional, not tentative.
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.