Color plays an important role in web design.

And with CSS, we can describe a color value in different ways.

The three most common ways are with a keyword, a hexadecimal value, or

an RGB function.

Many of the CSS data types have predefined keyword values that simply take

the form of words that literally describe how the element will appear.

So we're able to describe a color value as one of

the many predefined keywords CSS has to represent a color.

For example, the orange, lightblue, forestgreen, and

lightcoral values we gave our links.

Now these are just a few in the long list of accepted keyword values.

Some color names are as simple as black, silver, grey, and white.

While other colors include a combination of words.

Like cadet-blue, cornflower-blue.

Even colors like green-yellow and blonde-green.

For a full list of the available color keywords,

take a look at the MDN docs link I included in the teacher's notes.

Now another way we can describe color is with an RGB model.

Which stands for

red, green, blue and we can do that in two different types of formats.

One of the ways is with hexadecimal notation.

And you will often see these referred to as hex value.

Now a hex value is combination of red, green, and blue color values.

So let's go ahead and

define a hex value as the background color of our main header.

So hex values are specified by a hash sign,

followed by six hexadecimal characters.

That are represented by the numbers 0 through 9 and the letters a through f.

And their written as three double digit numbers.

So for example, if we defined our background color value as #ff0033,

in our hex value, ff represents the red value,

while 00 represents the green value.

And 3 3 represents the blue value.

Now, what's great about workspaces is that we're able to

preview a hexadecimal value when we hover over it.

And that's really helpful.

So here we see that the hex value we defined is a shade of red.

So if we save our style sheet and take a look at it in the browser,

that's exactly how our main header's background color renders in the browser.

And we're also able to use a shorter three digit notation where the hex

values are abbreviated.

And we can only that if each of the red, green and blue hex pairs are the same.

So in our current hex value, we can abbreviate each color channel using one

character, instead of two identical characters, like so.

And as we can see in the workspace preview,

it still represents a shade of red.

And if our hex value was something like ffaa88,

we could shorten it to the value fa8.

Which, as we can see, represents a much lighter shade of orange.

And if all six of the hex values are the same as in the value 000000

we can also abbreviate this value to simply 000.

And as we can see this value represents the darkest shade of black.

Conversely, the hex value ffffff, or

simply fff, represents the lightest shade of white.

So how do we initially come up with these hex values for our design colors?

Well, usually we'll choose these colors beforehand in a graphics editor like

Illustrator or Photoshop.

We're not expected to know each hex-value combination to determine

colors on the fly.

You can also refer to the MDN doc,

which also lists the hex value for each color keyword.

We've already used some hex values in our body and h3 colors.

So next since we're going to need a slightly lighter variation of

the color orange in our design.

Let's change the keyword value orange to a hex value

that represents a lighter shade of orange.

So first in our link rule, we're going to replace

the color value orange with the hex value #ffa949.

So now we can just go ahead and

copy this value, then scroll down to our main header rule.

And as the background-color value.

We're going to paste in the hex value we just wrote.

Let's also scroll up and give our main footer border the same hex value.

So we'll replace the orange border color with the hex value.

[BLANK_AUDIO]

So now when we save our style sheet and

refresh our browser, you can see those new shades of orange defined with hex values.

So the second RGB method uses what's

called a functional notation to specify the colors.

To see how it works, let's define our link colors with an RGB function.

So, let's actually delete the color value we wrote earlier in our link rule.

And now, we're going to type rgb followed by a set of parenthesis.

And inside the parenthesis,

we'll need to write a comma separated list of three numerical values.

And the values will represent the shades red, green, and blue respectively.

So the first value in our list represents red.

So let's made that 255.

Then we'll type a comma and after that the second value represents green.

So let's make this value 169.

Then we're going to type a comma and write the third value.

Which represents blue.

Let's make this 73.

So if we hover over our rgb value, Workspaces lets us

know that this particular rgb mixture is indeed a shade of orange.

Keep in mind that when using the rgb function

the value 255 represents the color white.

And it's the maximum value we can use.

While the value 0 represents pure black and is the minimum value.

For example if we change our rgb value to 255, 255 and 255 in

the preview we can see that it's the color white.

And if we change our value to 0, 0,

0 this is now the color black.

But let's go ahead and set our link color to the rgb value 255, 169, and 73.

That shade of orange.

Finally, we can also extend the rgb color model to allow alpha for

setting the opacity of a color via the alpha channel.

So, let's give our links a lighter, transparent shade of orange on hover.

To do that, let's go ahead and copy the rgb function, we just wrote.

Then paste it as the color value in our hover rule.

But this time we're going to add a fourth value after b of a,

and this stands for alpha.

Then, inside the parentheses,

we're going to add the alpha value as the fourth value in the list.

Let's set it to 0.4 or 40%.

So now when we save our style sheet and refresh the page.

When we hover over a link we can see how it turns a lighter shade of orange.

It's actually transparent now.

And we could really notice the alpha value when there's a background layer

behind the element.

For instance let's scroll up to our h1 rule and

set the color of our h1 to white using the rgba function.

So we're going to replace white with rgba and a set of parenthesis.

Then inside the parenthesis we're gonna type the value 255,

255 followed by a comma and 255.

And we're going to set the alpha value to 0.5 or 50%.

So, now if we save our style sheet, and refresh the browser preview.

We can see a lot of that orange background color showing through the main heading.

It's now pretty transparent.