Premium Features

Download Video

Background Color

Published a year 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


No comments yet, be the first to add one

Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2022 Chris Courses. All rights reserved.