CSS Guide Part 4. 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 color name, use RGB (red/green/blue) or hex code.

For example following values gets 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 goes 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 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. Three digit version is easier to decipher, first digit like first value in RGB is red, second is green and third is blue, but 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 green heading with yellow background. Or you can specify color like this:

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

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.