Learn
Color Theory

The Color Wheel and HSLA

There are a few different options for setting colors in CSS that we covered in Learn CSS: Color. Take a look at the code below to refresh yourself on the different ways of setting color in CSS.

h1 {
    color: Yellow; /*Keyword */
}
h2 {
    color: #8FBC8F; /* Hex Code */
}
h3 {
    color: rgb(23, 45, 23); /* RGB*/
}
p {
    color: hsla(34, 100%, 50%, 0.1); /* HSLA*/
}

When thinking like a designer, HSLA is the preferred syntax for setting colors. Why?

  • The CSS color keywords only give us a few options.
  • Hex Codes and RGB values cannot be intuitively adjusted. For example, you get feedback on your design that one color needs to be a little brighter, that does not translate to intuitive changes within Hexadecimal codes or RGB values.
  • HSLA is the most semantic system of setting colors with CSS.

Let's review what each value means:

  • The "pure" color is set with the Hue. This is expressed as the angle in degrees around the color wheel.
  • Saturation refers to the intensity or purity of that hue. Colors with full saturation (100%) are the color itself, colors with no saturation (0%) are completely grayscale.
  • Lightness refers to the lightness of the color. 0% is black, 100% is white.
  • A, or alpha, refers to the opacity. 0% is fully transparent, 100% is fully opaque.

Using values that have semantic meaning gives the designer more direct control over the color scheme, and more direct ability to manage contrast and create related color schemes.

Instructions

Move on to the next exercise when you're ready!

Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.