Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Basics!
You have completed CSS Basics!
Preview
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.
Further reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Color plays an important
role in web design.
0:01
And with CSS we can describe
a color value in different ways.
0:04
The three most common ways
are with a keyword,
0:08
a hexadecimal value,
or an RGB function.
0:11
So far we've used keywords to
represent colors in our CSS.
0:16
Seagreen, peachpuff, darkblue,
0:21
lightcoral, tomato, snow, orange.
0:26
These are all accepted keyword
values found in our CSS.
0:32
For a full list of the
available color keywords,
0:38
take a look at the MDN Docs I
included in the Teacher's Notes.
0:41
However, we have two other
options for defining colors that
0:46
we haven't yet
investigated.
0:49
Since all colors on digital
displays are made by
0:53
combining the colors
red, green, and blue,
0:57
another way we can describe
color is with an RGB model.
1:01
One way to specify RGB color
is with hexadecimal notation.
1:06
You'll often see these
referred to as hex values.
1:12
A hex value is a combination of red,
green, and blue color values.
1:17
It's specified by a hash sign followed
by six hexadecimal characters that
1:23
are represented by the numbers 0
through 9 and the letters A through F.
1:29
The first two characters represent the
amount of red in the color, the second
1:35
represents the amount of green,
and the third the amount of blue.
1:41
For example, if we
define the background
1:47
color of our header
as #ff6600,
1:50
ff means a whole lot
of red–100% in fact.
1:56
66 is a medium amount of green,
and 00 means no blue at all.
2:01
What's great about Workspaces is
we're able to preview a hexadecimal
2:08
value when we hover over it.
2:13
That's really helpful.
2:15
Here we see the hex value
as an orangey red, and
2:17
that's exactly how it
renders in the browser.
2:21
Now, hex values like this with repeated
characters can be abbreviated using
2:27
a shorter three digit notation,
where the hex values are
2:33
abbreviated. We can do that only
if each of the red, green and
2:38
blue hex pairs uses two
repeating characters.
2:43
So our header background color can be
shortened to just three characters.
2:47
I used a comment here to remind
me how this shorthand works.
3:03
In my ID called header-box, I'm going to
replace tomato with another hex value.
3:09
This value can't be shortened.
3:20
The number 3 repeats for
the red value but the green and
3:23
blue don't contain
repeating characters.
3:27
So how do we come up with hex
values for our design colors?
3:32
We usually choose these colors
beforehand in a graphics editor like
3:36
Illustrator or Photoshop, or maybe
using a color palette generator like
3:41
Coolors. We're not expected to
know each hex value combination
3:47
to determine colors on the fly.
3:53
You can also refer to the MDN Doc,
which also lists the hex value for
3:56
each color keyword.
4:00
An alternate RGB method uses what's
called a functional notation to
4:04
specify the colors.
4:09
To see how it works,
4:12
let's define our focus indicator
colors with an RGB function.
4:13
We'll delete the keywords we wrote
earlier, and instead type rgb,
4:19
Inside the parentheses,
we'll need to write
4:26
a comma separated list of
three numerical values.
4:31
The values will represent
the shades red,
4:36
green, and blue respectively.
4:40
Now I've rewritten my focus
indicators using an RGB function.
4:44
Since RGB numbers range
from 0 to 255.
4:50
Pure white is achieved
by setting red,
4:54
green, and blue to 100%.
4:59
The hex value equivalent
would be #FFFFFF. The
5:02
background color has 100% red, a
medium amount of green, and no blue.
5:09
If we hover over the value,
Workspaces lets us know that this
5:16
particular RGB mixture is
indeed a shade of orange.
5:21
And, let's try this in our browser by
tabbing to our interactive elements.
5:26
On the surface,
5:36
there's no particular benefit to
RGB functions versus hex values.
5:38
It's a matter of personal
preference which one you use.
5:43
However, the RGB color model can
be extended to allow alpha for setting
5:47
the opacity of a color via the alpha
channel. We call this method RGBA.
5:52
For example, what
would happen
6:00
if we gave our focus indicators
a bit of transparency?
6:02
To do that, let's adjust
the background-color property.
6:06
Not only did I change rgb to rgba to
allow my CSS to adjust the alpha value,
6:16
but I typed a number between 0
and 1 to adjust the opacity.
6:24
.5 means 50% opacity.
6:31
Note that there's no difference
between typing .5 and 0.5.
6:35
So you may or may not see a 0
before the decimal when checking
6:40
out another developer's RGBA value.
6:45
When we try it in the browser and
tab to one of our interactive elements,
6:53
we can see how it turns
a lighter shade of orange.
6:59
It's actually somewhat transparent now.
7:03
To make that more obvious,
I'm going to use the descendant
7:07
selector to adjust my h3 element
that contains the link to
7:11
Treehouse's website to have
a different background color.
7:16
Now my h3 has a
light blue background.
7:30
And when I tab to it, my link
looks kind of an orangey gray.
7:34
That's the light blue combining
with the 50% orange background
7:39
of my focused element.
7:44
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up