Some CSS functions are used specifically for certain properties. The first of these functions we will learn about are color functions. These functions can only be used as values for color properties.

The main color functions are:

  • The rgb() function which defines color using the standard RGB (red, green, and blue) model.
  • The rgba() function, which is similar to the rgb() function except it also defines an alpha channel to specify the color’s opacity level.
  • The hsl() function. This function defines color using hue, saturation and lightness.
  • The hsla() function. Again, this function is similar to the hsl() function except it also defines an alpha channel that specifies the color’s opacity level.

While each of the color functions has been covered extensively in the Learn CSS Colors lesson, by seeing them in the context of functions, we can get a feel for using property-specific CSS functions!



Locate the .card-body selector ruleset in the style.css stylesheet. Use the rgb() function to change the background property’s color value to be an off-white color with a red value of 255, a green value of 247, and a blue value of 255.


Using the rgba() function create an overlay effect on the postcard’s background image. Navigate to the .location-details selector add a background property and set its value to be rgba().

Use a red value of 209, a green value of 207, and a blue value of 63. Set the alpha value to be 0.3.


Moving on to the .card-body::before, .card-body::after selector ruleset, add a color for the border property. After the solid value add a value using the hsl() function with a hue of 25, a saturation of 47% and a lightness of 86%.

The border around the card’s body should now be a shade of yellow.


Finally, set a light blue font color for each list item at the bottom of the postcard. Inside the ul.activities selector ruleset, add a color property and set its value to be the hsla() function.

Give the function a hue of 208, a saturation of 69%, lightness of 66%, and an alpha value of 0.6.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?