Prof. Auciello


A Virtual- Interactive-Visual Applications (VIVA) Lesson created by Prof. Joseph Auciello and California Technical Training.  (c) Copyright, 2003 - 2006.

  This Visual-Interactive-Virtual Application is intended to give you Mastery over using Colors for Web Pages!

There are at least (2) ways to understand colors: (1) Some seem to have an inner talent, an intuitive sense about colors and color-matching; others, like me, have to translate colors to numbers, work the numbers, convert numbers back to colors, then test it! This exercise should help the right-brain (intuitive) learners understand the science of colors, while helping the left-brained (math-inclined) learners understand the art of colors!

The (3) Primary Colors: Red (R), Green (G), Blue (B) each have 256 values, so there are 256*256*256 (256^3) = 16,777,216 possible combinations!

The goals of this lesson are: Express the RGB codes in Hex and Decimal, teach Hex - Decimal conversion, Understand Primary colors and Secondary colors, and do color matching to create the most aesthetically pleasing web pages!

It is expected that you will "zen" this subject, going deeper than this lesson, and creating your own knowledge-base of colors!

For example, I realized recently that using Pastel Colors, mellow blends of pure colors tempered by white, on my Main Page was much easier on the eyes than Primary Colors! Whereas the women in my family knew that from birth, almost! You may also have that gift. If not, I will help you develop it, in a mathematical way!

Another major point for web developers is complementing colors: Blue and yellow complement each other, brown and ivory do so. Observe what other complementary combinations work, and experiment with them on your web pages!

This lesson-quiz is about 'doing-checking-repeating-until-done' Test every answer with its formula. ... Check each answer with the 'test' button. If you have to exit early, press Submit Button, then return to next question(s). Press 'Submit' when you have partially or fully completed the quiz.

You may stop this test and record your progress by hittin the Submit button, then continue where you left out, and your points will be added toward the maximum for this test! Retake this quiz until you reach the maximum.
This information repeats.

Topics covered:   Colors, Hex, RGB, Color Balancing. 

Please fill out the name and email boxes (Sect. No. and Date are automatically generated).

Section No  Last Name.. First Name  email addr .      

Use "test" buttons to check individual answers before
pressing the "Submit Data" button at bottom of form.

Section (1).  Definitions and Color Calculator.

    Enter color code, either Decimal (0 - 255) or Hex (00 - FF),  click "Compute" button to view color.  You may also "step" thru a color by pressing the arrows above and below the input boxes in the DECIMAL Panel.


  Decimal - HEX - RGB Converter.  Click for more info on converter author, Thomas Gehrke, artist / programmer.

For a Decimal - Hex Conversion chart, click - Note 10 (Dec) = A (Hex),  15 (Dec) = F (Hex) (max Hex number),  and 16 (Dec) = 10 (Hex) (hit max, created a 0, and carried 1)


The first 10 numbers in the decimal systems are 0 - 9.  The Hexadecimal numbering system, a Base 16 system,  contains 16 numbers,  0 - 9 for the 1st ten, then A - F (for 10 - 15).  Note on the chart that  Hex A = Dec 10, etc.

Contrary to popular thinking "10" does not follow "9" in every number system. (Only in the base 10 system.)   What we call "10"  means "we hit the max digit, so we 'zero' and carry the "one".   The highest number in the decimal system = 9, adding 1 to that zeroes the number and carries a "1".  So 9 + 1 = 10.  10 is not just one more than 9, it completes the set of digits, resets itself to 0, and carries the 1!

Similarly adding  1 to F, maximizes the set, zeroes it out, and  carries 1 to the left    Notated as   1 + F = 10  (Hex).





 What is Hex value for Decimal 10? Check it with the Test Button.


10 points. Complete the line below.  Fill in the blanks.

Write your answers in one line separated by commas.  



10 points.  Research.  Why do computers use Hexadecimal numbers?  What is the relationship between Binary and Hexadecimal numbers?  What is the 1st number in the decimal set?  1st Hexadecimal number?   Largest single character Hexadecimal number?  Where did you find these answers?   One paragraph answer, please.





This example, showing the diffraction of light from a prism, shows the 3 Primary Colors -- Red, Green, Blue (RGB).  Also shows 3 Secondary colors (Magenta, Cyan, Yellow (discussed later).  All colors can be created with combinations of the 3 Primary Colors.

fig. 2a.


This remarkable chart gives the names of the colors and their RGB codes.   For example:  Red = FF0000.   You have (3) beams, each of which ranges from 00 - FF.   00 = no color;  FF = max color.

   FF       00         00
   red     green     blue

Think of it as an color gun:  To get Red, the red beam is maximized at FF,  Green and Blue are turned off (00). 

Example of Aqua:  Do you see "Aqua"  (aka Cyan)?  Do you see that it is 00  FF  FF  (read as 0 red, max green, max blue)?   At some depths the ocean mixes blue with green, hence "aqua".   Note that it is max Green and Blue.

Question:   What color results when with max Red and max Green (FF    00    FF)
                                                                                                      !       !       !

                                                                                                      !       !     green
                                                                                                      !       blue

Confirm your answer by looking  at fig 2a -- What color is midway between Red and Green? 

Confirm it again by using the Color calculator above,  enter  FF   FF   00
                                                                                           red   grn  blue 

What color resulted?

  What color is generated by the RGB color codes of FFFF00?   Type the name of the color. Check it with the Test Button.

15 points. 

Fill in the RGB codes for these colors



More practice with the Color Calculator:  Type 128 into a decimal box, hit "Compute".   Note 80 appears.  So 128D = 80H.  Also note that a Blue-Green colors occurs whose RGB code is written as 80FFFF, as you can see.


Enter 255, 255, 240 into the (3) DECIMAL boxes, respectively. What Hex values come up? 


  Answer in the form of  RRGGBB  where the letters stand for the Hex values.

15 points. Discovery.

What color is generated by  255, 255, 240?  Describe it the best you can.  Do you like it?   Could it be called a 'Pastel'?  Don't forget to hit "Compute".






This color was generated by the color calculator above. What is its RGB code in Hex?


  Enter Hex RGB code in form of RRGGBB.  Check result with "test" button.


15 points. Discovery.

How are colors generated by a computer?  What (3) "guns" are there?  What are the Primary Colors?  Are they too bright, in your opinion?





 Pastels are the mellow blends of bright colors tempered by _____ (fill in the blank).    Showing a  bravura pastel portrait of Louis XV by Maurice Quentin de La Tour, 1748.

Go to Wikipedia -- -- to find this  answer.




  Pastels are the mellow blends of bright colors tempered by _____.  Enter answer.    Check result with "test" button.  

15 points. Discovery.

King Louis XV of France is wearing a medal or pendant hung from a scarf. This, like all the colors in the painting, is a pastel color.   What is the color of the scarf in  Hex RGB? (RRGGBB).   Describe how you  figured this out.




6a Researching Resources for HTML and JavaScript:

The concept promoted by software developers is "Open Source" which means "glass box", take a look at it,  comprehend it, and if you want it, copy-and-paste it.   Think of the Web as a Virtual Electronic Public Library.   You can find what you want only limited by how long to takes to access "Google" (any search engine), type in KEYWORDS, and hit "Submit".  

Some programming students can get all the information they need from the Web, and never have to buy a book!    Books, though, are still handy, portable, random-accessible, indexable, archives of knowledge!   The point is -- Use the Web for Information!

While researching this lesson, I found links that should be extremely helpful to you:

Computer Science 110 - Wellesley College Art of Computer Programming -- Syllabus Note quality and depth of assignments


The HTML Web Classroom
by Paul F. Meyers
Paul Meyers, Cerro Coso Online College, Ridgecrest, CA  (link to college site)   (Prentice Hall)

(incredibly, this material is free.  But, I, for one, am buying the book for desktop reference!

(I have worked with him before.)

Tizag Complete set of HTML tuturials


16 Basic, Cross-Platform, color names Univ of Toronto


Extended names with HEX Codes


Pastel Colors for Web Pages   Get into this!


Pastel in Painting Wikipedia We will go 'pastel'!


JavaScript Tutorials W3Schools Excellent lessons.


This is an excellent starter list.    

"Technological Empowerment" means you are your own resource.   Being strong, empowered, able to find information and apply it.    Restated simply:  Learn to find answers yourself on the Web!

  If you agree with the statement above and the answer to the left, press "Test".  


7a Selecting a Font using Frontpage.

I clicked the FP icon on my computer desktop, and got the screen to the left.  Then clicked New - Page - Blank Page (bottom right) to open a new page.





Then I selected Trebuchet MS in the scroll box on the left, 12 pt, and the bold button,   and typed -- Trebuchet MS 12 bold font -- on to the desktop as shown below.   This is easy stuff!

Restating: I opened FP, clicked "New", "Page", then "Blank Page", then selected Font style, size and clicked Bold, then typed  the message on to the desktop!



 What is the name of the font under "Trebuchet" ?    Check result with "test" button.   


7b 10 points. Discovery: 


<html>                                              .... starts HTML.
    <body bgcolor='#FFFFFF'>             .... body section;  background color = FF FF FF (white).
       <b>                                            .... bold tag.          
           <font face="Trebuchet MS">   .... style of font.
                Trebuchet MS 12 Bold        ..... text.
           </font>                                  ..... close font tag.     
      </b>                                            ..... close bold tag.

   </body>                                         ..... close body tag.
</html>                                             ..... ends (close) HTML.

In the textarea below, change the bgcolor to Green.




15 points. Discovery: 

1.   Open a new blank page by clicking File--New--"Page or Web"-- Blank Page.

2.   Click the HTML tab.   

3.  Go to the text area above,  highlight, and copy the code starting with <html>  and ending with </html>






4.Paste the text to HTML Page.





5.  Change bgcolor to "#FFFF00"   (yellow)

6.     Click Preview Button.

7.     Should look like this.


Using the model above, write the HTML code to display  "My 1st HTML code!"  in the same font on the same background.  Write it carefully, respect the indentation (meant for readability).  Make it perfect.




15 points.  Programming

      Building on the code below, and changing the colors,  open a new blank page and write the HTML code to show this image.

    <body bgcolor="#FFFFFF">
       <font face="Trebuchet MS" size="4">
       <font color="#000000">

           Trebuchet MS 12 bold font


    Change bgcolor to "DCCFFF".   Change font color to "0000FF".

Open a blank page in FP.  Write the code.  Preview it.   Explain the steps that you took below.  Tell me what you discovered.




Each question has (2) types of answers:  ("a") KEYWORD and  ("b,c") SHORT PARAGRAPHS.  The max for the 7 KEYWORD questions @ 15 points each is 105 points (verified immediately). The SHORT PARAGRAPH answers, also 15 each, will be verified later.  If you are confident that you answered the SHORT answers correctly, award yourself 15 points for each to a max of 135, for a grand total of 240 points. (I will verify your answers and your self-grading).  Submit your points using the Attendance/Participation Form --  (keep retaking this quiz until you reach the max.) 

This type of lesson was developed to help you learn quickly, visually, and interactively, and I hope that you learned successfully from it!   email me   Be well.  Prof. A. Out.


(c) Copyrighted by Prof. Joseph  Auciello, 2003 - 2006, Joseph Auciello, and California Technical Training.  For more information on this project,  contact