As an example to illustrate the construction of a webpage with a canvas where simple geometry is drawn, we investigate the position of the RGB colour space in the classic chromaticity diagram.
The webpage is developed in the following steps:
Press F12 in your browser to view the source behind each step. The final result with a more complete text follows below.
It was originally proposed by Young [1802], and later confirmed by Helmholtz [1867], that the eye has three receptors. It was conjectured that all the colours we are able to see are a combination of three principal colours: Red, green, and blue. While the real colour receptors in the eyes do not precisely measure red, green, and blue, the Young-Helmholtz theory is essentially true. It is indeed possible to represent all visible colours by three values. The CIE (Commission Internationale de l'Eclairage) has chosen a set of standard conditions for measuring the human response to colour. Following these standard conditions, different sets of curves have been measured which translate a spectrum to a trichromatic representation.
Three curves have been made which translate a spectrum to a red, a green, and a blue colour. They are referred to as the CIE RGB colour matching functions. Described very concisely, the colour matching functions were determined experimentally using three almost monochromatic light sources: r = 700 nm, g = 546.1 nm, and b = 435.8 nm. An observer was shown a target colour and then mixed the light from the three monochromatic sources in different intensities until the target colour was matched. To match all the colours, it turned out that it was sometimes necessary to add some light directly to the target (instead of in the mix of r, g, and b). This is interpreted as "negative" colour and it is the reason why the RGB colour matching functions are sometimes negative. To avoid negative colour values, the CIE also has three curves called the XYZ colour matching functions. These have been chosen such that they represent all the visible colours without being negative.
Figure. The chromaticity diagram. The outermost triangle illustrates the XYZ colour space. The grey triangle illustrates the RGB colour space. The innermost black triangle shows the gamut of a standard CRT display.
According to Stockman and Sharpe [2000], the "most secure and extensive of the available color matching data" is the 10° RGB colour matching functions of Stiles and Burche [1959]. The 10° mean that the size of the target colour is ten degrees around the center of the observer's visual field. A slightly corrected version of Stiles and Burche's RGB colour matching functions was included in the work of Stockman and Sharpe [2000]. These are the curves I have used to draw the figure. Let us use the notation $\bar{r}(\lambda)$ for the red colour matching function, $\bar{g}(\lambda)$ for the green function, and $\bar{b}(\lambda)$ for the blue function. The way of computing RGB colour values from a spectrum is \begin{eqnarray*} R & = & \int_{\mathscr{V}} C(\lambda)\bar{r}(\lambda) \, \mathrm{d}\lambda \\ G & = & \int_{\mathscr{V}} C(\lambda)\bar{g}(\lambda) \, \mathrm{d}\lambda \\ B & = & \int_{\mathscr{V}} C(\lambda)\bar{b}(\lambda) \, \mathrm{d}\lambda \enspace , \end{eqnarray*} where $\lambda$ is the wavelength, $\mathscr{V}$ denotes the interval of visible wavelengths (approximately from 380 nm to 780 nm), and $C(\lambda)$ is the spectrum that we want to translate to RGB.
Computer monitors do not emit light at the same almost monochromatic red, green, and blue colours as the ones used to find the colour matching functions. One way to show the difference between colour spaces is to plot them in a chromaticity diagram. A chromaticity diagram has an arced curve which corresponds to all the monochromatic colours (see the figure). In-between the monochromatic colours, the diagram illustrates how spectra with a mix of monochromatic colours form the colours that we see. A trichromatic colour space is a triangle in the chromaticity diagram. The XYZ triangle encompass the entire chromaticity diagram. This means that some XYZ colours are not visible. The RGB triangle does not go outside the shape formed by the arc of monochromatic colours. This is not surprising since it was made with almost monochromatic light sources. Since the shape with all the visible colours is convex, any trichromatic colour space defined by points inside the shape will require negative colour values to capture all the visible colours. The figure shows the difference between the trichromatic colour values given by the RGB colour matching functions and by the XYZ colour matching functions.
A CRT (Cathode Ray Tube) display is limited by the radiation capabilities of the phosphors that it has been build with. An LCD (Liquid Crystal Display) is limited by the radiation spectrum of the backlight it has been build with. In general a display cannot show colours outside the triangle spanned by the three primary colours that it uses. This triangle is called the gamut of the display. The figure shows the gamut of a standard CRT display. The CRT gamut and the LCD gamut are fairly close to each other in most colour regions [Sharma 2002]. It should be noted that the shape and orientation of the typical displaygamut and the triangle defining the RGB colour space are quite similar in shape and orientation. This means that the RGB colour matching functions will, in most cases, translate a spectrum to RGB colour values that make sense when displayed on a computer screen. If one wishes to perfect the colours displayed on a screen, the solution is to make a 3×3 matrix which transforms XYZ or RGB colour values to the gamut of the monitor. This requires knowledge of the gamut and the monitor white point. How to find the transformation matrix, when this information about the display has been obtained, is described by many authors. See, for example, the recipe by Glassner [1995, Sec. 3.5].
If we choose to transform our trichromatic colour values to suit the gamut of a display, it is important that we do not transform them until we have the final pixel colours for an image. It is common practice in graphics to use trichromatic colour values throughout a rendering. This means that absorption spectra, scattering spectra, etc. are all translated to a trichromatic colour space. If we use this approach instead of spectral rendering, it is incorrect to us monitor specific colour values. The rendering should be done with CIE XYZ or CIE RGB colour values. Adaption of the colours to a specific display is the final step. If we use the RGB colour matching functions, for example, to translate an absorption spectrum to RGB, we may run into problems with negative values. Negative absorption does not make sense (in this context). Therefore the XYZ colour matching functions are the safest choice. The disadvantage of the XYZ colour space is that we have to translate the values to some other space before we display them. This makes the XYZ colour space less convenient. In the rendering programs made for this thesis, I have chosen to use either CIE RGB rendering or full spectral rendering with conversion from spectrum to RGB using the RGB colour matching functions. I have not run into negative colour values. If negative colour values are encountered, they should be corrected using a gamut mapping technique. Glassner [1995, Sec. 3.6] describes some of these techniques and gives pointers to other references.