- [Voiceover] Whenever I'm learning a new language
or new forms of syntax,
there always seems to be something
that everyone just takes for granted
that you already know.
In the years that I've spent teaching CSS,
it seems like no one ever really concentrates
on how color works and how the syntax
is used to define it.
There are three primary properties
that you'll use when defining color in CSS.
Two of them, border-color and background-color,
we've already discussed.
The third property is the color property,
and it's used to define the color
for the content of an element.
Many people often refer to this as foreground color,
and in terms of elements like paragraphs,
headings, and lists, it refers to the color of the text.
Whether you're defining color on borders,
backgrounds, or element content,
you have a number of options
in terms of how you want to define the color.
First, you can choose from one
of more than 150 color keywords
supported by CSS.
In older versions of CSS,
you were limited to these 16 color keywords.
But in CSS3, support has been added
for the SVG 1.0 color keyword names,
greatly expanding the range of available keywords.
These keywords map to a predetermined set
of RGB values that browsers will use
to display the color.
In the place of keywords,
you can also use hexidecimal notation
to represent color values.
Essentially, hexidecimal notation is another way
of representing RGB color
by using three hex pairs to represent the red,
green, and blue values of a color.
The easiest way to visualize hexidecimal notation
is to examine this table.
When you have a hex value like this one,
you match up the first pair of values for red,
the second pair of values for green,
and the final pair of values for blue.
Now I'm not going to lie to you
and say that I can spout hexidecimal notation
off the top of my head,
but over time you'll memorize the ones
that you use most frequently.
You'll also want to become familiar
with using shorthand hex values
for web safe colors.
If the hex values are made up of pairs,
you can shorten them to three characters
instead of six.
#FFF would represent
#FFFFFF or white
while #000 would represent
#000000 or black.
Keep in mind that all three values
need to be matching pairs.
So #FF33AB couldn't be represented
using shorthand.
If you don't want to use hexidecimal values,
you can stick with using RGB color values.
To use actual RGB values,
you'll simply declare rgb for the color value
and then pass either numeric values
for the red, green, and blue values
or you can use percentages if you'd like.
CSS3 introduces a new method of defining color as well.
And that is the HSL model.
If you're familiar with Photoshop
or other photo editing software,
you've probably used HSL at least once or twice.
It stands for hue, saturation, and lightness
and gives us a more intuitive way of defining color.
RGB is an additive mixture of red, green, and blue colors
that range in values between zero and 255.
Now if all three of them are set to 255,
you get white.
If all of the colors are removed or set to zero,
you get black.
It can become very difficult
to try to mix RGB colors
without a color picker
or some sort of other aid.
Now HSL, on the other hand, is a mixture
of a color's hue, saturation, and lightness.
A color's hue is represented as an angle
on a color wheel with ranges
from zero to 360.
Red is 360.
Green is 120.
Blue is 240.
And other colors, such as yellow, orange, and violet
are found in between those values.
Saturation represents the amount of color,
with 100% being fully saturated
and 0% being greyscale.
Lightness is how bright or dark the color is.
And just like saturation, it's defined
as a percentage with 100% being a bright white,
0% being black.
Now while this declaration is relatively new to CSS,
it already enjoys widespread support
among modern browsers.
In addition to color, CSS also allows us
to define transparency for elements
and it gives us a couple of different ways to do this.
Now first, we're able to use the opacity property.
Opacity can be defined using a value
from zero to one.
So to make an element 50% transparent, for example,
you'd use 0.5 for the value.
Now the thing about opacity is that it defines
the opacity for the entire element:
borders, backgrounds, and all.
In order to give you some additional flexibility
when defining opacity,
CSS3 introduced the concept
of RGB and HSL Alpha.
Essentially, you can add a fourth value
to RGB and HSL definitions in the form
of a range of zero to one.
This allows you to have individual transparency settings
for backgrounds, borders, and foreground colors.
Like HSL itself, RGBA and HSLA
enjoy widespread support among modern browsers.
I know this movie has probably been
a little bit more technical in terms of the syntax
and how deep we've dived into it
than some of our other movies,
but when learning, I think you'll find
that color values are often given
with little to no explanation as to what they mean.
And I wanted to make sure that you have
an understanding of why certain values are used
and what they refer to when specifying
the colors involved in your design.