This is why color management was invented.
Numbers - including hex numbers - mean nothing until they are defined in a color space. For web this normally means sRGB. The profile defines any given RGB triplet as a specific color. Without the profile the numbers are undefined.
I don't know if the GIF format even supports icc profiles (I have never used it). But if Photoshop's working RGB is set to sRGB, and SFW Preview is set to "Use Document Profile", they should match. Or they would in any format that supports color management.
Gif are for the Web therefore, the colors will be sRGB colors. Gif only supports a max of 256 Colors, If the animated gif has transparency that number of mapped colors is reduced by one to 255. Color in the image are mapped to one of the 256 colors selected for the image.
And by the way, what should I do to match the original color?
Go into each tab, "original" and "optimized", and set preview to "Use document profile" in both. The "2-up" tab displays according to each individual tab.
Even if GIF doesn't support icc profiles, and so all bets are off once you export, the two views will at least be consistent.
Keep your working RGB at sRGB. In the absence of any icc profile in the document, Photoshop defaults to your working space for display.
Check "convert to sRGB" just to be sure. This will make a difference with "monitor color", if the original is something other than sRGB, because it is then displayed without any color management at all. And in case the original file is untagged, working RGB must be sRGB.
Other than that, I simply can't produce a difference here no matter what I do, as long as both tabs are set to "use document".
Recheck that both tabs are set this way. There's no other explanation, and if you still see a difference something's wrong. There shouldn't be.
Sorry, but as a matter of principle I never download from unknown sources. Nothing personal.
But there's no need. This is the color you want:
This patch is a PNG file with sRGB embedded, and can be used as a reference. Right-click, save as, and open it in Photoshop.
Now, it's important you realize that e4e4e4 (228-228-228) produces this particular color in the sRGB color space, specifically. If no icc profile is embedded in the file, those numbers are undefined and will produce different colors on different devices.
If this file was in a different color space, like Adobe RGB, or your monitor's native color space, those exact same numbers would result in a different color. And vice versa.
As I've pointed out, GIF doesn't support icc profiles or color management. But Photoshop displays as if it did, by always defaulting to the working space if no profile is present. So as long as your working space is sRGB, Photoshop will display GIFs consistently.
I wish I had the option to upload the .psd file here..but it was the only method. The ideea is that taking the color from your rectangle (eaeaea) and changing my background color worked! Can you also tell me how can I match in the future such scenarios? How did you get that eaeaea?
Thanks a lot!
You can upload the PSD to a site like dopbox and link it here.