 On one monitor |  On another |  On an third |
These three pictures show the same image as it might appear when displayed on three different monitors. The type of computer doesn't matter so much here, though we assume that appropriate gamma correction has already been done.
Although very similar, there are clear differences in the green of the leaves, the shade of blue on the boy's arm, and the color of the girl's shirt and the children's faces.
Looking at any of the shirts, you wouldn't want to order a garment thinking it was an off-white and then find it was actually cream, or beige. Sometimes, you need to be sure you are seeing the right color. But the more you look, the more the same image looks different on each monitor.
This effect is caused by differences in the exact shade of red, green and blue light that each monitor emits. Different brands use different phosphors - the light emitting chemicals that generate the picture we see - and the precise shade of white differs quite a lot, too. (Think how many shades of white paint you can buy nowadays).
It is easiest to discuss the effect using a diagram.Don't worry about what the numbers mean (they are color measurements, called chromaticity), concentrate on the shape.
The color gamut of a typical color monitor
Now imagine a different triangle and a different white point, representing a different monitor. Take all the colors on the first monitor's triangle and stretch it, like a rubber sheet, to fit the new triangle. Clearly, all the colors move - they become differnt colors. That is the effect we saw above.
PNG stores the chromaticity values - the position of the triangle corners, plus the white point - used by the source platform which created the image, in a standard place in the file which browsers, image viewers and authoring tools know how to read and adjust for. Together with the gamma, which we discussed earlier, this permits automatic adjustment to get very close to the colors you would measure from the original image.