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.