Colors
In this lesson, we will see how CSS provides exibility of assigning colors to several style properties.
Let's begin!
WE'LL COVER THE FOLLOWING
• The RGB notation
• Syntax
• The RGBA Notation
• Syntax
• The hexadecimal notation
• Syntax
• The HSL notation
• Syntax
Adding Colors with CSS
CSS provides several different ways to specify a color that you can assign to
many different properties including those for fonts, backgrounds, and
borders. The most readable way of declaring a color value is using a keyword
such as red, green, blue, gray, black, white, orange, cyan, magenta, and so on.
Here you can find the full list of color keywords defined by the CSS3
specification.
This list is limited to only a very few percentages of all colors available with
other notations:
The RGB notation #
output
rgb(120,241,134)
Syntax #
Here’s how you can use the rgb notation in your CSS code. You can use the
RGB notation using either percentages or integer values between 0 and
255 , as you can see in this example:
[Link]
p {
color: rgb(100%, 0%, 0%); /* red */
background-color: rgb(0, 255, 0); /* green */
}
rgb notation
The RGBA Notation #
With the RGBA notation you can add a fourth value for transparency. This
float value must be between 0 and 1 . For example, the following rule adds a
half-transparent ( 0.5 ) background to the p rule:
output
rgba(249,163,197,0.5)
Syntax #
Here’s how you can use the rgba notation in your CSS code.
[Link]
p {
background-color: rgba(249, 163, 197, 0.5); /* pink */
}
rgba notation
The hexadecimal notation #
You can use hexadecimal values with the #hhhhhh notation where h
represents a hexadecimal digit. The six digits represent three values (each
with two digits), the RGB (red, green, and blue) components of the color.
rgb(0,0,0)
hex#000
Syntax #
Here’s how you can use the hexadecimal # notation in your CSS code. If all
three two-digit values are repeated pairs of digits, you can shorten the hex
value by using just the first number of each pair. For example, #0f8 means
the same thing as #00ff88 .
[Link]
p {
color: #ff0000; /* red */
background-color: #00ff00; /* green */
}
hexadecimal notation
The HSL notation #
As an alternative, you can use the HSL (hue, saturation, and luminance)
notation, where the hue value is a degree value between 0 and 360 ,
saturation and luminance are percentage values.
You can also use HSLA that add a transparency value to HSL:
hsla(226,100%,70%,1)
Hue
Saturation
Lightness
Alpha
Syntax #
Here’s how you can use the hsla notation in your CSS code.
[Link]
p {
color: hsl(0, 100%, 50%); /* red */
background-color: hsla(226, 100%, 70%, 1); /* light purple */
}
hsla notation
In the next lesson, we will see the length and size types properties.