Gray as in gray gray, as in your #333333? Aesthetically any hue can go with neutral gray. It’s so neutral. Now getting a combination of purple, green, and orange that won’t make your users throw up –that’s more a challenge.
Aesthetics (and personal taste) aside, your main concern is having sufficient brightness contrast between your gray and other colors so users can easily see and read stuff when one is the background for the other. To do that, first calculate the gray-scale brightness of both your foreground and background colors for a “typical” monitor:
Y = 0.2126 * (R/255)^2.2 + 0.7151 * (G/255)^2.2 + 0.0721 *
(B/255)^2.2
For example, #333333 is 0.0290, while #FF80FF is 0.4417. Now calculate their contrast:
C = (Y1 + 0.05) / (Y2 + 0.05)
Where Y1 is the brighter (larger value) of your two colors. For example, the contrast of #FF80FF and #333333 is 6.23. According to the W3C guidelines for accessibility, which is also a good guideline for “normal” users, your contrast should be at least 3.0 for large objects and text (e.g., greater than 14 point), and at least 4.5 for small detailed objects and text. In our example, we have enough contrast for either.
I’ve more on the usability of color combinations at Breaking the Color Code.