Everything You Need To Know About Colors In CSS

In this article, you will learn everything you need to know about colors in CSS. CSS lets you use 16,777,216 colors. You can simply write the color name, or use RGB (red/green/blue) or hex code.

For example following values get you the same result:

• red
• rgb(255,0,0)
• rgb(100%,0%,0%)
• #ff0000
• #f00

Predefined color names include black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, and many more. Even transparent is considered a color.

Three RGB values go from 0 to 255, 0 being the lowest level and 255 being the highest level. These values can also be a percentage.

Hexadecimal (hex) is a base-16 number system. We generally use a decimal number system (base-10, numbers from 0 to 9), but hexadecimal has 16 digits, from 0 to f.

The hexadecimal number is prefixed with a hashtag (#) and can be three or six digits in length. The digit version is easier to decipher, the first digit like the first value in RGB is red, the second is green, and the third is blue, but the six-digit version gives you more control over the color.

Color application

Colors can be applied by using color and background-color.

h1 {
    color: green;
    background-color: yellow;
}

This would give you a green heading with a yellow background. Or you can specify a color like this:

h1 {
    color: #ffc;
    background-color: #009;
}

The colors now changed to yellow and blue.

You can apply the color and background-color properties to most HTML elements, including body, which will change the colors of the page and everything in it.