Course overview

Skills: selecting colors, specifying colors in HTMLConcepts: combining red, green and blue light to generate colors, combining light versus combining paint, RGB color coding systemThis work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License. The RGB color model1This presentation will familiarize you with the RGB color model.

We will see that a computer display mixes varying levels of different colored light (as opposed to mixing paints of different colors).

We will see how to represent colors in HTML and how to select colors when using an image processing program.

Where does this topic fit?Internet conceptsApplicationsTechnologyImplicationsInternet skillsApplication developmentContent creation (Web)User skills2The presentation explains display technology and the use of colors in HTML.

Pixel geek for dotMouse over the image to play the video (37 s)

Images on a display screen are made of tiny colored dots.

The dots making up an image or letters on the screen are called pixels, which is short for picture elements.

With a high resolution display one with many pixels per inch we can get very sharp images.

Apple refers to their high resolution display screens as retina displays because they claim the pixels are so small and close together that they are imperceptible to the human eye.

You may have heard of RGB colors.

Pixels on a modern display screen can have millions of different colors, but they are all created by mixing red, green and blue (RGB) light of varying intensity.

(Video excerpt from "New ChromeBook Pixel - Next Generation Concept," http://youtu.be/d2dhMKSKGBg).

3

Cones day vision, detect color

Rods night vision, high definitionWhy RGB?Your retina has red, green and blue sensitive receptor cells called cones.

Dogs have only two -- blue-violet and yellow but they have better night vision than we do.

4

Different wavelengths, different colors

5Isaac Newton discovered that white light going through a prism is broken up into a rainbow.

That is because different colors of light have different wavelengths and they bend differently when passing through the prism.

As you see, red has a wavelength of about 700 nanometers and violet around 400.

If we reverse the process, using the prism to mix the colors, the result is white light.

Our retinas have receptor cells, called cones, that can detect red, green and blue wavelength light.

Independent streams of light of different wavelength (color) can be sent simultaneoLights of different wavelength can be sent through

Combine three primary colors for each pixelIntensities of each color can range from 0 - 2556A computer display combines red, green and blue light at varying levels of intensity to determine the color of each pixel.

Red, green and blue are primary colors, because you cannot make them by mixing other colors, but you can create other colors by mixing them.ColorRedGreenBlueRed25500Green02550Blue00255Yellow2552550Cyan0255255Magenta2550255White255255255Black000A few examples7Here we see examples of the color resulting from varying light intensities.

Setting red to 255 and the others results in a red pixel.

Mixing all three results in white.

No light results in black.

Other mixes result in other colors.

Experiment with color codesRGB demo program:http://som.csudh.edu/fac/lpress/netapps/color.exe

8You can use this program to experiment with RGB color values.

(If you cannot run this program on your computer, there is an alternative on the next slide).

Experiment with the values to get a feeling for how they work.

Weve seen that color intensities vary from 0 to 255.

That is in our familiar decimal number system, but what are the hex (hexadecimal) numbers shown here?

Display sub-pixelsWhat color would the part of the image surrounding the letter A be when viewed normally?

Magnifying a screen about twenty times makes the sub-pixels visible.9

Introduction to color theoryhttp://colorschemedesigner.com/

This program lets you set and see RGB colors and also helps you pick colors that go well together.11

Grade school finger painting

Why do all the colors add up to murky black?But wait -- does mixing red, blue and green together giving white surprise you?

What happened in grade school when you mixed a bunch of finger paint colors together?

It started getting dark brown or black.

What is the difference between mixing finger paint colors in grade school and mixing colors on a computer display?12

Mix lightMix pigmentWhen mixing finger paint, you were mixing different color paint (pigments).

When light hits a surface that is painted a certain color, all the other wavelengths are absorbed and that color is reflected.

The more colors you add to the mix, the more light is absorbed the color gets darker and darker.

This is in contrast to the computer display, which adds different colors of light the more you add the lighter the color.13

Paint.Net color selector and pickerPaint.Net has a dialog box for choosing primary and secondary colors for drawing.

There is also an eyedropper tool.

Placing it over any pixel and clicking the mouse will copy the RGB code for the color of the pixel.14

MillenniumPark,ChicagoA large RGB display15Two of these displays face each other in a shallow pond in Millennium Park.

16Zooming in, we see the size of the display relative to this man with an umbrella.

He looks cool, but the umbrella has a purpose water is cascading down the front of the display.

17Getting closer, we see that the display is composed of sealed, clear plastic bricks.

18And each brick contains red, green and blue lights.

SummaryWeve seen that varying the intensity of red, green and blue light determines the color of a pixel.

We noted that the colors are created by mixing light, not by mixing paint as an artist does.

We also saw that one can write a number in decimal, hexadecimal or any other counting system.

You can specify an exact color in HTML by writing its red, green and blue intensity values in hexadecimal.

19Optional stuff followsPodcast on color philosophy and physiologyhttp://www.radiolab.org/2012/may/21/

To what extent is color a physical thing in the physical world, and to what extent is it created in our minds?This is a Radiolab podcast on color.

Radiolab is a very good science podcast.21

The outer edge of the top of the cone is the color wheel, with all the pure colors. The H parameter describes the angle around the wheel.The S (saturation) is zero for any color on the axis of the cone; the center of the top circle is white. An increase in the value of S corresponds to a movement away from the axis.The V (value or lightness) is zero for black. An increase in the value of V corresponds to a movement away from black and toward the top of the cone.HSV modelAnother way to characterize colors.

You can read about it and study this diagram, but really, you need to play around with the sliders on the color picker in Paint.Net or some other image processing program.220123456789101112131415161718192021

0123456789ABCDEF101112132425255FFDecimal countingHexadecimal countingOptional:counting inhexadecimalWhat are those hex numbers in an earlier slide?

You are used to counting using our familiar decimal number system, which has ten symbols (glyphs): 0, 1, 2, 9.

Programmers and Web developers often count in hexadecimal, which has 16 glyphs: 0, 1, 2, 9, A, B, C, D, E, F.

What happens in decimal when we move from nine to ten?

Since there is no symbol for the quantity 10 in the decimal number system, we write zero and carry one to the next position to the left.

The same thing happens with hexadecimal numbers, but we do not run out of glyphs until we reach F.

The number that comes after F is written a zero carry one.

The bottom line is that hexadecimal is just a different way to write numbers.

Since there are more glyphs, hexadecimal numbers are generally shorter than decimal numbers.

23

DecimalHexadecimal6541252FC220DC#41FCDCRBGOptional: RGB colors in HTMLWe can specify exact colors in HTML.

HTML has some built in color names like red (#FF0000) or blue (#0000FF), but you can get any color by giving its RGB components as a hexadecimal number.

This example shows the color we get by setting the red, green and blue intensities to 65, 252 and 220 respectively.

We can write that in HTML by converting the intensities to hexadecimal and putting a # in front of them.24Self-study questionsHow many different colors are possible using the RGB model?

What colors are the background and text on a page with this body tag:

What happens if you change the values of the bgcolor and text attributes of the body tag?

Hexadecimal arithmetic what is: 2F+1, 2F+9, 19+6, 19+7, 19+8, FF-1, 3D-8?

25ResourcesCool color selector:http://www.ficml.org/jemimap/style/color/wheel.html

Ten color matching tools:http://webdesignledger.com/tools/10-super-useful-tools-for-choosing-the-right-color-palette

HTML built-in color names:http://www.w3schools.com/HTML/html_colornames.asp

A second color model specify hue, saturation and luminosity:http://www.labnol.org/home/hue-saturation-luminosity/20104/

Topic module on counting and number systems:http://cis275topics.blogspot.com/2010/11/counting.html

26