This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Color plays an important role in web design. 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.
Quick Reference
Common Color Values
Hexadecimal values
.main-header {
background-color: #ff0033;
}
RGB Values
a:link {
color: rgb(255, 169, 73);
}
RGBa Values
a:hover {
color: rgba(255, 169, 73, .4);
}
Related Videos
Color plays an important role in web
design.
0:00
And with CSS, we can describe a color
value in different ways.
0:03
The three most common ways are with a
keyword, a hexadecimal value, or
0:06
an RGB function.
0:10
Many of the CSS data types have predefined
keyword values that simply take
0:12
the form of words that literally describe
how the element will appear.
0:17
So we're able to describe a color value as
one of
0:21
the many predefined keywords CSS has to
represent a color.
0:24
For example, the orange, lightblue,
forestgreen, and
0:29
lightcoral values we gave our links.
0:33
Now these are just a few in the long list
of accepted keyword values.
0:36
Some color names are as simple as black,
silver, grey, and white.
0:42
While other colors include a combination
of words.
0:47
Like cadet-blue, cornflower-blue.
0:51
Even colors like green-yellow and
blonde-green.
0:55
For a full list of the available color
keywords,
0:59
take a look at the MDN docs link I
included in the teacher's notes.
1:03
Now another way we can describe color is
with an RGB model.
1:08
Which stands for
1:12
red, green, blue and we can do that in two
different types of formats.
1:13
One of the ways is with hexadecimal
notation.
1:18
And you will often see these referred to
as hex value.
1:21
Now a hex value is combination of red,
green, and blue color values.
1:24
So let's go ahead and
1:30
define a hex value as the background color
of our main header.
1:31
So hex values are specified by a hash
sign,
1:35
followed by six hexadecimal characters.
1:40
That are represented by the numbers 0
through 9 and the letters a through f.
1:42
And their written as three double digit
numbers.
1:47
So for example, if we defined our
background color value as #ff0033,
1:51
in our hex value, ff represents the red
value,
1:59
while 00 represents the green value.
2:04
And 3 3 represents the blue value.
2:08
Now, what's great about workspaces is that
we're able to
2:12
preview a hexadecimal value when we hover
over it.
2:15
And that's really helpful.
2:18
So here we see that the hex value we
defined is a shade of red.
2:20
So if we save our style sheet and take a
look at it in the browser,
2:25
that's exactly how our main header's
background color renders in the browser.
2:29
And we're also able to use a shorter three
digit notation where the hex
2:35
values are abbreviated.
2:39
And we can only that if each of the red,
green and blue hex pairs are the same.
2:41
So in our current hex value, we can
abbreviate each color channel using one
2:46
character, instead of two identical
characters, like so.
2:52
And as we can see in the workspace
preview,
2:59
it still represents a shade of red.
3:02
And if our hex value was something like
ffaa88,
3:04
we could shorten it to the value fa8.
3:11
Which, as we can see, represents a much
lighter shade of orange.
3:16
And if all six of the hex values are the
same as in the value 000000
3:21
we can also abbreviate this value to
simply 000.
3:29
And as we can see this value represents
the darkest shade of black.
3:35
Conversely, the hex value ffffff, or
3:40
simply fff, represents the lightest shade
of white.
3:43
So how do we initially come up with these
hex values for our design colors?
3:51
Well, usually we'll choose these colors
beforehand in a graphics editor like
3:55
Illustrator or Photoshop.
4:00
We're not expected to know each hex-value
combination to determine
4:02
colors on the fly.
4:05
You can also refer to the MDN doc,
4:07
which also lists the hex value for each
color keyword.
4:10
We've already used some hex values in our
body and h3 colors.
4:17
So next since we're going to need a
slightly lighter variation of
4:23
the color orange in our design.
4:28
Let's change the keyword value orange to a
hex value
4:30
that represents a lighter shade of orange.
4:35
So first in our link rule, we're going to
replace
4:38
the color value orange with the hex value
#ffa949.
4:44
So now we can just go ahead and
4:51
copy this value, then scroll down to our
main header rule.
4:53
And as the background-color value.
4:58
We're going to paste in the hex value we
just wrote.
5:00
Let's also scroll up and give our main
footer border the same hex value.
5:05
So we'll replace the orange border color
with the hex value.
5:11
[BLANK_AUDIO]
5:15
So now when we save our style sheet and
5:19
refresh our browser, you can see those new
shades of orange defined with hex values.
5:22
So the second RGB method uses what's
5:30
called a functional notation to specify
the colors.
5:32
To see how it works, let's define our link
colors with an RGB function.
5:36
So, let's actually delete the color value
we wrote earlier in our link rule.
5:42
And now, we're going to type rgb followed
by a set of parenthesis.
5:48
And inside the parenthesis,
5:53
we'll need to write a comma separated list
of three numerical values.
5:55
And the values will represent the shades
red, green, and blue respectively.
6:00
So the first value in our list represents
red.
6:05
So let's made that 255.
6:10
Then we'll type a comma and after that the
second value represents green.
6:12
So let's make this value 169.
6:17
Then we're going to type a comma and write
the third value.
6:18
Which represents blue.
6:23
Let's make this 73.
6:25
So if we hover over our rgb value,
Workspaces lets us
6:28
know that this particular rgb mixture is
indeed a shade of orange.
6:33
Keep in mind that when using the rgb
function
6:38
the value 255 represents the color white.
6:41
And it's the maximum value we can use.
6:45
While the value 0 represents pure black
and is the minimum value.
6:47
For example if we change our rgb value to
255, 255 and 255 in
6:54
the preview we can see that it's the color
white.
7:00
And if we change our value to 0, 0,
7:08
0 this is now the color black.
7:13
But let's go ahead and set our link color
to the rgb value 255, 169, and 73.
7:19
That shade of orange.
7:27
Finally, we can also extend the rgb color
model to allow alpha for
7:30
setting the opacity of a color via the
alpha channel.
7:35
So, let's give our links a lighter,
transparent shade of orange on hover.
7:39
To do that, let's go ahead and copy the
rgb function, we just wrote.
7:44
Then paste it as the color value in our
hover rule.
7:49
But this time we're going to add a fourth
value after b of a,
7:57
and this stands for alpha.
8:02
Then, inside the parentheses,
8:07
we're going to add the alpha value as the
fourth value in the list.
8:09
Let's set it to 0.4 or 40%.
8:14
So now when we save our style sheet and
refresh the page.
8:18
When we hover over a link we can see how
it turns a lighter shade of orange.
8:24
It's actually transparent now.
8:30
And we could really notice the alpha value
when there's a background layer
8:33
behind the element.
8:36
For instance let's scroll up to our h1
rule and
8:38
set the color of our h1 to white using the
rgba function.
8:43
So we're going to replace white with rgba
and a set of parenthesis.
8:48
Then inside the parenthesis we're gonna
type the value 255,
8:53
255 followed by a comma and 255.
8:58
And we're going to set the alpha value to
0.5 or 50%.
9:02
So, now if we save our style sheet, and
refresh the browser preview.
9:08
We can see a lot of that orange background
color showing through the main heading.
9:12
It's now pretty transparent.
9:18
You need to sign up for Treehouse in order to download course files.
Sign up