Color Names

There are total 140 standard colors that are supported by the HTML document. In the HTML document the colors can be set or selected by simply using its name. For example grey for grey color. The color names are case insensitive that is there is no difference between Grey, grey and GREY.

Consider the following example to add color to back ground to headings:

EXAMPLE

< ! DOCTYPE html >

< html >

< body >

< h1 > Adding colors to headings < / h1 >

< h2 style = “background-color: grey” >

Grey Color < / h2 >

< h2 style = “background-color: red” >

Red color

< / h2 >

< h2 style = “background-color: blue” >

Blue color

< / h2 >

< h2 style = “background-color: pink; color: grey” >

Pink background Color and text is grey

< / h2 >

< h2 style = “background-color: green” >

Green color

< / h2 >

< h2 style = “background-color: yellow” >

Yellow color

< / h2 >

< h2 style = “background-color: Olive” >

Olive color

< / h2 >

< h2 style = “background-color: pink; color: purple” >

Pink background Color and text is purple

< / h2 >

< / body >

< / html >

This will produce the following result:

RGB

RGB stands for (Red, Green, Blue). The values of the colors are specified using the formula:

rgb(red, green, blue)

In the above syntax, each of the parameter is used to define the intensity of the color from 0 to 255 that is the colors red, green and blue are intensified from 0 to 255.

Suppose if we want a pure blue color then we will set the value of red and green to 0 and the value of blue parameter will be set to 255 as:

rgb(0,0,255)

Similarly if we want a pure shade of green color, we will set the red and blue parameter to 0 and green will be 255 as:

rgb(0, 255, 0)

Between 0 and 255 there are too many shades and colors. Consider the following example:

EXAMPLE

< ! DOCTYPE html >

< html >

< body >

< h1 > Some shades of colors using RGB < / h1 >

< h2 style = “background-color: rgb(255, 0, 0)” >

Red color using rgb(255, 0, 0)

< / h2 >

< h2 style = “background-color: rgb(0, 255, 0)” >

Green color using rgb(0, 255, 0)

< / h2 >

< h2 style = “background-color: rgb(0, 0, 255)” >

Blue color by using rgb(0, 0, 255)

< / h2 >

< h2 style = “background-color: rgb(191, 0, 255)” >

Purple color using rgb(191, 0, 255)

< / h2 >

< h2 style = “background-color: rgb(255, 128, 0)” >

Orange color rgb(255, 128, 0)

< / h2 >

< h2 style = “background-color: rgb(128, 128, 128)” >

Grey color rgb(128, 128, 128)

< / h2 >

< / body >

< / html >

This will produce the following result:

In the above example, you can see that the grey color has the same value for all the parameters. Therefore, we can say that the shades of grey color are defined when equal values are set for all parameters. Consider the following example:

EXAMPLE

< ! DOCTYPE html >

< html >

< body >

< h2 > RGB Grey Color Examples < / h2 >

< h2 style = “background-color: rgb(0, 0, 0); color: white” >

Black color using rgb(0,0,0)

< / h2 >

< h2 style = “background-color: rgb(128, 128, 128);” >

grey color using rgb(128,128,128)

< / h2 >

< h2 style = “background-color: rgb(255, 255, 255)” >

White Colored background using rgb(255,255,255)

< / h2 >

< h2 style = “background-color: rgb(175, 175, 175)” >

Another shade of grey color using rgb(175,175,175)

< / h2 >

< / body >

< / html >

This will produce the following result:

Hexadecimal Colors

The hexadecimal color values specify the RGB values using a format like:

#RRGGBB

Where RR stands for red, GG stands for green and BB stands for blues. To make a red color the format will be as follows:

#ff0000

This is case insensitive, it does not have any effect if we write #ff0000 or we write #FF0000.

The hexadecimal values are between 0 and FF like the decimal values from 0 to 255. Consider the following example:

EXAMPLE

< ! DOCTYPE html >

< html >

< body >

< h1 > Some shades of colors using RGB < / h1 >

< h2 style = “background-color: #ff0000” >

Red color using #ff0000

< / h2 >

< h2 style = “background-color: #00ff00” >

Green color using #00ff00

< / h2 >

< h2 style = “background-color: #0000ff” >

Blue color by using #0000ff

< / h2 >

< h2 style = “background-color: #bf00ff” >

Purple color using #bf00ff

< / h2 >

< h2 style = “background-color: #ff8000” >

Orange color using#ff8000

< / h2 >

< h2 style = “background-color: #808080” >

Grey color using #808080

< / h2 >

< / body >

< / html >

This will produce the following result:

In the above example, you can see that the grey color has the same value for all the parameters that is “80”. Therefore, we can say that the shades of grey color are defined when equal values are set for all parameters. Consider the following example:

EXAMPLE

< ! DOCTYPE html >

< html >

< body >

< h2 > RGB Grey Color Examples < / h2 >

< h2 style = “background-color: #000000; color: white” >

Black color using #000000

< / h2 >

< h2 style = “background-color: #808080;” >

grey color using #808080

< / h2 >

< h2 style = “background-color: #ffffff” >

White Colored background using #ffffff

< / h2 >

< h2 style = “background-color: #afafaf” >

Another shade of grey color using #afafaf

< / h2 >

< / body >

< / html >

This will produce the following result: