14. Appendix: Color Tutorial

(This appendix is not part of the formal PNG specification.)

About chromaticity

The cHRM chunk is used, together with the gAMA
chunk, to convey precise color information so that a PNG image can be
displayed or printed with better color fidelity than is possible
without this information. The preceding chapters state how this
information is encoded in a PNG image. This tutorial briefly outlines
the underlying color theory for those who might not be familiar with it.

Note that displaying an image with incorrect gamma
will produce much larger color errors than failing to use the
chromaticity data. First be sure the monitor set-up and gamma
correction are right, then worry about chromaticity.

The problem

The color of an object depends not only on the precise spectrum of
light emitted or reflected from it, but also on the observer --- their
species, what else they can see at the same time, even what they have
recently looked at! Furthermore, two very different spectra can
produce exactly the same color sensation. Color is not an objective
property of real-world objects; it is a subjective, biological
sensation. However, by making some simplifying assumptions (such as:
we are talking about human vision) it is possible to produce
a mathematical model of color and thereby obtain good color accuracy.

Device-dependent color

Display the same RGB data on three different monitors, side by side,
and you will get a noticeably different color balance on each display.
This is because each monitor emits a slightly different shade and
intensity of red, green, and blue light. RGB is an example of a
device-dependent color model --- the color you get depends on
the device. This also means that a particular color --- represented as
say RGB 87, 146, 116 on one monitor --- might have to be specified as
RGB 98, 123, 104 on another to produce the same color.

Device-independent color

A full physical description of a color would require specifying the
exact spectral power distribution of the light source. Fortunately,
the human eye and brain are not so sensitive as to require exact
reproduction of a spectrum. Mathematical, device-independent color
models exist that describe fairly well how a particular color will be
seen by humans. The most important device-independent color model, to
which all others can be related, was developed by the International
Lighting Committee (CIE, in French) and is called XYZ.

In XYZ, X is the sum of a weighted power distribution over the whole
visible spectrum. So are Y and Z, each with different weights. Thus
any arbitrary spectral power distribution is condensed down to just
three floating point numbers. The weights were derived from color
matching experiments done on human subjects in the 1920s. CIE XYZ has
been an International Standard since 1931, and it has a number of
useful properties:

• two colors with the same XYZ values will look the same to humans
  
• two colors with different XYZ values will not look the same
  
• the Y value represents all the brightness information (luminance)
  
• the XYZ color of any object can be objectively measured
  

Color models based on XYZ have been used for many years by people who need accurate control of color --- lighting engineers for film and TV, paint and dyestuffs manufacturers, and so on. They are thus proven in industrial use. Accurate, device-independent color started to spread from high-end, specialized areas into the mainstream during the late 1980s and early 1990s, and PNG takes notice of that trend.

Calibrated, device-dependent color

Traditionally, image file formats have used uncalibrated, device-dependent color. If the precise details of the original display device are known, it becomes possible to convert the device-dependent colors of a particular image to device-independent ones. Making simplifying assumptions, such as working with CRTs (which are much easier than printers), all we need to know are the XYZ values of each primary color and the CRT_gamma.

So why does PNG not store images in XYZ instead of RGB? Well, two reasons. First, storing images in XYZ would require more bits of precision, which would make the files bigger. Second, all programs would have to convert the image data before viewing it. Whether calibrated or not, all variants of RGB are close enough that undemanding viewers can get by with simply displaying the data without color correction. By storing calibrated RGB, PNG retains compatibility with existing programs that expect RGB data, yet provides enough information for conversion to XYZ in applications that need precise colors. Thus, we get the best of both worlds.

What are chromaticity and luminance?

Chromaticity is an objective measurement of the color of an object, leaving aside the brightness information. Chromaticity uses two parameters x and y, which are readily calculated from XYZ:

       x = X / (X + Y + Z)
       y = Y / (X + Y + Z)

XYZ colors having the same chromaticity values will appear to have the same hue but can vary in absolute brightness. Notice that x,yare dimensionless ratios, so they have the same values no matter what units we've used for X,Y,Z.

The Y value of an XYZ color is directly proportional to its absolute brightness and is called the luminance of the color. We can describe a color either by XYZ coordinates or by chromaticity x,y plus luminance Y. The XYZ form has the advantage that it is linearly related to (linear, gamma=1.0) RGB color spaces.

How are computer monitor colors described?

The "white point" of a monitor is the chromaticity x,y of the monitor's nominal white, that is, the color produced when R=G=B=maximum.

It's customary to specify monitor colors by giving the chromaticities of the individual phosphors R, G, and B, plus the white point. The white point allows one to infer the relative brightnesses of the three phosphors, which isn't determined by their chromaticities alone.

Note that the absolute brightness of the monitor is not specified. For computer graphics work, we generally don't care very much about absolute brightness levels. Instead of dealing with absolute XYZ values (in which X,Y,Z are expressed in physical units of radiated power, such as candelas per square meter), it is convenient to work in "relative XYZ" units, where the monitor's nominal white is taken to have a luminance (Y) of 1.0. Given this assumption, it's simple to compute XYZ coordinates for the monitor's white, red, green, and blue from their chromaticity values.

Why does cHRM use x,y rather than XYZ? Simply because that is how manufacturers print the information in their spec sheets! Usually, the first thing a program will do is convert the cHRMchromaticities into relative XYZ space.

What can I do with it?

If a PNG file has the gAMA and cHRM chunks, the source_RGB values can be converted to XYZ. This lets you:

• do accurate grayscale conversion (just use the Y component)
  
• convert to RGB for your own monitor (to see the original colors)
  
• print the image in Level 2 PostScript with better color
  fidelity than a simple RGB to CMYK conversion could provide
  
• calculate an optimal color palette
  
• pass the image data to a color management system
  
• etc.
  

How do I convert from source_RGB to XYZ?

Make a few simplifying assumptions first, like the monitor really is jet black with no input and the guns don't interfere with one another. Then, given that you know the CIE XYZ values for each of red, green, and blue for a particular monitor, you put them into a matrix m:

           Xr Xg Xb
      m =  Yr Yg Yb
           Zr Zg Zb

Here we assume we are working with linear RGB floating point data in the range 0..1. If the gamma is not 1.0, make it so on the floating point data. Then convert source_RGB to XYZ by matrix multiplication:

      X     R
      Y = m G
      Z     B

In other words, X = Xr*R + Xg*G + Xb*B, and similarly for Y and Z. You can go the other way too:

      R      X
      G = im Y
      B      Z

where im is the inverse of the matrix m.

What is a gamut?

The gamut of a device is the subset of visible colors which that device can display. (It has nothing to do with gamma.) The gamut of an RGB device can be visualized as a polyhedron in XYZ space; the vertices correspond to the device's black, blue, red, green, magenta, cyan, yellow and white.

Different devices have different gamuts, in other words one device will be able to display certain colors (usually highly saturated ones) that another device cannot. The gamut of a particular RGB device can be determined from its R, G, and B chromaticities and white point (the same values given in the cHRM chunk). The gamut of a color printer is more complex and can only be determined by measurement. However, printer gamuts are typically smaller than monitor gamuts, meaning that there can be many colors in a displayable image that cannot physically be printed.

Converting image data from one device to another generally results in gamut mismatches --- colors that cannot be represented exactly on the destination device. The process of making the colors fit, which can range from a simple clip to elaborate nonlinear scaling transformations, is termed gamut mapping. The aim is to produce a reasonable visual representation of the original image.

Further reading

References [COLOR-1] through [COLOR-5] provide more detail about color theory. function changeStyleReset() { var fields = [ "yb", "ar", "fl" ]; for (var color in fields) { var as = document.getElementById(fields[color]).style.backgroundColor="transparent"; } } function changeStyleWhite() { var fields = [ "yb", "ar", "fl" ]; for (var color in fields) { var as = document.getElementById(fields[color]).style.backgroundColor="#ffffff"; } } function changeStyleBFBFBF() { var fields = [ "yb", "ar", "fl" ]; for (var color in fields) { var as = document.getElementById(fields[color]).style.backgroundColor="#bfbfbf"; } } function changeStyle3F3F3F() { var fields = [ "yb", "ar", "fl" ]; for (var color in fields) { var as = document.getElementById(fields[color]).style.backgroundColor="#3f3f3f"; } } function changeStyle7F7F7F() { var fields = [ "yb", "ar", "fl" ]; for (var color in fields) { var as = document.getElementById(fields[color]).style.backgroundColor="#7f7f7f"; } } function changeStyle3F3F3F() { var fields = [ "yb", "ar", "fl" ]; for (var color in fields) { var as = document.getElementById(fields[color]).style.backgroundColor="#3f3f3f"; } } function changeStyleBlack() { var fields = [ "yb", "ar", "fl" ]; for (var color in fields) { var as = document.getElementById(fields[color]).style.backgroundColor="#000000"; } }

HSL representation in sRGB color space - 125 colors - Hexadecimal (4 steps).

To the right of each vector field is an image that shows the grayscale of the it's respective vector field. Fixed at the bottom of the veiwport is a background selector.

HSL_color_space

CSS Class test

---