Hex Codes not matching up? PNG vs. JPG? Exporting? Anything?

[TheAgeofNick]

Hi everyone! For a bit of context, I'm new to graphic design and have no institutional background in it—therefore I do not know much about the technical side (document setup, exporting, etc.)

Anyways, I create graphics for a student organization at my college. Recently, someone pointed out that the colors I'm using have stopped matching from the original color palette. I thought this was strange as I always pull directly from the original Ai color palette file. But, I checked and sure enough, they aren't the same after exporting as a JPG. When I export as PNG and use a third-party hex code picker (or Photoshop) they are the correct hex codes, but when I bring the "correct" PNG into the actual design file the hex codes of the PNG become slightly off? I tried this on my roommate's illustrator and there was no issue at all. I've messed with Color Setting, Assign Profile, and even resetting my preferences through Bridge but still, nothing can correct this weird mistake of my colors being sometimes right and sometimes wrong.

To describe the picture below. I saved the original/correct color palette as a PNG and JPG. I then opened them separately and both were correct, but as soon as I brought them together, one of them becomes slightly off. In this case, the JPG became E6612C instead of E6612B (I know this is a small change, but the student organization really wants me to figure it out).

[Mylenium]

Really not much more to say than the total absence of any color management. Obsessing about hex codes under such conditions is pretty much pointless. And there you have it: Both AI and PS are color managed/ color aware apps and without setting up correct CM of course can mess up your colors because they operate on wrong assumptions about color spaces and color profiles. As the bare minimum you will have to actually use proof previews to even be able to gauge colors. Beyond that CM is an infinitely complex topic, so I suggest you read the relevant sections of the respective program's online help and study up a bit on CM in the broader sense. In your case you may likely simply want to un-screw your CM by resetting monitor profiles to sensible defaults and use a generic sRGB or AdobeRGB profile for the workspace.

Mylenium

[Test Screen Name]

Even WITH colour management, JPEG will always change colours a little; that's how it works. It is impossible for JPEG to exactly keep colours.  Expect changes of 1-3 per channel. 

[Monika Gause]

And if they don't believe you, show them this: https://www.youtube.com/watch?v=Kv1Hiv3ox8I

[Creamer Training]

To recap, PNG is lossless, JPEG is lossy. 

JPEG saves space by compressing color information and usually is not recommended for graphics with areas of flat color. Save JPEG for rectangular photos (or photo-like images), not logos, charts & graphs, etc.

To set your color management across AI, PS, and ID all at once, use Adobe Bridge. As @Mylenium mentioned, use sRGB for web graphics.