User Guide
Table of Contents
1. Introduction
2. The Spectrum Applet
2.1 Description
2.2 Input/Output
2.3 Limitations
3. The Chromaticity
Diagram and Color Gamut Applet
3.1 Description
3.2 Input/Output
3.3 Limitations
4. The Color Space Conversions Applet
4.1 Description
4.2 The RGB Color Space
Frame
4.3 The HSV Color Space
Frame
4.4 The YIQ Color Space
Frame
4.5 The
CIE L*a*b* (CIELAB) Color Space Frame
5. The Color Matching Game Applet
Introduction To Color is an interactive computer graphics teaching tool that is implemented in Java and is resident on the World Wide Web. It is implemented as a set of four applets. When a Java-enabled web browser displays one of the pages that contain an applet HTML tag, the applet's bytecode will be downloaded from the server and executed locally on the client machine.
Since Java is an interpreted language, performance may be of serious concern. Measures have been taken to speed up time consuming computations of the images and improve the applets' response to the mouse motion events.
This guide contains descriptions of the four applets.
2.1 Description
This applet demonstrates how a perceived color is related to a spectrum. A
spectrum is defined as a polyline with 16 breakpoints; it is matched with the CIE
color-matching functions to produce the CIE XYZ values. These XYZ values are then
converted to the red, green and blue components that are added together to produce the
resulting (perceived) color.
2.2 Input/Output
Input
* mouse: dragging the spectrum's breakpoints up or down;
Output:
* the spectrum is modified according to the new positions of its
breakpoints;
* the XYZ values are updated;
* the resulting RGB color is displayed.
2.3 Limitations
For some spectra, the (X,Y,Z) triplets may produce R, G or B values that are
either greater than 1 or less than 0. Since the resulting color is a sum of the R, G, B
components, such spectra do not have adequate RGB representation, and the resulting color
is labeled as "Invalid RGB...". In other words, not all colors matched with CIE
XYZ primaries, can be represented with positive red, green, and blue components. This may
happen quite often. This is a limitation of the RGB color system.
The conversion from the XYZ to the RGB components assumes the standard D65 daylight illuminant. There are other standard illuminants defined by the CIE, and the provision should be made or the user to select any of them (although D65 is most frequently used).
For simplicity reasons, the spectrum input is limited to 16 data points, that is for 400 to 700 nm range the interval is 20 nm. For accurate color measurements one must use the standard color matching functions tabulated at 5 nm intervals.
3. The Chromaticity Diagram and Color Gamut Applet
3.1 Description
This applet introduces the notions of chromaticity diagrams and color gamuts. The
CIE chromaticity diagram is computed and displayed; the dominant wavelengths are arranged
along the spectral locus. You can create a three-point gamut on the chromaticity diagram.
To do so, point and click with the mouse on three different locations within the diagram.
This will create a triangular gamut.
Below the diagram is the proportional mixer control, that enables you to additively mix colors of the gamut vertices in various proportions to produce a mixture. The initial proportion is set to 1/3 for each of the three values. To operate the mixer, simply drag a slider or click on any colored strip. Note that the mixer is disabled until all three vertices of the gamut are defined.
As you operate the mixer, the resulting color is displayed below the diagram as a solid rectangle and the color's position is indicated on the chromaticity diagram by the marker. An interesting property of the chromaticity diagram is that for any gamut (not only triangular) an additive mixture of the vertices' colors lies always inside the gamut. Note that the marker is always confined within the gamut.
3.2 Input/Output
Input:
* mouse: click on the diagram to add new gamut vertex;
* mouse: control the mixer.
Output:
* new gamut is created on the diagram;
* the resulting color is displayed and its position is indicated on the
diagram by the marker.
3.3 Limitations
This applet only allows to create triangular gamuts.
4. The Color Space Conversions Applet
4.1 Description
This applet demonstrates how color is represented in the RGB, YIQ, HSV and CIE
L*a*b* (CIELAB) color spaces, and how conversion between these spaces works. Each color
space appears as a separate Java frame. In some browsers there may be a warning displayed
in this frame, but there is nothing to worry about. To select a color space, click on one
of the buttons:
This results in loading Java programs from the server to your browser, and it takes some time. Please be patient, and do not click on the same button twice - this will result in two copies of the same color space. This only happens for the first time (unless your browser's cache is disabled); later you can destroy/create any color space frame as many times as you wish.
All active color space frames are synchronized to show the same color. That is, if you change the color's coordinates in one space, the change will be propagated to other frames. All frames contain controls to enter color coordinates and colored rectangles at the bottom indicating the current color. When the browser leaves the applet's page, all active frames are disposed of automatically.
4.2 The RGB Color Space Frame
This frame contains the wire-frame RGB cube with colored vertices. The grey ball
represents the current position. You can rotate the cube by dragging the mouse. The two
dither planes, shown above the current color, represent the blue-magenta-red-black and
green-yellow-red-black sides of the RGB cube, and are used to enter coordinates with the
mouse (drag or point-and-click).
4.3 The HSV Color Space Frame
The HSV coordinate system is cylindrical, and the model is defined as a hexcone
(six-sided pyramid turned upside down). The vertical position defines brightness, the
angular position - hue, and the radial position - saturation. Saturation always ranges
from 0 to 1, and specifies relative position from the vertical axis to the side of the
hexcone. The colored hexagon on the left is a horizontal slice of the hexcone, shown on
the right as a light-grey plane. The white marker (cross) indicates the current position
(H and S values).
4.4 The YIQ Color Space Frame
The wire-frame RGB cube is shown now in the YIQ space (thus, deformed). It may be
rotated, as in the RGB frame, by dragging the mouse over the cube's canvas. Note that if
the grey ball crosses the boundary of the volume defined by the cube's sides, it results
in "Invalid RGB...".
4.5 The CIE L*a*b*
(CIELAB) Color Space Frame
In this color space, the L* slider defines lightness, a* denotes red/green value,
and b* the yellow/blue value. A slice of the CIELAB space by the plane L*=const, that
produces the valid RGB values, is shown. a* axis is horizontal, b* is vertical. When the
white cross travels outside the slice, it results in "Invalid RGB...".
This frame lacks a 3D representation of the CIELAB color space. One can get a vague idea of how this space looks like by working through the slices and mentally stacking them up, but it is not easy.
5. The Color Matching Game Applet
This applet is intended to be used as a "test" of how well you can imagine a color space. It lets you select one of the four color spaces used in this project to match two randomly generated colors. The matching color is the color of the inner rectangle, the color to be matched is the one of the outer rectangle. The slider controls depend on the selected color space. You can click on the Start Again button the generate new pair of colors. As you try to match the colors, the progress hint is displayed below.
The "Invalid RGB..." seems to be a general limitation of the applets. However, getting this message is normal. It simply means that for a particular color space the color's current coordinates cannot be represented as valid RGB numbers (and thus cannot be displayed on the monitor without distortion). Indeed, the RGB gamut does not cover even all visible colors, let alone those that may be specified in other coordinate systems. Putting constraints on the allowed coordinate ranges would have made the user interface to the YIQ and LAB frames very ambiguous, for dynamic range recalculations result in rescaling of all the controls.