Summary -

In this topic, we described about the below sections -

Color plays most important role in creating web page. Color is defined using CSS properties. There are mostly two ways of specifying color in HTML. Most of the web developers choose their preferred method and will not always stick to the same method.

The methods of specifying the color are -

  1. Color name
  2. Color value

Let’s discuss on the methods one by one.

Color Name -

Specifying the color name directly in HTML Tag. Color names can be set in HTML by using CSS.

ColorName
Red
Orange
Yellow
Green
Blue

The style attribute used to set the color in CSS.

HTML supports 140 standard color names. For list of color details, refer HTML Colors Reference .

Example -

Below exmple describes about setting the colors to HTML headings.

<!DOCTYPE html>
<html>
<body>
	<h1>HTML Colors</h1>
	<!—Setting background color -->
	<div style="background-color:green">Background color</div>
	<!—Setting color for headers -->
	<h3 style="color:red">Heading</h3>
	<h3 style="color:orange">Heading</h3>
	<h3 style="color:yellow">Heading</h3>
	<h3 style="color:green">Heading</h3>
	<h3 style="color:blue">Heading</h3>
</body>
</html>

Output -

HTML Colors

Background color

Heading

Heading

Heading

Heading

Heading

Color Value -

Color can be specified by providing the color value. There are different ways of specifying the color value.

  1. RGB Color Value
  2. Hexadecimal Color Value

Let us discuss each one in detail.

RGB Color Value -

RGB is nothing but RED, GREEN and BLUE. The color specified with a combination above three colors values. Each parameter defines the intensity of the color. The parameter contains the value from 0 to 255.

If any parameter in the above specified as 0, then the color is not existed in the target color. RGB colors are supported by all browsers. For example, RGB (255,0,0) is Red. Because all the other colors are specified as zero in the combination.

Go through the below table for a better understanding.

ColorNameRGB Value
RedRGB (255,0,0)
GreenRGB (0,255,0)
BlueRGB (0,0,255)
BlackRGB (0,0,0)
GreyRGB (128,128,128)
whiteRGB (255,255,255)

Example -

Below exmple describes about setting the colors to HTML headings using RGB.

<!DOCTYPE html>
<html>
<body>
	<h1>HTML Colors with RGB</h1>
	<!—Setting background color -->
	<div style="background-color:RGB(0,255,0)">Background color</div>
	<!—Setting color for headers -->
	<h3 style="color:RGB(0,0,0)">Heading</h3>
	<h3 style="color: RGB(255,0,0)">Heading</h3>
	<h3 style="color:RGB(0,255,0)">Heading</h3>
	<h3 style="color:RGB(0,0,255)">Heading</h3>
	<h3 style="color: RGB(255,255,255)">Heading</h3>
</body>
</html>

Output -

HTML Colors with RGB

Background color

Heading

Heading

Heading

Heading

Heading

Hexadecimal Color Value -

Hexadecimal color value is also a combination of Red, Green and Blue. Hexadecimal color value can be specified as #RRGGBB. In the #RRGGBB RR is Red, GG is Green and BB is Blue.

The value is a three byte hexa decimal value. The value is from 00 to FF. 00 specifies the lowest color density and FF specifies the highest color density. Hexadecimal is a base-16 number system. Go through the below table for a better understanding.

ColorNameRGB ValueHexadecimal
RedRGB (255,0,0)#FF0000
GreenRGB (0,255,0)#00FF00
BlueRGB (0,0,255)#0000FF
BlackRGB (0,0,0)#000000
GreyRGB (128,128,128)#808080
whiteRGB (255,255,255)#FFFFFF

Example -

Set the colors to HTML headings using Hexadecimal values.

<!DOCTYPE html>
<html>
	<body>
		<h1>HTML Colors with Hexadecimal Value</h1>
		<!—Setting background color -->
		<div style="background-color:#00FF00">Background color</div>
		<!—Setting color for headers -->
		<h3 style="color:#000000">Heading</h3>
		<h3 style="color: #FF0000">Heading</h3>
		<h3 style="color:#00FF00">Heading</h3>
		<h3 style="color:#0000FF">Heading</h3>
		<h3 style="color: #FFFFFF">Heading</h3>
	</body>
</html>

Output -

HTML Colors with Hexadecimal Value

Background color

Heading

Heading

Heading

Heading

Heading