The background color property, as you could guess, determines what color an element's background should be. It can be set using a browser keyword such as red or blue, a hexadecimal such as #ff0000, an RGBA value like rgba(255, 0, 0, 1), or an HSL value like hsl(300, '100%', '100%').

When using design programs like Figma, it's very common to be provided with a hexadecimal value when determining a particular color.

A hexadecimal code is a six digit string of characters, preceded by a # symbol.

A full code that represents red would look like:

#ff0000

Here, the first two characters after the pound sign (ff) represent the color red.

Hexadecimal values can range anywhere from 0-9, then to A-F. The closer the value is to 0, the darker the particular color will be, but the closer the used value is to F, the lighter the color will be.

As a result, if we were to use two F values for our hexadecimal like we did earlier, we would be saying to add as much "red" as possible to our overall color, since the first two characters within a hexadecimal represent how red a color is.

The second two values in a hexadecimal represent the color green, while the final two values represent the color blue.

By inserting varying shades of red, green, and blue colors, we can produce almost any color imaginable, which is why the hexadecimal system is so widely used today.