-
Colors. There are 140 named colors in
HTML. We will be looking at two ways of making many more
colors by mixing amounts of red, green and blue colors.
Decimal. The amount of red can be any whole number from 0 to
255. The same thing for the amounts of green and blue.
We are going to try to make pink.
Look at the HTML below
<h3 style="background-color:rgb(255,100,100);">One</h3>
One
Definitely NOT pink.
The function rgb takes a value of 225 for red and 100 each
for green and blue. It makes the color from that much red, green,
and blue.
It is hard to see the effects of the
green and blue. Let's try to lower the amount of red so that it
is also 100:
<h3 style="background-color:rgb(100,100,100);">Two</h3>
Two
That's too much, with red, green, and blue balanced at 100 we
get a dark grey. Let's raise the red to 200:
<h3 style="background-color:rgb(200,100,100);">Three</h3>
Three
Still not right. Too dark.
Let's try this a different way! say all 3 colors are set to 255.
<h3 style="background-color:rgb(255,255,255);">Three</h3>
Four
We get a white background! Let's make it less white and more
red by backing off on the green and the blue:
<h3 style="background-color:rgb(255,220,220);">Five</h3>
Five
Pink! Success!
-
Hex Colors. Conversions between rgb and Hex.
Please read:
Hex and Conversions
-
Homework, Conversion:
Take
the decimal numbers in the first HTML element and convert
them to Hex. Put that result in the second HTML element
below after the #. Use pico to make the file 4-3.txt in
your public_html directory. It should contain a copy of
the second element below with your Hex conversion in it.
<h3 style="background-color:rgb(255,220,220);">Hello</h3>
<h3 style="background-color:# ;">Hello</h3>
-
Homework, Conversion:
Take
the Hex number in the first HTML element, split it
into red, green and blue Hex numbers. Convert
each Hex number to decimal. Put the three results into
the into the second HTML element
below inside the rgb(...). Use pico to make the file 4-4.txt in
your public_html directory. It should contain a copy of
the second element below with your decimal conversions in it.
<h3 style="background-color:#AA435A;">Bye</h3>
<h3 style="background-color:rgb( , , );">Bye</h3>
- Homework.
Make the web page
pg8.html in your public_html
directory. The content of its <body> element will be the
element
<h3 style="background-color:rgb(?, ?, ? );">Rapinoe</h3>
where the question marks will be replaced by one or more (0-255)
decimal digits. The background-color should approximate the color of
Megan Rapinoe's hair
- Homework.
Make the web page
pg9.html in your public_html
directory. The content of its <body> element will be the
element
<h3 style="background-color:rgb(?, ?, ? );">Dog</h3>
where the question marks will be replaced by one or more (0-255)
decimal digits. The background-color should orange.