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, 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