HTML Colors

HTML Colors

HTML Colors

In HTML, a color can be specified by using a color name, an RGB value, or a HEX value.

Color Names

In HTML, a color can be specified by using a color name :

Color Name
 Red
 Orange
 Yellow
 Cyan
 Blue

Example

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:red">
Background-color set by using red
</h2>

<h2 style="background-color:orange">
Background-color set by using orange
</h2>

<h2 style="background-color:yellow">
Background-color set by using yellow
</h2>

<h2 style="background-color:blue;color:white">
Background-color set by using blue
</h2>

<h2 style="background-color:cyan">
Background-color set by using cyan
</h2>

</body>
</html>
Click here to Run the Program

HTML supports 140 standard color names.

RGB Value

  • In HTML, a color can also be specified as an RGB value, using this formula: rgb(red, green, blue)
  • Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
  • For example, rgb(255,0,0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.
  • To display the color black, all color parameters must be set to 0, like this: rgb(0,0,0).
  • To display the color white, all color parameters must be set to 255, like this: rgb(255,255,255).

Experiment by mixing the RGB values below :

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:rgb(255,0,0)">
Background-color set by using rgb(255,0,0)
</h2>

<h2 style="background-color:rgb(0,255,0)">
Background-color set by using rgb(0,255,0)
</h2>

<h2 style="background-color:rgb(0,0,255)">
Background-color set by using rgb(0,0,255)
</h2>

<h2 style="background-color:rgb(255,255,0)">
Background-color set by using rgb(255,255,0)
</h2>

<h2 style="background-color:rgb(255,0,255)">
Background-color set by using rgb(255,0,255)
</h2>

<h2 style="background-color:rgb(0,255,255)">
Background-color set by using rgb(0,255,255)
</h2>

</body>
</html>
Click here to Run the Program

Shades of gray are often defined using equal values for all the 3 light sources :

Example

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:rgb(0,0,0);color:white">
Background-color set by using rgb(0,0,0)
</h2>

<h2 style="background-color:rgb(90,90,90);color:white">
Background-color set by using rgb(90,90,90)
</h2>

<h2 style="background-color:rgb(128,128,128);color:white">
Background-color set by using rgb(128,128,128)
</h2>

<h2 style="background-color:rgb(200,200,200);color:white">
Background-color set by using rgb(200,200,200)
</h2>

<h2 style="background-color:rgb(255,255,255);">
Background-color set by using rgb(255,255,255)
</h2>

</body>
</html>
Click here to Run the Program

HEX Value

In HTML, a color can also be specified using a hexadecimal value in the form: #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as decimal 0-255).

For example, #FF0000 is displayed as red, because red is set to its highest value (FF) and the others are set to the lowest value (00).

Example

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:#FF0000">
Background-color set by using #FF0000
</h2>

<h2 style="background-color:#00FF00">
Background-color set by using #00FF00
</h2>

<h2 style="background-color:#0000FF">
Background-color set by using #0000FF
</h2>

<h2 style="background-color:#FFFF00">
Background-color set by using #FFFF00
</h2>

<h2 style="background-color:#FF00FF">
Background-color set by using #FF00FF
</h2>

<h2 style="background-color:#00FFFF">
Background-color set by using #00FFFF
</h2>

</body>
</html>
Click here to Run the Program

Shades of gray are often defined using equal values for all the 3 light sources :

Example

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:#000000;color:white">
Background-color set by using #000000
</h2>

<h2 style="background-color:#808080;color:white">
Background-color set by using #808080
</h2>

<h2 style="background-color:#FFFFFF;">
Background-color set by using #FFFFFF
</h2>

</body>
</html>
Click here to Run the Program