Summary -

In this topic, we described about the below sections -

Color
- Color Name
- Color Value
  - RGB Color Value
  - Hexadecimal Color Value

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 -

Color name
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.

Color	Name
	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

Color Value -

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

RGB Color Value
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.

Color	Name	RGB Value
	Red	RGB (255,0,0)
	Green	RGB (0,255,0)
	Blue	RGB (0,0,255)
	Black	RGB (0,0,0)
	Grey	RGB (128,128,128)
	white	RGB (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

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.

Name	RGB Value	Hexadecimal
Red	RGB (255,0,0)	#FF0000
Green	RGB (0,255,0)	#00FF00
Blue	RGB (0,0,255)	#0000FF
Black	RGB (0,0,0)	#000000
Grey	RGB (128,128,128)	#808080
white	RGB (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