Premium Features

Download Video

Background Color

Published 2 years ago

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:


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.


Want to participate?

Create a free Chris Courses account to begin

Jeremy posted a year ago

Providing the lift to launch your development career

© 2023 Chris Courses. All rights reserved.