I know I'm way late with coming into this topic, but I just saw it for the first time as the latest response jumped it to the top of the recent posts list.
Easier answer first, when it comes to how color displays in Safari versus Firefox and Chrome.
Safari is the only fully color managed web browser available. Here's the difference:
Safari is fully color managed for all images that have an attached profile. So it doesn't matter if the image is set as sRGB, Adobe RGB, Wide Gamut RGB, or whatever. It knows where that image's color lands in relation to L*a*b*, and so can properly convert it to your monitor's profile, giving you the expected color on screen.
Safari goes further than that. It's the only browser that assumes sRGB for all untagged color. That includes images, background color, text, you name it. If it isn't tagged, sRGB is applied automatically. This isn't always the correct choice since the creator of a site may have been editing everything in Adobe RGB and saved the images without a profile attached. But the vast majority of web work is in sRGB. So, with or without a profile attached, it's the correct assumption most of the time.
Firefox and Chrome are also fully color managed, but only when they have profiles to work with. All untagged color is not assumed to be anything. They're just straight up RGB values. Because of that, all untagged color is made to fit your monitor's profile. On a wide gamut monitor, that means everything that has no tag will display very saturated.
And no, it doesn't help to set your wide gamut monitor to sRGB, or choosing sRGB as your monitor profile in the Displays settings. That actually makes things worse. You're simply telling the system to make all color fit sRGB. Your monitor though is still a wide gamut display. So, a 255,0,0 sRGB red simply sends a signal of 255,0,0 to the monitor. Since your monitor's physical panel knows not one thing about color management, it displays a 255,0,0 value exactly as that. The brightest possible red your monitor can display. Not how 255,0,0 should actually look as an sRGB value where it falls in L*a*b*. This issue, of course, applies to the entire color spectrum. sRGB is force fitted to your monitor's actual ability and everything displays wildly over saturated.
You can't do anything about how text, or other non image color displays in Firefox or Chrome, but you can get all images to display as you expect by making sure to embed every image with the correct profile. That being the color space you were working in. Or, in Photoshop's Save for Web export, have it convert the color to sRGB, making sure to have it also embed the profile.
However, none of this will work if the color on your monitor is meaningless. In order for it to have any meaning to anything, it needs to be correctly calibrated and profiled.
Using the built-in Calibrate function is a complete and utter waste of time. It works by assuming your monitor is always displaying a perfect 6500K white point, 2.2 gamma as the starting point. Always. That's what Calibrate does when you first enter the function. It sets those values as the starting point so it can make a reasonable guess what your changes look like. This is impossible since all monitors drift as they age. It will be close to 6500K, 2.2 gamma out of the box, but after about six months, will never be that perfect, or close to perfect again.
You're also literally only doing a rough calibration. The profiling part never happens. All Calibrate does after you click Okay for your calibration settings is apply a mathematical curve to the existing profile values to try and simulate what an actual profiling procedure would produce.
It's all a guess, from start to finish.
The only way to get a proper calibration and profile based on that calibration is to use a hardware/software system, such as the X-Rite i1 Display Pro. It first runs you through the steps to calibrate the monitor. Which is setting your white value, black value and brightness (it doesn't do gain). After the calibration is done, it then runs a series of color patches to build a profile based on those calibration settings.
When you're done, you have a LUT for your calibration, and a genuinely accurate profile for your monitor. ColorSync now knows exactly how your monitor displays color instead of guessing, and can accurately fit it to L*a*b*. Which means all conversions to other color spaces are also accurate.
What you can't do anything about are the millions of badly profiled (or not profiled at all) monitors in the world. You can only make your color accurate.
