Flash cards
Review the key moves
What is the main idea behind CSS Colors?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
#p1 {___-color: rgba(255, 0, 0, 0.3);} /* redPut the learning moves in the order that makes the concept easiest to apply.
CSS supports 140+ color names, HEX values, RGB values , RGBA values, HSL values, HSLA values, and opacity.
RGBA Colors
RGBA color values are an extension of RGB colors with an alpha channel - which specifies the opacity for a color.
An RGBA color value is specified with:
rgba( red, green , blue, alpha )
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
The following example defines different RGBA colors:
Example
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */Live preview
HSLA Colors
HSLA color values are an extension of HSL colors with an alpha channel - which specifies the opacity for a color.
An HSLA color value is specified with:
hsla( hue, saturation , lightness, alpha )
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque):
The following example defines different HSLA colors:
Example
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */Live preview
CSS opacity Property
The opacity property sets the opacity for the whole element (both background color and text will be opaque/transparent).
The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Notice that the text inside the element will also be transparent/opaque!
The following example shows different elements with opacity:
Example
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity
*/
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with
opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue
with opacity */Live preview