CHAPTER 4
Adding a Little SpiceTOC

A spider is lovely
a chef extraordinaire
most delicious the entree's
she bakes in her lair

her lair made of hair
so silky and fair
to be caught in her snare
'tis a fete extraodinaire

How Do Computers Create Colors?TOC



The perception of color is due to the variations of energy in " packets" of light. The most energetic visible light is in the violet end of the spectrum. The least energetic light is at the red end of the spectrum. The most energetic light is ultra-violet, or above violet. This term is used to represent invisible light of a higher energy than violet light. Likewise, infra-red light (below red) is invisible to the human eye (though there are some animals that can perceive it) and is less energetic than visible light.

Most visible light is emitted by electrons in atoms as they move from one state of energy to another. An electron bound to an atom is like a spectator at a baseball game. It requires more energy to climb to the top of the stands and so spectators at the top will be assumed to have stored more energy. The spectators, say Jill and Bob , sitting at the top of the stadium want the best seats available. When seats remain empty below, Jill begins to say " We should move down, after all no one is going to sit there now that it is the tenth inning." Bob is shy and remains in his seat while Jill moves down. As Jill moves down she gives off energy in the form of light. The same exact energy value as is represented by the energy levels from her first position to her second seating position. In the fifteenth, inning Bob decides to move down and join Jill, but he can not find her and takes a seat even closer to the bottom. In this case, Bob gives off a more energetic light. While the home team is seeing red, Jill is green, and Bob is definitely blue.

A simple acronym that reminds us of the order of energies for visible light is:

ROY G. BIV



representing red; orange; yellow; green; blue; indigo; violet.

Mixed Up Colors?TOC



The color that we perceive from ordinary objects is a form of reflected light. Ordinary materials absorb light. The color of the object is the color of the light it reflects, or in other words, the complementation of the light it absorbs. If you mix two food colors together and add them to a white cake, the cake will reflect fewer colors.

For example, if a coloring is red, then it reflects mostly red light. If a coloring is green, then it reflects mostly green light. When the colorings are mixed into the cake, the cake will absorb most colors and take on a darker hue (depending on how much coloring is used). Now the cake reflects only the common colors reflected by both colorings. In this case, we say that colors are subtracted from the white cake. The colors subtracted in this mixing process are the whole range of colors absorbed by both the red and the green food colorings. This is the same process that occurs in the use of filters over a single light source. Each colored filter subtracts all but the desired color. As more filters are placed over the light source fewer colors of light are emitted.

On the other hand, if you project several different colors of light onto a white screen you are adding colors. For instance, if you project both red and blue onto a white screen, then the screen will reflect both red and blue giving a violet hue. Television screens and computer monitors are built to model the color addition scheme.

What is RGB / Red-Green-Blue?TOC

Some chemicals and materials will absorb and store energy when freely moving electrons or light collide with the bound electrons in the material. All materials may undergo similar collisions with light and/or electrons, but they are unable to store up energy from those collisions. Scientists say that the material is phosphorescent when it is able to store up collision energy. The picture tube on your television is made of a phosphorescent material. Electrons from the back of the tube stream toward the front colliding with the phosphorescent materials which store the collision energy and release it slowly, just as the baseball fans little by little move into the empty seats below them. The color picture tube has three basic colors of phosphorescent light: red; green; blue. Computer monitors are often just television screens and so the same RGB scheme is used in computer graphics.

On the other hand, the number of colors produced by the sun is virtually uncountable.

How Can All Colors Be Made From RGB?TOC



How can all the colors of the rainbow be represented in the RGB scheme? The RGB color scheme does not actually reproduce all the colors of the rainbow because these colors are produced by specific light rays at specific energies. However, the RGB scheme works very well in practice due to the way in which our eyes perceive color.

Our eyes contain two kinds of light receptors: rods, and cones. Cones are primarily responsible for color perception. There are three types of cones

  • Cones sensitive to light in the red color range.
  • Cones sensitive to light in the green color range.
  • Cones sensitive to light in the blue color range.

There are several theories regarding possible ways that signals emanating from the cones, and traveling to the brain, can effect light perception. Early experimentation by Newton, Young, and others indicated that the perception of intermediate colors like yellow could be obtained by adding colors like red, green, and blue. This is known as the Tri-Chromatic Theory of Perception and is the basis of the RGB scheme.

For instance, using a special notation covered in the next section one can obtain yellow by adding red and green. In terms of the hexadecimal RGB notation:

.RGB
BGCOLORFFFF00


  • BGCOLOR="FFFF00"
    • is a bright mustard yellow.

  • BGCOLOR="FFFF88"
    • is a bright yellow.

  • BGCOLOR="FFFFBB"
    • is a pastel yellow.

  • BGCOLOR="FFFFFF"
    • is white.


.RGB
BGCOLORFF00FF


  • BGCOLOR="FF00FF"
    • is a bright pink-purple or neon purple.

  • BGCOLOR="FF88FF"
    • is pink.

  • BGCOLOR="FFBBFF"
    • is a pastel pink.

  • BGCOLOR="DD00FF"
    • is a bright shade of violet.



When your eyes see orange light the red-sensitive cones and the green-sensitive cones produce a sensation in the brain somewhat akin to the addition of colors. If the orange is a reddish-orange, then a proportionately higher value of red will be sent to the brain by the red-sensitive cones. The RGB scheme attempts to mimic, or at least fool, the brain's perception process.

How Do I Add Color?TOC



Colors are designated using a special mathematical numbering system called hexadecimal meaning base 16. In this system we use the numbers:



NUMBER012 3456 789 10111213 1415
HEXIDECIMAL0123 4567 89AB CDEF


with the above relations.

It is not terribly important to understand this numbering system as long as we are willing to do a little experimenting. Who doesn't experiment when they are making a recipe?

    Oh no! A little too much spice. Make a note of that.

    Oh darn! Not enough yeast. I'll have to try that again.

If you wish you may use the hexadecimal system as an example of a number base system and thereby integrate mathematics into your classroom homepage project designs. Another approach might be to let the students become familiar with coloring schemes and to mention the relationship to mathematical number bases later. In this way the student may feel more free to experiment and only later realize that their work is an application of a mathematical concept.

The coloring scheme involves 6 sets of numbers ranging from " 0" to " F" usually contained between quotation marks. I list here a few examples:

  • BGCOLOR="FFFFFF"
    • sets the background color to white.

  • BGCOLOR="00FFEE"
    • sets the background color to light blue.

  • BGCOLOR="FFAAEE"
    • sets the background color to purple-pink.



.
.RGB
BGCOLOR00AAAA

Sets the background color to chalk board green.


  • BGCOLOR="00AAAA"
    • sets the background color to chalkboard green.

  • TEXT="000000"
    • sets the text color to black.

  • TEXT="FF0000"
    • sets the text color to red.

  • TEXT="0000FF"
    • sets the text color to blue.

  • LINK="00FF00"
    • sets the an anchor-hyperlink color to bright green.

  • VLINK="F800F8"
    • sets a visited anchor-hyperlink color to a neon purple.

  • BGCOLOR="444444"
    • sets the background color to dark gray.

Variations of gray can be obtained by using the same number for each of the six designators. The notable exceptions are black and white. The words

  • BGCOLOR
  • TEXT
  • ALINK
  • LINK
  • VLINK
are called attributes of the BODY tag and do not need to be defined. When they are not defined, they are automatically given values by the browser. The person using the browser can set some of these values in the "Preference" section of the menu task bar. The automatic values are called defaults.


A Note

    A word of caution here. The above color designations are my own. Color output can vary wildly from one computer to the next and can also be dependent on monitor specifications and screen resolution settings.

Project Code Name:

Pumpkin Pie



Font and CenterTOC



If you view source documents you will often see the FONT and CENTER tags used. These tags are not considered standard HTML code and you will not find them in standard HTML tag reference lists. The FONT and CENTER tags are innovations of Netscape and have become very popular. Many designers consider them to be more natural than the standard HTML method of using ALIGN attributes to center your text within the Table blocks of your document.

A Note


    If you are using a recent Netscape browser and you are the only one that will be viewing your homepage then using FONT and CENTER will be an easy way to give your documents a polished look. If you wish your homepage to have a consistent look from one browser to the next, then you should consider using the standard headlines along with the TABLE attributes as discussed in the chapter on Tables.

You may also add color to your text by using the " TEXT" attribute in the BODY tag or you can set the color of one word or several lines of text by using a COLOR attribute within a FONT tag. The FONT tag can be used in place of the usual headline tags which were discussed in the previous chapter on HTML. The FONT tag allows us to change the size of our font and to specify a color. There are seven positive choices for font size and seven negative. A choice of a positive number 1,2,...,7 increases the font size proportionally and a negative choice decreases the font size proportionally. For example,

  • < FONT SIZE=2 COLOR="0000FF">
    • increase the SIZE and
    • sets the text COLOR equal to blue .
  • < FONT SIZE=-1 COLOR="FF0000">
    • decreases the SIZE and
    • sets the text COLOR equal to red .

  • < FONT SIZE=1 COLOR="00FF00">
    • increase the SIZE and
    • sets the text COLOR equal to green.

A Budget of Colors TOC


I have arranged below an example of the use of color in your text. Remember that this will not appear the same for all browsers.

...

  • colors.html


    HTML is Easy and Fun

    The Spider Red (A POEM)

    The spider read

    the book so red

    and filled her web

    with spicy tales

    of dragonflies

    with crystal eyes

    Using Colors



    Below is lies the body of our document. The HTML <BODY> that is:

    • Webbing\Projects\color.html

      Note that I have given comments to indicate the change of color.
    Here we have an example of the use of different sizes of fonts laced together within the text of a document.

    ...

  • center1.html


    HTM L is Easy and f un

    The Spider Red (A POEM)

    The spider read

    the book so red

    and filled her web

    with spicy tales

    of dragonflies

    with crystal eyes

    Up Font and Center



    This example was produced using standard HTML Code with a table of width 300 pixels, but a similar result can be obtained without the use of tables when your browser is CENTER enabled.

    The following project will allow your students to experiment with font sizes.

    Project Code Name:

    Whipped Cream


    ReferencesTOC

    COLORPRO
    USE NETSCAPE 3 OR BETTER

    COLOR CHART LISTS
    MY VERY OWN, VARIATONS WITH RED-MUST BE COLOR ENABLED