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!

Folder Icon

Sign up to start coding

Already have an account?