Introduction to Color

Goal

The goal of this project was an easy to use, interactive educational aide to help students better understand the concepts of color, its characteristics, representations and transformations as applied to computer graphics.

It is fair to name Isaac Newton as the father of color science because of his famous experiments performed in 1666 [1]. Since then, the many aspects of color have been collected to form a full-fledged science.

Disclaimer: These pages are not intended to be a complete color tutorial. This tool should not be used for any measuring or calibration purposes.

Foreword: The Eye Is Not A Device

We begin with spectrum. A spectrum is a contiguous band of wavelengths, which is emitted, reflected or transmitted by different objects. The human eye can not see the entire spectrum; the visible range is approximately 400 (blue) to 700 (red) nanometers (nm). In practice, a spectrum is represented as an array of numbers that are measured intensities at different wavelengths. A spectophotometric device usually has resolution of 1-3 nm, thus measuring 100 to 300 values to quantify just the visible range.

Suppose that a very simple device scans a spectrum every 3 nm (100 points per 300-nm visible range) and measures each point with only 8-bit accuracy. This means that the device can distinguish more than 10240 different spectra (that many numbers can be coded by 8 bits * 100 points = 800 total bits of data). That is more than a square Gougol! But humans can only distinguish some 10 million colors. This is because the eye has only three types of  cone receptors in the retina that respond to light of various wavelengths. Thus, the brain receives only three signals for each spectrum, that gives us the perception of color. Therefore, it is possible to represent a perceived color by three numbers (or coordinates), e.g. red, green and blue.

The Applets

Note: To run these applets you will need a Java-enabled browser.

The Spectrum Applet lets you draw a spectrum consisting of 16 data points; the spectrum is "perceived" by the computer eye, which calculates three numbers: X, Y, and Z. These numbers are called the CIE primaries. These are converted to red, green and blue components that are then added to produce the resulting color.

The Chromaticity Diagram and Gamut Applet introduces the notions of the chromaticity diagram and the color gamut. The chromaticity diagram is defined by the X+Y+Z=1 plane. A color gamut is a range of colors defined on the chromaticity diagram. Here you can explore the effect of adding colors together.

The Color Spaces Conversion Applet demonstrates how color is represented in different color spaces and how conversion between these spaces can be done. There are many different color spaces, but only four of them - RGB, HSV, YIQ and CIE L*a*b* are presented here. Each color space, when selected, is implemented as a separate Java frame. A change to any one of them will result in the appropriate changes in the others. Note: All images are computed in real time and have been optimized to improve performance.

The Color Matching Game Applet allows you to select a color space and then try to match two colors. It turns out to be rather difficult, so please be patient and carefully watch the hints. This is for those of you who have successfully run the previous applets and are mentally able to visualize each of the color spaces in 3D.

Color Conversion Algorithms

Java Class API

Java Source Code

Project Write-Up

User Manual

Technical Documentation

Glossary

Bibliography

Author Info