Light

Before starting about color models, it's important to know how the human eye and brain turn light into color.

Light itself is an electromagnetic wave. Electromagnetic waves are similar to sound waves in that they contain different frequencies, but are electromagnetic and can propagate in vacuum. EM waves are thus a signal that's made out of one or more frequencies, for example the EM waves used by a microwave oven are very high frequency, while radio waves are very low frequency. The eye is only sensitive to a very narrow band of frequencies, namely the frequencies between 429 THz and 750 THz (1 THz = 1 TeraHertz = 10^12 Hz). All other EM waves can't be seen.

Monochromatic light is light made up of one single pure frequency (this is certainly not the general case, most light you see is multichromatic). Monochromatic light looks to the eye as a pure color, and can never be white or magenta. Since it contains only one frequency, the wave of monochromatic light can be represented as a sine:



The height of the sine is the amplitude or how bright the light is. The width of one period (called lambda) is the wavelength of the light, and is inversely related to the frequency: since the light travels at 300000000 m/s, it's wavelength is 300000000/f where f is the frequency. So the visible spectrum of light has wavelengths from around 400 to 700 nm.(1 nm = 10^-9 meter).



This visible spectrum shows all the possible colors that can be made out of monochromatic light. Some light sources, such as lasers and Natrium lights, send out monochromatic light, but in general, light is multichromatic. For example, the sun sends out white light, which is light that contains ALL frequencies! That means the sum of red, yellow, green, blue and violet light looks like white! Physically speaking, it's not white at all, it's the sum of a lot of sine curves, but the human brain makes it look white. Color is thus something psychologically, and not something physical.

Lightwaves are a sum of many different frequencies, or the sum of many sine curves. Each of these sine curves has it's own frequency, and can have it's own amplitude. A spectrum shows for each frequency the amplitude. For more information about spectra in general, see the beginnings of the chapter about Fourier Transforms.

Here's an example of such a spectrum:



It is the spectrum of a yellow LED I found. The top of the spectrum is the Dominant Frequency, and that is the color our eyes will usually see if light with this spectrum shines on it. If this yellow LED would have been monochromatic, the spectrum would have looked like this instead:



And to the eyes, the color would look the same. So here an interesting fact shows up: light with different spectra, can still look the same to the eye! If the human eyes would be able to distinguish every single spectrum as a different color, we would've been able to see gazillions of different colors, but the human eye works differently and turns a whole spectrum into only 3 signals: the amount of detected red, green and blue, and combinations of those make the colors we can see.

The spectrum of white light is as follows (the height of the curve doesn't really matter):



All frequencies are equally much in the light, only then it looks purely white to the brain. In all other cases, a certain frequency will be dominant and then that frequency will be the color the brain sees.

The spectrum of black light looks like this:



Indeed, there's no light at all, the amplitude of every frequency is zero. Black is the color the brain gives to the absence of light.

The spectrum of magenta, a color that can't be made with monochromatic light, could look like this:



Both blue and red have a high amplitude, and the mix of blue and red frequencies looks like magenta or purple to the brain.

The Eye and Color Perception

This section isn't about how the physical structure of the eye and the lens work, but about how the eye and the brain distinguish different colors.

So light falls on the retina, and on the retina are 2 types of cells with photosensitive chemicals, photoreceptors: rods and cones. The rods only detect whether or not light is present, and are important at night. So rods are sensitive to the whole spectrum at once and can't tell what frequency the light has, and thus can't provide any color information. To detect color, you'd need photoreceptors that are sensitive to only a certain frequency. That's exactly what the cones do:

There are 3 types of cones, those that are sensitive to red, those sensitive to green, and those sensitive to blue. Such a rod isn't sensitive to a single frequency, they overlap a bit, it's just sensitive mostly to a certain frequency.

For example, yellow has a frequency between red and green. This yellow frequency will excite both the red and green cones a bit, and the human brain converts the signal "both red and green cones are excited" to "yellow". Even the blue cones are still a bit excited by yellow light, but neglectable.

If light falls on the eye that has two frequencies: red and green, it'll also excite both the red and green cones, so this light will show up as yellow as well, even though it doesn't contain any yellow frequency at all.

If blue light falls on the retina, the blue cones are excited very strongly, while the green and red ones will give only a neglectable signal. And the brain turns the signal "mainly the blue cone is excited" to "blue".

White light contains all frequencies, so if white light falls on the retina, all 3 types of cones are excited, and the brain turns the signal "green, red and blue cones all excited" into "white".

The above explains how the brain creates different "hues" of colors out of the incoming signal, but it also gives a certain brightness to the light, based on how strong the incoming signal is: if it's very strong, the brain indicates it as a very bright red, white, ..., but if it's very weak, it'll be almost black. And then there's also the "saturation" of the color, this is based on the relative difference in strength each color type gives: if the red signal is very strong, but blue and green are also pretty strong, the color will have a low saturation, it's red-grayish or red-whitish. If however the red signal would be very strong, and the blue and green signal very weak, a very red color shows up.

Since different spectra can look exactly the same for us, and some animals have different types of color receptors, it's possible that two colors that look the same to us, look like two different colors for some animal.

The above process happens on every location of the retina separately, so that a complex 2-dimensional image is formed where each location on the image can have it's own color.

Thanks to the 3 types of cones, there are 8 (2^3) main colors one can distinguish:

• No cones excited: Black
  
• Red cones excited, but not the Blue and Green ones: Red
• Green cones excited, but not the Blue and Red ones: Green
• Blue cones excited, but not the Red and Green ones: Blue
• Red and Green cones excited, but no the Blue ones: Yellow
• Blue and Green cones excited, but no the Red ones: Cyan
• Red and Blue cones excited, but no the Green ones: Magenta
• All three the cone types excited: White

The RGB Color Model

The RGB color model works exactly like those color receptors of the human eye work: the RGB color model describes a color by using 3 variables, Red, Green and Blue. These variables can be compared to the strength of the signals from the 3 types of color receptors in the nerves. A computer or TV screen works this way too: it has 3 types of cells, Red, Green and Blue, and can make each type brighter or darker independently, exciting the correct receptors of the eye to create the desired color. If you look with a magnifying glass to a white area of your computer screen, you can see that the color white is actually made out of the 3 colors red, green and blue. This means the white emitted by a computer screen is different from white sunlight: while white sunlight contains photons of all frequencies (except a few), the computer screen only has 3 frequencies. The human eye can't see the difference between these two kinds of white.

The RGB color model is the one you'll mostly be dealing with in computer graphics. It's also called the additive color model, because you add 3 color components together to form any color. In 24-bit color, each of the 3 components R, G and B is an 8-bit variable that can be an integer number between 0 and 255. 0 means the color component is off (black), while 255 means it's at it's full intensity. 127 is half intensity. This means color 0,0,0 is the darkest black, color 255,0,0 is the brightest red, color 0,255,0 is the brightest green and color 0,0,255 is the brightest blue. 255,255,255 is the brightest white and 127,127,127 is gray. 32-bit color is the same but with an extra 8-bit alpha channel added that can be used for transparency of textures, ...

The RGB color model isn't very intuitive, so here's a table containing some common RGB values:

Here is a table with common RGB color values:

RGB Arithmetic

By doing calculations on the RGB values of the pixels of an image you can perform various color effects.

Here's a table of the operations you can do with RGB color, screenshots and code will follow in the next sections. These operations are given for the 24-bit color model with 8 bit per channel, so 255 is the maximum value of a color. Colors channels can also be represented as floating point numbers between 0.0 and 1.0, then you have to replace the value "255" by "1.0". C represents the channel together or the total color, while R, G and B represent the Red, Green and Blue channel separately.

Operation	Formula	Effect
Negative	255-C	Returns the opposite color, for example white becomes black, red becomes cyan, ...
Darken	C/p or C-p	Divide the color though some constant (larger than 1), or subtract a constant from it, to make it darker.
Brighten	C*p or C+p	Multiply the color by some constant (larger than 1), or add a constant to it, to make it brighter.
Greyscale	(R+G+B)/3	Calculate the average of the 3 channels to get a gray color with the same brightness.
Remove Channel	R=0, G=0 and/or B=0	By setting one or more channels to 0, you completely remove that color component from the picture.
Swap Channels	R=G, G=R, ...	Swap the values of two color channels to get an image with a completely different color.

We'll try all these formulas on the following BMP image of a flower:

NegativeImage

The following code will load a BMP image of 200*133 pixels, calculate it's negative, and display the result. ColorRGB is the struct containing 3 integers r, g and b, to describe the rgb color.

ColorRGB image[200][133]; 
int main(int argc, char *argv[])    
{ 
    screen(200, 133, 0, "RGB Color"); 
    loadBMP("pics/flower.bmp",image[0], 200, 133); 
     
    ColorRGB color; //the color for the pixels 
     
    for(int x = 0; x < w; x++) 
    for(int y = 0; y < h; y++) 
    { 
        //here the negative color is calculated! 
        color.r = 255 - image[x][y].r; 
        color.g = 255 - image[x][y].g; 
        color.b = 255 - image[x][y].b; 
        pset(x, y, color); 
    }    
     
    redraw(); 
    sleep(); 
    return 0; 
}

Change the Brightness

To change the brightness, divide R, G and B through a number larger than 1 to make it darker, or multiply them with that number to make it brighter. If the color component becomes higher than 255, truncate it to 255.

For example, to make the image double as dark, change the 3 lines of code that made the image negative in the previous example, to:

        color.r = image[x][y].r / 2;
        color.g = image[x][y].g / 2;
        color.b = image[x][y].b / 2;

        color.r = int(image[x][y].r / 1.5);
        color.g = int(image[x][y].g / 1.5);
        color.b = int(image[x][y].b / 1.5);

        color.r = image[x][y].r * 2;
        color.g = image[x][y].g * 2;
        color.b = image[x][y].b * 2;

        if(color.r > 255) color.r = 255;
        if(color.g > 255) color.g = 255;
        if(color.b > 255) color.b = 255;

        color.r = image[x][y].r + 50;
        color.g = image[x][y].g + 50;
        color.b = image[x][y].b + 50;

        if(color.r > 255) color.r = 255;
        if(color.g > 255) color.g = 255;
        if(color.b > 255) color.b = 255;

        ccolor.r = image[x][y].r - 50;
        color.g = image[x][y].g - 50;
        color.b = image[x][y].b - 50;

        if(color.r < 0) color.r = 0;
        if(color.g < 0) color.g = 0;
        if(color.b < 0) color.b = 0;

Greyscale

One way to grayscale an image is to calculate the average of the 3 color components and use this average as the value for the shade of gray:

        color.r = image[x][y].r - 50;
        color.g = image[x][y].g - 50;
        color.b = image[x][y].b - 50;
        color.r = color.g = color.b = (color.r + color.g + color.b) / 3;

Swapping and Removing Channels

By removing channels, you completely remove a color of the image, for example if you remove the red of the flower you get this:

        color.r = 0; //red component set to zero
        color.g = image[x][y].g;
        color.b = image[x][y].b;

        color.r = image[x][y].g; //the green component of the image
        color.g = image[x][y].r; //the red component of the image
        color.b = image[x][y].b; //the blue component of the image

        color.r = image[x][y].r; //the red component of the image
        color.g = image[x][y].r; //the red component of the image
        color.b = image[x][y].b; //the blue component of the image