red

Is the same as:

rgb(255,0,0)

Which is the same as:

rgb(100%,0%,0%)

Which is the same as:

#ff0000

Which is the same as:

#f00

We have 17 valid predefined names for colors. They include aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

transparent is a valid value too.

The three values in the rbg value range from 0 to 255, where 0 is the lowest level (like no red), 255 is the highest level (like full red). These values can also be represented as a percentage.

Hexadecimal (formerly and with more accuracy called’sexadecimal‘) is a base-16 number system. We are commonly used to the decimal number system (base-10, from 0 to 9), but hexadecimal system has 16 digits, from 0 to f.

The hex number is prefixed with a hash character (#) and can have three or six digits length. In general, the three-digit version is a compressed version of the six-digit (#f00 becomes #ff0000, #c96 becomes #cc9966 etc.). It is easier to decipher the three-digit version (the first digit, the same as the first value in rgb, is red, the second green and the third blue) but the six-digit version provides you with more control over the specific color.

‘color’ and ‘background-color’

You can apply colors by using color and background-color (remember that this must be the American English spelling ‘color’ and not ‘colour’).

A blue background and yellow text could resemble this code:

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

These colors might be a bit too harsh, so you might choose to change the code of your CSS file for a little different shades:

body { font-size: 0.8em; color: navy; } h1 { color: #ffc; background-color: #009; } 

After saving the CSS file refresh your browser. You will notice that the colors of the first heading (the h1 element) have become yellow and blue.

The color and background-color properties can be applied to most HTML elements, including body, which will convert the colors of the page and also what is in it.