Welcome to Exploring Computing.
Today's video is creating web pages, specifying colors.
So if you haven't already watched the hexadecimal numbers
video, watch that first.
Hexadecimal numbers are critical to working
with colors on web pages.
For CS105 students, that video is in the same folder
as this video.
For CS106E students, we covered hexadecimal numbers last week
in the LO6 memory lecture series.
Also is a reminder of how the computer actually
generates colors.
It mixes the amount of red, green,
and blue on each of the pixels composing
each of the individual pixels in the screen.
So remember, when we're specifying colors
for specified intensity of red, green, and blue,
we learn that the first week in the lecture on images.
OK.
So let's start off with a little history lesson.
This will tie back in.
Once upon a time, we had only 16 named colors,
and here they are.
So we'll see in a minute you guys have it much better off.
But there was another big problem that we had,
which was that the computer monitors only
displayed 256 colors.
And it turns out that the computer manufacturers could
not agree on what those 256 colors were,
so there were only 211 colors that
were agreed upon by all the computer manufacturers.
And these were referred to as the web-safe safe colors.
So if you see the term web-safe color,
that's what they're referring to.
It should not be an issue any longer
because any modern computer display or mobile device
should display 16.7 million colors or more.
I don't think you're going to run to devices
that only have 256 colors.
But you will run into the term web-safe color.
That is what it's referring to.
What do we have now?
Well, as far as named colors go, there are a 148 named colors.
And as we've talked about previously,
there are 16.7 million colors, as you
learned about in the first week how computer store and display
images.
And in addition to having 16.7 million colors,
we also have our 56 levels of transparency.
In computer science, we usually refer to this as alpha,
but it corresponds to either transparency or its opposite,
opacity.
The name colors are what are sometimes
referred to as the CSS3, that's Cascading Style Sheet 3.
There are several versions of Cascading Style Sheets.
They're starting to work on cascading style sheets 4,
but they haven't really finished Cascading Style Sheets
Three yet.
Cascading Style Sheets 3 had an extended color standard,
and these are referred to as CSS3 extended color
keyword or the SVG, that's Scalable Vector Graphics, which
we talked about briefly in our lecture
on image representation.
That's the object version of storing image information that
is available on the web.
We may talk about that again in more detail in other lecture.
It's also referred to as the SVG 1.0 color keyword names.
These are sometimes also referred to as HTML5 colors,
although that is not technically correct.
You may also hear them refer to as just CSS colors.
I'm not going to list all a 148 of them,
but this gives you a feel for what options
you have available.
There are quite a few options.
There's a lot going on there, but they are nowhere
near the full-color palette.
Remember, we can represent 16.7 million colors,
and the extended color keywords only give us a 148.
So I think they're fun and nothing else,
and they may give you some ideas on colors to play with,
but they are.
They are not-- they are fairly limited.
Now, when we're looking at these sample lists here,
we've got the name.
That's pretty obvious.
What that is.
And then, we have the representation of the color.
That's pretty obvious what that is.
And then what is between those two that thing
that starts with that number sign.
Well, if you've watched the hexadecimal video,
you will know that that is the hexadecimal color
specification.
And if you haven't watched the hexadecimal video yet,
watch the hexadecimal video.
So as we saw in hexadecimal video,
and as you'll recall from our discussion on computer displays
and images from the first week, computers
used -bit color or 32-bit color.
And in either one of these two schemes,
colors are represented by mixing red, green, and blue light,
and red corresponds to a single byte.
Green correspond to a single byte, and blue corresponds
to a single byte.
That gives this decimal numbers of 15, 0, and 255,
but it gives this hexadecimal number between 00 and FF.
And for the web, they're traditionally represented
as hexadecimal numbers.
And so here we've got cardinal red,
and it would be represented by the sequence 8C1515.
So six hexadecimal digits.
Two hexadecimal digits for red.
Two hexadecimal digits for green.
Two hexadecimal digits for blue.
And as you'll recall from the hexadecimal discussion,
each hexadecimal digit corresponds to four bits.
So twp hexadecimal digits corresponds
8 bits, which is a byte.
So that's where we get our success in decimal digits,
24-bit color.
I think the most important thing to understand
as far as hexadecimal goes when we're working with HTML and web
pages and cascading style sheets and colors
is how to make adjustments.
So here I've got a crimson red, and we're using crimson red,
although we saw a cardinal red a moment ago because cardinal red
is perfect.
We don't want to modify cardinal red,
but we might want to play with our crimson red.
This is crimson red DC143C.
And so, when you look at this color, you might think,
I think there's a little bit too much red.
So what you want to do is you want to be able to look at this
and say, well, that first pair of hexadecimal digits
at DC, that's the amount of red.
And so, I can move the amount of red
up or down, so like if I wanted to move it up,
if I wanted to move it up slightly,
what it comes above DC?
Well, DD comes above DC, and then DE and then
DF, and then E0.
Or we can go in the other direction and say, OK.
DC is too much.
Let me reduce it very slightly, DB, DA, D9, D8, and so we'll
able to up and down.
Now, you're probably not going to be moving up
by increments of one.
That's really-- well, maybe your eyesight
and artistic abilities are such that you
might notice the difference.
I'm not going to be able to notice difference,
so I would move it up much more or move it down much more.
So here I've moved it down to AC,
and you can see that this is a considerably darker
red than we started off with.
So again, say we want to adjust the amount of blue,
maybe we want a little bit more blue.
So I could-- I remember OK AC, that's now a red, 14.
That's our green, and 3C is our blue.
And so, if I want to move blue up,
3C, what comes after 3C 3D, 3E, 3F, 40.
Or if I want to go down from 3C, 3B, 3A, 39, and so on.
Again, those are minor adjustments.
I'm going to make a much bigger adjustment here.
I'm going to take the 3C and just boost up to 5C,
and you can see the results here.
So basically, you want to be able to take these color
specifications and have a good enough understanding
of hexadecimal to be able to make adjustments up or down.
So focused on understanding how to increase and decrease
the hexadecimal numbers rather than worrying about how
to convert to decimal.
Now, if you look at this little overlay the I've got here,
you may notice that you can see the color squares behind it.
And so, this is an example of using alpha.
To alpha controls, again, either the opacity
or the transparency.
The two are basically opposites of opacity.
It says how much are we preventing
the light from coming through and transparency.
It says how much are we allowing the light to come through.
So, in addition to being able to specify the amount of red,
green, and blue we have--
we can also add in fourth pair of hexadecimal digits
to control the alpha.
So here, 8C1515, that's our crimson red,
but that's actually equivalent of 8C1515.
That's RGB and then FF.
That is the-- the last set of hexadecimal digits
is the alpha.
And with FF, that's the maximum that we're allowed to specify,
and so this is full opacity.
This means we cannot see through this at all.
And so, you could see the example overlay title and then
a crimson background using the color specified here,
and you cannot see through that crimson at all.
So we're going to reduce it slightly.
Here it's 75%.
I've gone from FF to BF.
And if you look at the example overlay of our image of Venice,
you can see you're starting to be
able to see Venice through the crimson background there.
And that's because it's not at full capacity.
It's now at only 75% opacity.
We can lower it even more.
This is about 50% capacity.
I specify that last pair of--
that fourth pair of hexadecimal digits
again representing the opacity.
I've cut it down from FF all the way down to eight zeroes,
so this is basically halfway.
And you can see-- you can see a lot more of the background
shine through.
So that gives you an idea of how to play around
with the [? LFF ?] if you want to do that.
You can also use three or four-digit colors
instead of using six or eight-digit colors.
And so what happens here is we take--
let's start off with the three digit example.
We take our original RGB, and we just get rid of--
have the number of letters.
So as long as our pairs are both the tens, well,
they're not really tens.
I suppose they're 16s.
As long as the 16s and the 1s are the same,
if we were using decimal, it would be the 10th in the ones,
we can immediately convert it to three hexadecimal digits.
And I've written these down as they're equal.
That's not really true.
It's more-- the FFFFFF is transformed into FFF.
If we were to do the actual conversion in Bay 16,
these, of course, are not equal.
But as far as how they're specified
in this 33 digit scheme for colors,
that's the way it works.
So semi CC9900 can just be written as C90,
and 11AA33 could be written as 1A3.
If you work this out--
what ends up happening here is we're
losing the number of colors we can specify.
With our original eight hexadecimal digit scheme,
remember that corresponds to 24 bits, and so 2 to 24
gives us 16.7 million colors.
With the three hexadecimal digit scheme,
we've only got 12 bits is that gives us 2 to the 12
which means we have 4,096 color.
So basically, you're losing the ability
to specify a lot of colors.
But-- unless you're fine-tuning things, you may not notice it.
It just really depends on what you're doing.
And you can also specify these with four hexadecimal digits
where the fourth hexadecimal digit corresponds
to the amount of alpha.
So how do we take these specifications
and actually use them on a web page?
So here's a short little example showing how I use some colors.
So I have created a style sheet.
I'm specifying a style role for the body,
and you can see I'm providing the color
and background-color properties.
And for color, I'm just using one of those predefined color
names, wheat.
And then, for the background color,
I'm using my hexadecimal specifications.
Take the specifications.
We've been showing you here and slap them in the style sheet
anywhere at color as expected.
Now, if you're hexadecimally challenge,
it is possible to do it without the hexadecimals.
Traditionally, it is done by hexadecimals.
And the hexadecimal colors are going
to show up in a lot of places, so I
do think that you should try and get at least some familiarity
with them.
You should be familiar enough with them now
when you see them, you're like, oh.
That's a color, and I can get a sense
by looking at R at the G and the B
at more or less what it might look like.
But if you really don't want to specify the amounts
in hexadecimal, you can specify them either percentages, or as
just straight decimal numbers.
So this is going to be-- instead of specifying the number is,
number sign, hexadecimal pair, hexadecimal pair,
hexadecimal pair.
You can specify it using--
[INAUDIBLE] RGB and then giving a set of percentages
for red, green, and blue.
Or you can give numbers between 0 and 255.
This also works for alpha.
We just specify alpha as a percentage.
And then finally, we'll talk about this later
in the quarter when we're talking about website design.
But depending on what you're doing, you may want to specify.
Instead of RGB, you could specify using hue, saturation,
and whiteness.
This will be useful when you're trying to choose color schemes.
And again, we will talk about this later.
And here's what this looks like on an actual web
page inside this stylesheet.
So this is gives me a sense of how colors
are specified on web pages.
And now, between the images we talked
about earlier and the colors we specified here,
you should be able to make much more interesting and web pages.
I'll talk to you soon.