Mysterious Color changes when saving for web in photoshop

I was going crazy again today trying to sort out color spaces in photoshop CC.  I kept saving the file with various color differences, and when I looked at the final jpg the color was different to what was on screen.

So much for WYSIWYG.  Anyway... This solution worked for me:

I Skipped step 3 and 4 (I couldn't figure out how to find them! Yes I am a noob).

If you're saving PNG or GIF images from Photoshop, they can't contain colour profiles. If you're saving JPEG images from Photoshop, they can contain colour profiles.
If you'd like Photoshop to match what you're seeing in your browser, and you're designing user interfaces, and you'd like colours in images to match colours in PNGs and GIFs, then here's how to set up Photoshop:
Step 1 — Choose Edit > Color Settings and set the working space for RGB to Monitor RGB.
Step 2 — If you’re using Photoshop CS6, click More Options and turn off Blend Text Colors Using Gamma, because it changes how non-opaque text is rendered. It should already be off, but if it’s not, turn off Blend RGB Colors Using Gamma as well.
Step 3 — Open a document and choose Edit > Assign Profile, then set it to Don’t Color Manage This Document. This must be done for every single document you work on.
Step 4 — Ensure View > Proof Colors is turned off.
Step 5 — When saving files with Save For Web, ensure Convert to sRGB is turned off. If you’re saving a JPEG file, then also turn off Embed Color Profile (there are some cases where you might want this on for photos, but chances are you’ll want it off for interface elements and icons).
This answer provides way more detail: http://graphicdesign.stackexchange.com/a/9241/3901

Sanity restored :)  Thanks Marc Edwards for your answer.