Table Of ContentThe Elements of Art
and
Principles of Design
Featuring Color Theory for the Web
0
Lesson 1
Color
and
for the Web
1
Original Assignment
Your assignment is to create an attenuating color strip from one hue, gradating the color
on approximately 15 to 20 uniform pieces of 3” x 3” (small size approx.) poster board by
adding white to the main color. This is an actual assignment in college, in Color Theory 1. It
is your choice whether the gradient goes from your chosen hue to white or black. More than
one color, but limited to three, is allowed as long as the gradients follow logical attenuating.
Keep the flow. Do not end with white and then begin with a dark color, or start over. Flow
into and out of your colors.
Color
Original Assignment Materials
Poster board
Directions:
Using two hues is allowed. You can blend them,
2 colors (1 hue and 1 white or black)
but follow a logical gradient. If you use black,
or more of poster paint
logically leave your hue’s shade to begin your hue into
(required - include white or black)
luminous (bright) or tint and white. Create one single
Scissors
hue strip at least and you may even do a grayscale
Paste or standard Elmer’s Glue
(black to white) strip.
Progressive color
Blended colors progressive color
2
L. 1 Color
In order to switch over to modern day color theory, you will do a modern type
assignment .
In this assignment, you will change your color strip to RGB hex value gradation by
finding a matching hex value for each one of the painted pieces of your color strip.
Color Names Supported by All Browsers
There are 141 color names identified in the HTML and CSS color specification
comprised of the17 standard colors plus 124 more.
“Tip: The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.”
(w3schools.com)
However, it would be hard for web designers to compare the colors using color
names to build gradating color. So, you will use the hex value code, or the numeric
version, to find the flowing colors.
3
L. 1 Color
<html><head><title>ArtGalaxies.com</title></head><body><br>
<center>
<font color=#000033>You look like a meadow in summer.</font>
<font color=#000066>You look like a meadow in summer.</font>
<font color=#000099> You look like a meadow in summer. </font>
<font color=#009999>You look like a meadow in summer. </font> <br>
one line of text
<font color=#00aa99>You look like a meadow in summer.</font>
<font color=#00bb99>You look like a meadow in summer.</font>
<font color=#00cc99> You look like a meadow in summer. </font>
<font color=#00dd99>You look like a meadow in summer. </font> <br>
one line of text
</h4></center></body></html>
There are several good color charts around on the web. Use your favorite or search for one.
A good one is http://htmlcolorcodes.org/, another is http://html-color-codes.com/. Also,
there may be a book in the library on the color code chart or the hex value system or RGB hex
value system.
Once you have found all 15 to 20 colors corresponding to your pieces, put them into the
above HTML page format. Use any style font you like. The text should create a short story on
your favorite holiday. 15 to 20 sentences is not a long story. Be creative with font, if you like.
4
L. 1 Color
Surprise quiz. Take out a piece of paper and put your name at the top. Then format a basic
HTML page without content. You will not be graded, however this is an assessment quiz.
After quiz. Below is the basic HTML format to enclose a page.
<html><head><title></title></head><body>
CONTENT AREA
</body></html>
KEY
• Your text belongs between the <body></body> tags.
• Put your name for the title between the <title></title> tags.
• The head tags should be in place. If you know animation or java, you know this is
where developers and designers place the scripts or javascript (.js). You are free to
demonstrate anything you know to your page, but the quiz will be the basics above.
• Your story is the text between the font tags <font=“#------”> </font>.
• Each hex value, or color, has a beginning font and a font tag anchor.
5
Web Color
These colors are These colors parallel are
coded by name. numerically coded. The
numeric range is much
greater and any color can be
produced to match or
improve a color. Look at
“green”. Name color would
have left no choice but for
designers who wanted green
to select the name code
green.
The same color numerically coded is written
<font color=« #33cccc">turquoise</font>.
6
L. 1 Color
Older Web Color
Any color can be numerically produced, but previously color was coded by the color’s name.
<font color="turquoise">turquoise</font>
I am providing screen shots of
my experimentation with old
name web color and new
numeric web color.
7
L. 1 Color
Color Names Supported by All Browsers
There are 141 color names identified in the HTML and CSS color specification comprised
of the17 standard colors plus 124 more.
“Tip: The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, orange, purple, red, silver, teal, white, and yellow.” (w3schools.com)
There are several good color charts around on the web. Use your favorite or search for one.
A good one is http://htmlcolorcodes.org/, another is http://html-color-codes.com/.
For fonts, visit http://www.dafont.com or use your own favorite.
8
The students are asked to look up the color codes on the HTML color code chart and, based on
their original assignment’s color choices, find the matching codes.
Materials needed: Computer and Internet connection for researching “color chart”. Employ
the search engine or desktop software such as Photoshop for numeric color identification of RGB
hex value six-place codes. Alternatively, a book on color codes can be found at the library.
Task: Exchange the painted poster board pieces for identical color codes and set them into a
HTML or XHTML document using the code given in class.
“Look up groovy fonts to use. Use them creatively as much as you like, but describe in your
text, your favorite family holiday.”
This satisfies the multiple ways the artwork connects with the learning environment. The
artwork learning environment facilitated connecting with learning about their classmates.
The project shows learning color theory was connected to emergent technology and this
was different than simply the same theory from the year 1666 BC.
The project shows how to look up color codes from the HTML color chart.
The project shows a creative use of color by creating gradating color schemes and
transferring the knowledge to using them in another environment.
Progression of numeric codes will present the likeness to the spectrum
The project shows artwork responding from one scenario to another, as well as they found
similarities in artwork changing from one scenario into another.
The project shows the students gain experience building a web page and uploading it to a
web site.
9
L. 1 Color
Description:Featuring Color Theory for the Web 0 The Elements of Art and Principles of Design . Computer and Internet connection for researching “color chart”.
