CSS offers you 16,777,216 colors. They can appear as a name, an rgb (red/green/blue) value or a hex code.


Is the same as:


Which is the same as:


Which is the same as:


Which is the same as:


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.

Leave a Reply

Your email address will not be published. Required fields are marked *